diff --git a/_data/business.yml b/_data/business.yml
index 479d7c9..1c2926b 100644
--- a/_data/business.yml
+++ b/_data/business.yml
@@ -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
\ No newline at end of file
+ware house: marker
+warehouse: marker
\ No newline at end of file
diff --git a/_layouts/home.html b/_layouts/home.html
index 1797db4..3e1ce59 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -3,7 +3,13 @@ layout: default
---
Show Map
-
+
+
+
+
{{content}}
diff --git a/assets/style.css b/assets/style.css
index 7ac3fdb..6f37789 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -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;
}
diff --git a/map.geojson b/map.geojson
index e54efc4..635f06f 100644
--- a/map.geojson
+++ b/map.geojson
@@ -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 %}
]
}
\ No newline at end of file
diff --git a/map.js b/map.js
index 059d176..2934eb7 100644
--- a/map.js
+++ b/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}
${P.count} powerbanks available
Location Type: ${P.type}`)
- .addTo(map);
+ .setLngLat(coordinates)
+ .setHTML(
+ `${P.description}
${P.count} powerbanks available
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,
+ })
+ );
+});
\ No newline at end of file