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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
19      />
20      <Marker position={position}></Marker>
21    </LeafletMap>
22  );
23};
24
25export default Map;