app/src/components/Map/index.js (view raw)
1import React from 'react';
2import 'leaflet/dist/leaflet.css';
3import {Map as LeafletMap, Marker, TileLayer} from 'react-leaflet';
4import L from 'leaflet';
5delete L.Icon.Default.prototype._getIconUrl;
6
7L.Icon.Default.mergeOptions({
8 iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
9 iconUrl: require('leaflet/dist/images/marker-icon.png'),
10 shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
11});
12
13const Map = ({width = '100%', height = '20rem', position}) => {
14 return (
15 <LeafletMap center={position} zoom={13} style={{width, height}}>
16 <TileLayer
17 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
18 attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
19 />
20 <Marker position={position}></Marker>
21 </LeafletMap>
22 );
23};
24
25export default Map;