mirror of https://github.com/captn3m0/plugo.git
Add a Zero Powerbanks filter
This commit is contained in:
parent
e77d0344cd
commit
15d54818bb
|
|
@ -25,7 +25,7 @@ corporate: suitcase
|
|||
coworking space: suitcase
|
||||
cultural: theatre
|
||||
dealer: shop
|
||||
delivery: triangle
|
||||
delivery: marker
|
||||
dhaba: fast-food
|
||||
diabetologist: hospital
|
||||
fast food: fast-food
|
||||
|
|
@ -51,7 +51,7 @@ institute: college
|
|||
juice: cafe
|
||||
kitchen: restaurant
|
||||
lodging: lodging
|
||||
logistics: triangle
|
||||
logistics: marker
|
||||
lounge: restaurant
|
||||
management: suitcase
|
||||
materinity: hospital
|
||||
|
|
@ -88,5 +88,5 @@ sweets shop: shop
|
|||
textile: clothing-store
|
||||
toqri: suitcase
|
||||
training centre: college
|
||||
ware house: triangle
|
||||
warehouse: triangle
|
||||
ware house: marker
|
||||
warehouse: marker
|
||||
|
|
@ -3,7 +3,13 @@ layout: default
|
|||
---
|
||||
<details open>
|
||||
<summary>Show Map</summary>
|
||||
<div width="740px" height="300px" id="map"></div>
|
||||
<div width="740px" height="300px" id="map">
|
||||
<nav id="filter-group" class="filter-group">
|
||||
<input id="markers-zero" type="checkbox">
|
||||
<label for="markers-zero"><span></span>Zero Powerbanks</label>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</details>
|
||||
|
||||
{{content}}
|
||||
|
|
|
|||
|
|
@ -364,5 +364,49 @@ table.dataTable td {
|
|||
}
|
||||
.mapboxgl-popup {
|
||||
max-width: 400px;
|
||||
font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font: 12px/20px;
|
||||
}
|
||||
|
||||
/**
|
||||
* https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/
|
||||
*/
|
||||
.filter-group {
|
||||
font: 10px;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
z-index: 1;
|
||||
border-radius: 3px;
|
||||
width: 200px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.filter-group input[type="checkbox"]:first-child + label {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.filter-group label:last-child {
|
||||
border-radius: 0 0 3px 3px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.filter-group input[type="checkbox"] + label {
|
||||
background-color: #3386c0;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.filter-group input[type="checkbox"] + label {
|
||||
background-color: #3386c0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.filter-group input[type="checkbox"] + label:hover,
|
||||
.filter-group input[type="checkbox"]:checked + label {
|
||||
background-color: #4ea0da;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [{% for location in site.data.plugo %}
|
||||
{% if location.totalAvailablePowerbanks > 0 %}
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
|
|
@ -28,7 +27,6 @@
|
|||
"type": "Point",
|
||||
"coordinates": [{{location.lng}},{{location.lat}}]
|
||||
}
|
||||
}{% endif %}
|
||||
{% if forloop.rindex > 1 %}{%if location.totalAvailablePowerbanks>0 %},{%endif%}{% endif%}{% endfor %}
|
||||
}{% if forloop.rindex > 1 %},{%endif%}{% endfor %}
|
||||
]
|
||||
}
|
||||
97
map.js
97
map.js
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
---
|
||||
mapboxgl.accessToken = "{{site.mapboxtoken}}";
|
||||
|
||||
const filterGroup = document.getElementById('filter-group');
|
||||
|
||||
const map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
style: "mapbox://styles/mapbox/light-v10",
|
||||
|
|
@ -18,11 +21,45 @@ map.on("load", (e) => {
|
|||
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,
|
||||
|
|
@ -32,38 +69,44 @@ map.on("load", (e) => {
|
|||
"text-variable-anchor": ["bottom", "right"],
|
||||
"text-radial-offset": 0.7,
|
||||
"text-field": ["get", "shorttitle"],
|
||||
"text-size": {"stops": [
|
||||
"text-size": {
|
||||
stops: [
|
||||
[0, 0],
|
||||
[12, 0],
|
||||
[12.99999999, 0],
|
||||
[13.0000001, 10],
|
||||
[15, 12],
|
||||
[20, 15]
|
||||
]},
|
||||
[20, 15],
|
||||
],
|
||||
},
|
||||
},
|
||||
paint:{
|
||||
paint: {
|
||||
"icon-color": "#00ff00",
|
||||
"text-color": "#202",
|
||||
"text-halo-color": "#ebff32",
|
||||
"text-halo-blur": 1,
|
||||
"text-halo-width": 2
|
||||
"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 = "";
|
||||
});
|
||||
|
||||
|
||||
// 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.
|
||||
|
|
@ -72,11 +115,25 @@ map.on("load", (e) => {
|
|||
}
|
||||
|
||||
new mapboxgl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML(`${P.description}<br>${P.count} powerbanks available<br>Location Type: ${P.type}`)
|
||||
.addTo(map);
|
||||
.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());
|
||||
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,
|
||||
})
|
||||
);
|
||||
});
|
||||
Loading…
Reference in New Issue