40 lines
941 B
JavaScript
40 lines
941 B
JavaScript
import React, { useEffect, useRef, useState } from 'react'
|
|
import L from 'leaflet'
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
export default function MapSimple() {
|
|
|
|
const mapRef = useRef();
|
|
|
|
useEffect(() => {
|
|
|
|
const map = L.map(
|
|
mapRef.current,
|
|
{attributionControl: true}
|
|
).setView(
|
|
[42.69751, 23.32415],
|
|
16
|
|
);
|
|
|
|
L.tileLayer(
|
|
"http://{s}.tile.osm.org/{z}/{x}/{y}.png",
|
|
{
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: 18,
|
|
scrollWheelZoom: false,
|
|
}).addTo(map);
|
|
|
|
// unmount map function
|
|
//You should unmount the function in react.js to remove the existing map.
|
|
return () => map.remove();
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
style={{padding: 0, margin: 0, width: "75%", height: "23vh",}}
|
|
ref={el => mapRef.current = el}>
|
|
</div>
|
|
);
|
|
};
|
|
//https://github.com/azaharyan/react-leaflet-example
|