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
|
coworking space: suitcase
|
||||||
cultural: theatre
|
cultural: theatre
|
||||||
dealer: shop
|
dealer: shop
|
||||||
delivery: triangle
|
delivery: marker
|
||||||
dhaba: fast-food
|
dhaba: fast-food
|
||||||
diabetologist: hospital
|
diabetologist: hospital
|
||||||
fast food: fast-food
|
fast food: fast-food
|
||||||
|
@ -51,7 +51,7 @@ institute: college
|
||||||
juice: cafe
|
juice: cafe
|
||||||
kitchen: restaurant
|
kitchen: restaurant
|
||||||
lodging: lodging
|
lodging: lodging
|
||||||
logistics: triangle
|
logistics: marker
|
||||||
lounge: restaurant
|
lounge: restaurant
|
||||||
management: suitcase
|
management: suitcase
|
||||||
materinity: hospital
|
materinity: hospital
|
||||||
|
@ -88,5 +88,5 @@ sweets shop: shop
|
||||||
textile: clothing-store
|
textile: clothing-store
|
||||||
toqri: suitcase
|
toqri: suitcase
|
||||||
training centre: college
|
training centre: college
|
||||||
ware house: triangle
|
ware house: marker
|
||||||
warehouse: triangle
|
warehouse: marker
|
|
@ -3,7 +3,13 @@ layout: default
|
||||||
---
|
---
|
||||||
<details open>
|
<details open>
|
||||||
<summary>Show Map</summary>
|
<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>
|
</details>
|
||||||
|
|
||||||
{{content}}
|
{{content}}
|
||||||
|
|
|
@ -364,5 +364,49 @@ table.dataTable td {
|
||||||
}
|
}
|
||||||
.mapboxgl-popup {
|
.mapboxgl-popup {
|
||||||
max-width: 400px;
|
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",
|
"type": "FeatureCollection",
|
||||||
"features": [{% for location in site.data.plugo %}
|
"features": [{% for location in site.data.plugo %}
|
||||||
{% if location.totalAvailablePowerbanks > 0 %}
|
|
||||||
{
|
{
|
||||||
"type": "Feature",
|
"type": "Feature",
|
||||||
"properties": {
|
"properties": {
|
||||||
|
@ -28,7 +27,6 @@
|
||||||
"type": "Point",
|
"type": "Point",
|
||||||
"coordinates": [{{location.lng}},{{location.lat}}]
|
"coordinates": [{{location.lng}},{{location.lat}}]
|
||||||
}
|
}
|
||||||
}{% endif %}
|
}{% if forloop.rindex > 1 %},{%endif%}{% endfor %}
|
||||||
{% if forloop.rindex > 1 %}{%if location.totalAvailablePowerbanks>0 %},{%endif%}{% endif%}{% endfor %}
|
|
||||||
]
|
]
|
||||||
}
|
}
|
97
map.js
97
map.js
|
@ -1,6 +1,9 @@
|
||||||
---
|
---
|
||||||
---
|
---
|
||||||
mapboxgl.accessToken = "{{site.mapboxtoken}}";
|
mapboxgl.accessToken = "{{site.mapboxtoken}}";
|
||||||
|
|
||||||
|
const filterGroup = document.getElementById('filter-group');
|
||||||
|
|
||||||
const map = new mapboxgl.Map({
|
const map = new mapboxgl.Map({
|
||||||
container: "map",
|
container: "map",
|
||||||
style: "mapbox://styles/mapbox/light-v10",
|
style: "mapbox://styles/mapbox/light-v10",
|
||||||
|
@ -18,11 +21,45 @@ map.on("load", (e) => {
|
||||||
data: "/plugo/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({
|
map.addLayer({
|
||||||
id: "markers",
|
id: "markers",
|
||||||
type: "symbol",
|
type: "symbol",
|
||||||
source: "plugo",
|
source: "plugo",
|
||||||
|
filter: ['!=', 'count', 0],
|
||||||
layout: {
|
layout: {
|
||||||
"icon-allow-overlap": true,
|
"icon-allow-overlap": true,
|
||||||
"icon-ignore-placement": true,
|
"icon-ignore-placement": true,
|
||||||
|
@ -32,38 +69,44 @@ map.on("load", (e) => {
|
||||||
"text-variable-anchor": ["bottom", "right"],
|
"text-variable-anchor": ["bottom", "right"],
|
||||||
"text-radial-offset": 0.7,
|
"text-radial-offset": 0.7,
|
||||||
"text-field": ["get", "shorttitle"],
|
"text-field": ["get", "shorttitle"],
|
||||||
"text-size": {"stops": [
|
"text-size": {
|
||||||
|
stops: [
|
||||||
[0, 0],
|
[0, 0],
|
||||||
[12, 0],
|
[12, 0],
|
||||||
[12.99999999, 0],
|
[12.99999999, 0],
|
||||||
[13.0000001, 10],
|
[13.0000001, 10],
|
||||||
[15, 12],
|
[15, 12],
|
||||||
[20, 15]
|
[20, 15],
|
||||||
]},
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
paint:{
|
paint: {
|
||||||
"icon-color": "#00ff00",
|
"icon-color": "#00ff00",
|
||||||
"text-color": "#202",
|
"text-color": "#202",
|
||||||
"text-halo-color": "#ebff32",
|
"text-halo-color": "#ebff32",
|
||||||
"text-halo-blur": 1,
|
"text-halo-blur": 1,
|
||||||
"text-halo-width": 2
|
"text-halo-width": 2,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
map.on("mouseenter", "markers", () => {
|
|
||||||
map.getCanvas().style.cursor = "pointer";
|
|
||||||
});
|
// When the checkbox changes, update the visibility of the layer.
|
||||||
|
M = document.getElementById('markers-zero')
|
||||||
// Change it back to a pointer when it leaves.
|
M.addEventListener('change', (e) => {
|
||||||
map.on("mouseleave", "markers", () => {
|
map.setLayoutProperty(
|
||||||
map.getCanvas().style.cursor = "";
|
'markers-zero',
|
||||||
});
|
'visibility',
|
||||||
|
e.target.checked ? 'visible' : 'none'
|
||||||
|
);
|
||||||
|
})
|
||||||
|
|
||||||
function onclick(e) {
|
function onclick(e) {
|
||||||
// Copy coordinates array.
|
// Copy coordinates array.
|
||||||
|
console.log(e.features)
|
||||||
const coordinates = e.features[0].geometry.coordinates.slice();
|
const coordinates = e.features[0].geometry.coordinates.slice();
|
||||||
const P = e.features[0].properties;
|
const P = e.features[0].properties;
|
||||||
|
|
||||||
// Ensure that if the map is zoomed out such that multiple
|
// Ensure that if the map is zoomed out such that multiple
|
||||||
// copies of the feature are visible, the popup appears
|
// copies of the feature are visible, the popup appears
|
||||||
// over the copy being pointed to.
|
// over the copy being pointed to.
|
||||||
|
@ -72,11 +115,25 @@ map.on("load", (e) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
new mapboxgl.Popup()
|
new mapboxgl.Popup()
|
||||||
.setLngLat(coordinates)
|
.setLngLat(coordinates)
|
||||||
.setHTML(`${P.description}<br>${P.count} powerbanks available<br>Location Type: ${P.type}`)
|
.setHTML(
|
||||||
.addTo(map);
|
`${P.description}<br>${P.count} powerbanks available<br>Location Type: ${P.type}`
|
||||||
|
)
|
||||||
|
.addTo(map);
|
||||||
}
|
}
|
||||||
|
|
||||||
map.on('click', 'markers', onclick);
|
map.on("click", "markers", onclick);
|
||||||
});
|
map.on("click", "markers-zero", onclick);
|
||||||
map.addControl(new mapboxgl.FullscreenControl());
|
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