//API_KEY
const API_KEY = "web.61978241966a42d09d29721dae376884"
// get map dom element
const mapContainer = document.getElementById("neshanMapContainer");
function applyResponsiveMapSize() {
mapContainer.style.width = "100%";
mapContainer.style.minWidth = "0"; // don't force overflow on small screens
mapContainer.style.maxWidth = "800px"; // cap growth on large screens
if (window.innerWidth <= 768) {
mapContainer.style.height = "50vh";
mapContainer.style.minHeight = "280px";
mapContainer.style.maxHeight = "420px";
} else {
mapContainer.style.height = "800px";
mapContainer.style.minHeight = "400px";
mapContainer.style.maxHeight = "800px";
}
}
applyResponsiveMapSize();
/* رنگ آیکون مرکز نقشه */
const neshanMarkerColor = "#FF8330";
const mapCenterLocation = [35.79432025307184, 50.85137969074276] //latitude,longitude
const poi = true;
const traffic = true;
// slightly lower zoom on mobile so more context is visible in the shorter box
const mapZoom = window.innerWidth
const mapType = nmp_mapboxgl.Map.mapTypes.neshanVector;
const map = new nmp_mapboxgl.Map({
mapType: mapType,
container: mapContainer,
zoom: mapZoom,
pitch: 0,
center: mapCenterLocation.reverse(),
minZoom: 2,
maxZoom: 21,
trackResize: true,
mapKey: API_KEY,
poi: poi,
traffic: traffic,
mapTypeControllerStatus: {
show: true,
position: 'bottom-right'
}
});
map.addControl(new nmp_mapboxgl.GeolocateControl({
positionOptions: { enableHighAccuracy: true },
trackUserLocation: true,
showUserHeading: true })
);
const marker = new nmp_mapboxgl.Marker({
color: neshanMarkerColor,
draggable: false
}).setLngLat(mapCenterLocation)
.addTo(map)
let resizeTimer;
window.addEventListener("resize", function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
applyResponsiveMapSize();
if (map && typeof map.resize === "function") {
map.resize();
}
}, 150);
});
