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 0000000..1d6f614 Binary files /dev/null and b/assets/favicon.png differ 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 @@ + + + + + + +