39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
import L from "leaflet";
|
|
import { useRef, useMemo } from "react";
|
|
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
|
|
|
|
const OSMapComponent = (props) => {
|
|
const { center, zoom } = props;
|
|
const markerRef = useRef(null);
|
|
let data = [center];
|
|
|
|
//const ModelsMap = (map, maps) => {
|
|
// //instantiate array that will hold your Json Data
|
|
// let dataArray = [];
|
|
// //push your Json Data in the array
|
|
// {
|
|
// data.map((markerJson) => dataArray.push(markerJson));
|
|
// }
|
|
|
|
// //Loop through the dataArray to create a marker per data using the coordinates in the json
|
|
// for (let i = 0; i < dataArray.length; i++) {
|
|
// let marker = new maps.Marker({
|
|
// position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
|
|
// map,
|
|
// label: dataArray[i].id,
|
|
// });
|
|
// }
|
|
// };
|
|
|
|
return (
|
|
<MapContainer center={center} zoom={zoom}>
|
|
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
|
|
|
<Marker position={center} ref={markerRef}>
|
|
<Popup>hello</Popup>
|
|
</Marker>
|
|
</MapContainer>
|
|
);
|
|
};
|
|
export default OSMapComponent;
|