add a map

Closes #1
This commit is contained in:
Nemo 2022-04-23 14:52:31 +05:30
parent 27e30d139f
commit d3972d4244
12 changed files with 333 additions and 21 deletions

View File

@ -5,4 +5,6 @@ description: >
theme: minima
baseurl: /plugo/
url: https://captnemo.in
timezone: Asia/Kolkata
timezone: Asia/Kolkata
# mapboxtoken: pk.eyJ1IjoiY2FwdG4zbTAiLCJhIjoiY2wyYmdvNmcxMGYyMDNic2MyY3Rvd28yNiJ9.4IiMK807T05VEE2loTN1Jg
mapboxtoken: pk.eyJ1IjoiY2FwdG4zbTAiLCJhIjoiY2pmanVvdWNkMHNmOTJ3bzNnYXIwcnpwZSJ9.C1N7hcYotH63uQjx5sk7Xg

92
_data/business.yml Normal file
View File

@ -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

1
_includes/address.html Normal file
View File

@ -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}}

View File

@ -5,4 +5,6 @@
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
<link rel="alternate" type="application/rss+xml" title="RSS Feed for Plugo Powerbanks" href="{{ site.url }}{{site.baseurl}}/feed.xml" >
{%- seo -%}
<link rel="icon" href="{{ "/assets/favicon.png" | relative_url }}">
<link rel="geojson" href="{{ "/map.geojson" | relative_url }}">
</head>

16
_includes/icon.html Normal file
View File

@ -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%}

View File

@ -1,13 +1,7 @@
{% assign city_lower_case = include.data.city|downcase %}
{{include.data.name}}<br>
{% 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 %}
<br>
{% assign w=include.data.website|strip %}
{% if w!="" %}<br><a href="{% if w contains 'http' %}{%else%}http://{%endif%}{{w}}" title="Website for {{include.data.name|strip}}">🔗</a>{%endif%}

View File

@ -1,6 +1,10 @@
---
layout: default
---
<details open>
<summary>Show Map</summary>
<div width="740px" height="300px" id="map"></div>
</details>
{{content}}
@ -46,6 +50,7 @@ layout: default
<li>{{zeroPowerBankLocations}} locations with zero powerbanks</li>
<li>Last Updated: {{site.time | date: "%Y-%m-%d %H:%M" }} IST</li>
<li>This page is automatically updated 5 times a day, at roughly 0930, 1230, 1530, 1830, 2130 IST</li>
<li>The map is also available in <a href="map.geojson">GeoJSON Format</a>. You can also view the underlying data directly at <a href="http://geojson.io/#data=data:text/x-url,https://captnemo.in/plugo/map.geojson">geojson.io</a>.
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
@ -58,4 +63,7 @@ layout: default
});
</script>
<link rel="stylesheet" type="text/css" href="/plugo/assets/style.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" integrity="sha256-eQmEh0JSFrPkGN9Lge0CpB3ZMAiwuSBq9tQKMURq0do=" crossorigin="anonymous">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js" integrity="sha256-s0WzvUEKt3AVyIJQ7kE4w+yqDoZxIiMiW+dImDRo5/E=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/plugo/assets/style.css">
<script src="/plugo/map.js"></script>

BIN
assets/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

View File

@ -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;
}
}
}
#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;
}

34
map.geojson Normal file
View File

@ -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 %}
]
}

86
map.js Normal file
View File

@ -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}<br>${P.count} powerbanks available<br>Location Type: ${P.type}`)
.addTo(map);
}
map.on('click', 'markers', onclick);
});
map.addControl(new mapboxgl.FullscreenControl());

7
marker.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="24" width="24" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g transform="translate(0 -1028.4)">
<path d="m12 0c-4.4183 2.3685e-15 -8 3.5817-8 8 0 1.421 0.3816 2.75 1.0312 3.906 0.1079 0.192 0.221 0.381 0.3438 0.563l6.625 11.531 6.625-11.531c0.102-0.151 0.19-0.311 0.281-0.469l0.063-0.094c0.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z" transform="translate(0 1028.4)" fill="#e74c3c"/>
<path d="m12 3c-2.7614 0-5 2.2386-5 5 0 2.761 2.2386 5 5 5 2.761 0 5-2.239 5-5 0-2.7614-2.239-5-5-5zm0 2c1.657 0 3 1.3431 3 3s-1.343 3-3 3-3-1.3431-3-3 1.343-3 3-3z" transform="translate(0 1028.4)" fill="#c0392b"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 934 B