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;