mirror of https://github.com/captn3m0/plugo.git
87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
---
|
|
---
|
|
mapboxgl.accessToken = "{{site.mapboxtoken}}";
|
|
const map = new mapboxgl.Map({
|
|
container: "map",
|
|
style: "mapbox://styles/mapbox/light-v10",
|
|
zoom: 7,
|
|
center: [77.61588870000003, 12.9346911],
|
|
});
|
|
map.on("idle", function () {
|
|
map.resize();
|
|
});
|
|
map.on("load", (e) => {
|
|
map.resize();
|
|
map.loadImage("/plugo/map-marker-icon.png", (error, image) => {
|
|
if (error) throw error;
|
|
map.addImage("custom-marker", image);
|
|
});
|
|
map.addSource("plugo", {
|
|
type: "geojson",
|
|
data: "map.geojson",
|
|
data: "/plugo/map.geojson",
|
|
});
|
|
|
|
|
|
map.addLayer({
|
|
id: "markers",
|
|
type: "symbol",
|
|
source: "plugo",
|
|
layout: {
|
|
"icon-allow-overlap": true,
|
|
"icon-ignore-placement": true,
|
|
"text-allow-overlap": true,
|
|
"icon-size": 1.3,
|
|
"icon-image": ["get", "icon"],
|
|
"text-variable-anchor": ["bottom", "right"],
|
|
"text-radial-offset": 0.7,
|
|
"text-field": ["get", "shorttitle"],
|
|
"text-size": {"stops": [
|
|
[0, 0],
|
|
[12, 0],
|
|
[12.99999999, 0],
|
|
[13.0000001, 10],
|
|
[15, 12],
|
|
[20, 15]
|
|
]},
|
|
},
|
|
paint:{
|
|
"icon-color": "#00ff00",
|
|
"text-color": "#202",
|
|
"text-halo-color": "#ebff32",
|
|
"text-halo-blur": 1,
|
|
"text-halo-width": 2
|
|
},
|
|
});
|
|
|
|
map.on("mouseenter", "markers", () => {
|
|
map.getCanvas().style.cursor = "pointer";
|
|
});
|
|
|
|
// Change it back to a pointer when it leaves.
|
|
map.on("mouseleave", "markers", () => {
|
|
map.getCanvas().style.cursor = "";
|
|
});
|
|
|
|
function onclick(e) {
|
|
// Copy coordinates array.
|
|
const coordinates = e.features[0].geometry.coordinates.slice();
|
|
const P = e.features[0].properties;
|
|
|
|
// Ensure that if the map is zoomed out such that multiple
|
|
// copies of the feature are visible, the popup appears
|
|
// over the copy being pointed to.
|
|
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
|
|
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
|
|
}
|
|
|
|
new mapboxgl.Popup()
|
|
.setLngLat(coordinates)
|
|
.setHTML(`${P.description}<br>${P.count} powerbanks available<br>Location Type: ${P.type}`)
|
|
.addTo(map);
|
|
}
|
|
|
|
map.on('click', 'markers', onclick);
|
|
});
|
|
map.addControl(new mapboxgl.FullscreenControl());
|