mirror of https://github.com/captn3m0/plugo.git
139 lines
3.5 KiB
JavaScript
139 lines
3.5 KiB
JavaScript
---
|
|
---
|
|
mapboxgl.accessToken = "{{site.mapboxtoken}}";
|
|
|
|
const filterGroup = document.getElementById('filter-group');
|
|
|
|
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.addSource("plugo", {
|
|
type: "geojson",
|
|
data: "map.geojson",
|
|
data: "/plugo/map.geojson",
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "markers-zero",
|
|
type: "symbol",
|
|
source: "plugo",
|
|
filter: ['==', 'count', 0],
|
|
layout: {
|
|
"icon-allow-overlap": true,
|
|
"icon-ignore-placement": true,
|
|
"text-allow-overlap": false,
|
|
"icon-size": 1.3,
|
|
"icon-image": ["get", "icon"],
|
|
"text-variable-anchor": ["bottom", "right"],
|
|
"text-radial-offset": 0.7,
|
|
"text-field": ["get", "shorttitle"],
|
|
"visibility": "none",
|
|
"text-size": {
|
|
stops: [
|
|
[0, 0],
|
|
[12, 0],
|
|
[12.99999999, 0],
|
|
[13.0000001, 10],
|
|
[15, 12],
|
|
[20, 15],
|
|
],
|
|
},
|
|
},
|
|
paint: {
|
|
"text-color": "#202",
|
|
"text-halo-color": "#ff5855",
|
|
"text-halo-blur": 1,
|
|
"text-halo-width": 2,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "markers",
|
|
type: "symbol",
|
|
source: "plugo",
|
|
filter: ['!=', 'count', 0],
|
|
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,
|
|
},
|
|
});
|
|
|
|
|
|
|
|
// When the checkbox changes, update the visibility of the layer.
|
|
M = document.getElementById('markers-zero')
|
|
M.addEventListener('change', (e) => {
|
|
map.setLayoutProperty(
|
|
'markers-zero',
|
|
'visibility',
|
|
e.target.checked ? 'visible' : 'none'
|
|
);
|
|
})
|
|
|
|
function onclick(e) {
|
|
// Copy coordinates array.
|
|
console.log(e.features)
|
|
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.on("click", "markers-zero", onclick);
|
|
map.addControl(new mapboxgl.FullscreenControl());
|
|
map.addControl(
|
|
new mapboxgl.GeolocateControl({
|
|
positionOptions: {
|
|
enableHighAccuracy: true,
|
|
},
|
|
// When active the map will receive updates to the device's location as it changes.
|
|
trackUserLocation: true,
|
|
// Draw an arrow next to the location dot to indicate which direction the device is heading.
|
|
showUserHeading: true,
|
|
})
|
|
);
|
|
}); |