112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
import React, { useEffect, useRef } from 'react';
|
|
import L from "leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
export default function Map() {
|
|
|
|
|
|
const mapContainerRef = useRef(null);
|
|
|
|
useEffect( async () => {
|
|
//const res =await Axios.get(BASE_PATH + 'fetchProperty')
|
|
|
|
//TODO Is this the map unload part?
|
|
const container = L.DomUtil.get(mapContainerRef.current);
|
|
if(container != null) {
|
|
container._leaflet_id = null;
|
|
}
|
|
|
|
if(container) {
|
|
|
|
const mapView = L.map( mapContainerRef.current, {
|
|
zoom: 13,
|
|
center: [19.059984, 72.889999]
|
|
// maxZoom: 13
|
|
// minZoom: 15
|
|
});
|
|
|
|
// const canvas = mapView.getCanvasContainer();
|
|
mapView.zoomControl.setPosition("bottomright");
|
|
mapView.attributionControl.addAttribution(
|
|
"<a href='https://mascots.pro'>Mascots. pro</a>"
|
|
);
|
|
|
|
L.tileLayer(
|
|
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
|
|
{
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
|
maxZoom: 18,
|
|
id: 'mapbox/streets-v11',
|
|
tileSize: 512,
|
|
zoomOffset: -1,
|
|
accessToken: "pk.eyJ1IjoidGFyLWhlbCIsImEiOiJjbDJnYWRieGMwMTlrM2luenIzMzZwbGJ2In0.RQRMAJqClc4qoNwROT8Umg",
|
|
scrollWheelZoom: false,
|
|
}).addTo(map);
|
|
|
|
const mask = L.tileLayer.mask(
|
|
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
|
|
{
|
|
attribution: '<a href="https://mascots.pro">Mascots pro</a>',
|
|
maskSize: 300
|
|
// maxZoom: 18,
|
|
// maxNativeZoom: 16
|
|
// tms: true
|
|
}
|
|
).addTo(mapView);
|
|
|
|
mapView.on("mousemove", function (e) {
|
|
mask.setCenter(e.containerPoint);
|
|
});
|
|
|
|
/**
|
|
res.data.map((marker) => {
|
|
|
|
const innerHtmlContent = `<div id='popup-container' class='popup-container'> <h3> Property Details</h3>
|
|
<div class='popup-label'>Building Name :<p>${marker.Building}</p></div>
|
|
<div class='popup-address-label'> Address : <p>${marker.Landmark}, ${marker.Location}</p></div>
|
|
<div class='popup-rent-label'>Monthly Rent : <p> ₹ ${marker.Price}</p></div>
|
|
</div>`;
|
|
const divElement = document.createElement("div");
|
|
const assignBtn = document.createElement("div");
|
|
assignBtn.className = "map-link";
|
|
assignBtn.innerHTML = `<button class="view-btn">View Property</button>`;
|
|
divElement.innerHTML = innerHtmlContent;
|
|
divElement.appendChild(assignBtn);
|
|
assignBtn.addEventListener("click", (e) => {
|
|
console.log("dsvsdvb");
|
|
});
|
|
var iconOptions = {
|
|
iconUrl: "/images/location_pin2.svg",
|
|
iconSize: [25, 25]
|
|
};
|
|
var customIcon = L.icon(iconOptions);
|
|
// create popup contents
|
|
var customPopup = divElement;
|
|
// specify popup options
|
|
var customOptions = {
|
|
maxWidth: "500",
|
|
className: "custom"
|
|
};
|
|
const markerOptions = {
|
|
// title: "MyLocation",
|
|
// draggable: true
|
|
clickable: true,
|
|
icon: customIcon
|
|
};
|
|
const mark = L.marker([marker.Latitude,marker.Longitude], markerOptions);
|
|
mark.bindPopup(customPopup, customOptions);
|
|
mark.addTo(mapView);
|
|
// return mapView.off();
|
|
});
|
|
*/
|
|
return () => mapView.remove();
|
|
}
|
|
}, [])
|
|
return (
|
|
<div className="map-box">
|
|
<div className="map-container" ref={mapContainerRef}></div>
|
|
</div>
|
|
);
|
|
};
|
|
//https://stackoverflow.com/a/67486824/15078958
|