From d3972d4244d7a98be4e11291dcb4dd57f38373da Mon Sep 17 00:00:00 2001 From: Nemo Date: Sat, 23 Apr 2022 14:52:31 +0530 Subject: [PATCH] add a map Closes #1 --- _config.yml | 4 +- _data/business.yml | 92 +++++++++++++++++++++++++++++++++++++++ _includes/address.html | 1 + _includes/head.html | 2 + _includes/icon.html | 16 +++++++ _includes/location.html | 8 +--- _layouts/home.html | 10 ++++- assets/favicon.png | Bin 0 -> 7853 bytes assets/style.css | 94 +++++++++++++++++++++++++++++++++++----- map.geojson | 34 +++++++++++++++ map.js | 86 ++++++++++++++++++++++++++++++++++++ marker.svg | 7 +++ 12 files changed, 333 insertions(+), 21 deletions(-) create mode 100644 _data/business.yml create mode 100644 _includes/address.html create mode 100644 _includes/icon.html create mode 100644 assets/favicon.png create mode 100644 map.geojson create mode 100644 map.js create mode 100644 marker.svg diff --git a/_config.yml b/_config.yml index 1152e55..441dd9e 100644 --- a/_config.yml +++ b/_config.yml @@ -5,4 +5,6 @@ description: > theme: minima baseurl: /plugo/ url: https://captnemo.in -timezone: Asia/Kolkata \ No newline at end of file +timezone: Asia/Kolkata +# mapboxtoken: pk.eyJ1IjoiY2FwdG4zbTAiLCJhIjoiY2wyYmdvNmcxMGYyMDNic2MyY3Rvd28yNiJ9.4IiMK807T05VEE2loTN1Jg +mapboxtoken: pk.eyJ1IjoiY2FwdG4zbTAiLCJhIjoiY2pmanVvdWNkMHNmOTJ3bzNnYXIwcnpwZSJ9.C1N7hcYotH63uQjx5sk7Xg \ No newline at end of file diff --git a/_data/business.yml b/_data/business.yml new file mode 100644 index 0000000..479d7c9 --- /dev/null +++ b/_data/business.yml @@ -0,0 +1,92 @@ +--- +' pg': lodging +aero: airport +amusement: amusement-park +apartment: lodging +backpacker: lodging +bakery: bakery +bar: bar +brew: beer +business: suitcase +cafe: cafe +casino: star +cell phone: shop +clinic: hospital +club: music +co-working space: suitcase +co-working: suitcase +cocktail: bar +cofee: cafe +coffee: cafe +college: college +company: suitcase +convention: information +corporate: suitcase +coworking space: suitcase +cultural: theatre +dealer: shop +delivery: triangle +dhaba: fast-food +diabetologist: hospital +fast food: fast-food +fertility: hospital +food: restaurant +footwear: shop +furniture: shop +games: amusement-park +gaming: amusement-park +gents pg: lodging +geocery: grocery +grocery: grocery +grocery: grocery +gym: bicycle-share +home stay: lodging +hookah: marker +hospital: hospital +hostel: lodging +hotal: restaurant +hotel: restaurant +ice cream: ice-cream +institute: college +juice: cafe +kitchen: restaurant +lodging: lodging +logistics: triangle +lounge: restaurant +management: suitcase +materinity: hospital +maternity: hospital +medical: hospital +metro: rail-metro +music: music +office: suitcase +oyo: lodging +pharmaceutical: pharmacy +printing: shop +pub: bar +resort: lodging +restaraunt: restaurant +restaruant: restaurant +restaurant: restaurant +restaurant: restaurant +resturent: restaurant +retail: shop +sales: shop +school: school +shop: shop +shopping: shop +showroom: shop +sports: playground +start-up: suitcase +startup: suitcase +stay: lodging +store: shop +subway: entrance +super market: shop +supermarket: shop +sweets shop: shop +textile: clothing-store +toqri: suitcase +training centre: college +ware house: triangle +warehouse: triangle \ No newline at end of file diff --git a/_includes/address.html b/_includes/address.html new file mode 100644 index 0000000..48396f7 --- /dev/null +++ b/_includes/address.html @@ -0,0 +1 @@ +{% assign address = include.address %}{% for mapping in site.include.data.city %}{% assign old=mapping[0] %}{% assign new=mapping[1] %}{% assign address = address|replace:old,new %}{% endfor %}{{address | strip}} \ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html index 9965661..68301a1 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -5,4 +5,6 @@ {%- seo -%} + + \ No newline at end of file diff --git a/_includes/icon.html b/_includes/icon.html new file mode 100644 index 0000000..f5b5fcb --- /dev/null +++ b/_includes/icon.html @@ -0,0 +1,16 @@ +{% assign icon_found=false%} +{% assign location_name = include.data.name | downcase %} +{% assign location_type = include.data.business | downcase %} +{% for icon in site.data.business %} +{% assign match=icon[0] | downcase%} + {% if location_name contains match %} + {{icon[1]}}-15 + {%assign icon_found=true%} + {%break%} + {% elsif location_type contains match %} + {{icon[1]}}-15 + {%assign icon_found=true%} + {%break%} + {%endif%} +{%endfor%} +{%unless icon_found%}marker-15{%endunless%} \ No newline at end of file diff --git a/_includes/location.html b/_includes/location.html index 1b9ff5e..37cb42c 100644 --- a/_includes/location.html +++ b/_includes/location.html @@ -1,13 +1,7 @@ {% assign city_lower_case = include.data.city|downcase %} {{include.data.name}}
{% if include.data.floor!="NA"%}{{include.data.floor}}, {%endif %} -{% assign address = include.data.address %} -{% for mapping in site.include.data.city %} -{% assign old=mapping[0] %} -{% assign new=mapping[1] %} -{% assign address = address|replace:old,new %} -{% endfor %} - {{address}} + {% include address.html address=include.data.address %}
{% assign w=include.data.website|strip %} {% if w!="" %}
🔗{%endif%} diff --git a/_layouts/home.html b/_layouts/home.html index e7bbbcd..1797db4 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -1,6 +1,10 @@ --- layout: default --- +
+ Show Map +
+
{{content}} @@ -46,6 +50,7 @@ layout: default
  • {{zeroPowerBankLocations}} locations with zero powerbanks
  • Last Updated: {{site.time | date: "%Y-%m-%d %H:%M" }} IST
  • This page is automatically updated 5 times a day, at roughly 0930, 1230, 1530, 1830, 2130 IST
    • +
  • The map is also available in GeoJSON Format. You can also view the underlying data directly at geojson.io. @@ -58,4 +63,7 @@ layout: default }); - \ No newline at end of file + + + + \ No newline at end of file diff --git a/assets/favicon.png b/assets/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..1d6f6142ec20b98a2b25bf5bf978d4e0619032e7 GIT binary patch literal 7853 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 literal 0 HcmV?d00001 diff --git a/assets/style.css b/assets/style.css index 4202c8e..a9dcecb 100644 --- a/assets/style.css +++ b/assets/style.css @@ -94,7 +94,7 @@ table.dataTable tr.dt-hasChild td.dt-control:before { content: "-"; background-color: #d33333; } - + /* * Table styles */ @@ -159,7 +159,8 @@ table.dataTable tbody th, table.dataTable tbody td { padding: 8px 10px; } -table.dataTable.nowrap th, table.dataTable.nowrap td { +table.dataTable.nowrap th, +table.dataTable.nowrap td { white-space: nowrap; } table.dataTable.compact thead th, @@ -174,12 +175,12 @@ table.dataTable.compact tbody th, table.dataTable.compact tbody td { padding: 4px; } - + table.dataTable th, table.dataTable td { box-sizing: content-box; } - + /* * Control feature layout */ @@ -250,12 +251,68 @@ table.dataTable td { *margin-top: -1px; -webkit-overflow-scrolling: touch; } -.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td { +.dataTables_wrapper + .dataTables_scroll + div.dataTables_scrollBody + > table + > thead + > tr + > th, +.dataTables_wrapper + .dataTables_scroll + div.dataTables_scrollBody + > table + > thead + > tr + > td, +.dataTables_wrapper + .dataTables_scroll + div.dataTables_scrollBody + > table + > tbody + > tr + > th, +.dataTables_wrapper + .dataTables_scroll + div.dataTables_scrollBody + > table + > tbody + > tr + > td { vertical-align: middle; } -.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing, -.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing, -.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing { +.dataTables_wrapper + .dataTables_scroll + div.dataTables_scrollBody + > table + > thead + > tr + > th + > div.dataTables_sizing, +.dataTables_wrapper + .dataTables_scroll + div.dataTables_scrollBody + > table + > thead + > tr + > td + > div.dataTables_sizing, +.dataTables_wrapper + .dataTables_scroll + div.dataTables_scrollBody + > table + > tbody + > tr + > th + > div.dataTables_sizing, +.dataTables_wrapper + .dataTables_scroll + div.dataTables_scrollBody + > table + > tbody + > tr + > td + > div.dataTables_sizing { height: 0; overflow: hidden; margin: 0 !important; @@ -275,10 +332,10 @@ table.dataTable td { clear: both; height: 0; } - + @media screen and (max-width: 767px) { .dataTables_wrapper .dataTables_info, -.dataTables_wrapper .dataTables_paginate { + .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; } @@ -288,11 +345,24 @@ table.dataTable td { } @media screen and (max-width: 640px) { .dataTables_wrapper .dataTables_length, -.dataTables_wrapper .dataTables_filter { + .dataTables_wrapper .dataTables_filter { float: none; text-align: center; } .dataTables_wrapper .dataTables_filter { margin-top: 0.5em; } -} \ No newline at end of file +} +#map { + top: 0; + bottom: 0; + width: 740px; + height: 400px; +} +.mapboxgl-canvas-container { + height: 100vh; +} +.mapboxgl-popup { + max-width: 400px; + font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif; +} diff --git a/map.geojson b/map.geojson new file mode 100644 index 0000000..e54efc4 --- /dev/null +++ b/map.geojson @@ -0,0 +1,34 @@ +--- +--- +{ + "type": "FeatureCollection", + "features": [{% for location in site.data.plugo %} + {% if location.totalAvailablePowerbanks > 0 %} + { + "type": "Feature", + "properties": { + "shorttitle": {{location.name | truncate:20| jsonify}}, + "title": {{location.name|jsonify}},{% assign w=location.website|strip %}{% if w!="" %} + "url": "{% if w contains 'http' %}{%else%}http://{%endif%}{{w}}",{%endif%} + "geourl": "geo:{{location.lat}},{{location.lng}}", + {%capture ADDRESS %}{% include address.html address=location.address%}{%endcapture%} + "address": {{ADDRESS |jsonify}}, + "count": {{location.totalAvailablePowerbanks}}, + {% if location.mobile %}{%unless location.mobile contains '8047112182' %} + "tel": "tel:{{location.mobile| strip}}", + {%endunless%}{%endif%} + {%capture html%}{% include location.html data=location %}{%endcapture%} + "description": {{html|strip|jsonify}}, + "type": {{location.business|jsonify}}, + {%capture icon %}{%include icon.html data=location%}{%endcapture%} + "icon": "{{icon| strip}}", + "id": "{{location.id}}" + }, + "geometry": { + "type": "Point", + "coordinates": [{{location.lng}},{{location.lat}}] + } + }{% endif %} + {% if forloop.rindex > 1 %}{%if location.totalAvailablePowerbanks>0 %},{%endif%}{% endif%}{% endfor %} + ] +} \ No newline at end of file diff --git a/map.js b/map.js new file mode 100644 index 0000000..b48de1f --- /dev/null +++ b/map.js @@ -0,0 +1,86 @@ +--- +--- +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}
    ${P.count} powerbanks available
    Location Type: ${P.type}`) + .addTo(map); + } + + map.on('click', 'markers', onclick); +}); +map.addControl(new mapboxgl.FullscreenControl()); diff --git a/marker.svg b/marker.svg new file mode 100644 index 0000000..57a288b --- /dev/null +++ b/marker.svg @@ -0,0 +1,7 @@ + + + + + + +