From 8f47bd69961335cb0b84ebf290a75350afb74302 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 17 Oct 2024 23:57:47 +0200
Subject: [PATCH] red dots

---
 README.md                    |   9 ++
 img/socket_type2.svg         |   3 +
 img/socket_typee.svg         |  55 +++++++
 index.html                   |  98 ++++++------
 js/main.js                   |  81 +++-------
 js/main_2.js                 | 287 +++++++++++++++++++++++++++++++++++
 styles/images/map-marker.png | Bin 0 -> 11982 bytes
 styles/style.css             | 263 ++++++++++++++++++--------------
 8 files changed, 574 insertions(+), 222 deletions(-)
 create mode 100644 img/socket_type2.svg
 create mode 100644 img/socket_typee.svg
 create mode 100644 js/main_2.js
 create mode 100644 styles/images/map-marker.png

diff --git a/README.md b/README.md
index 03f02fa..2c1311b 100644
--- a/README.md
+++ b/README.md
@@ -20,5 +20,14 @@ Vous pouvez modifier les paramètres en entête de fichier pour choisir les tuil
 # licence
 Gnu Affero 3+
 
+# requete overpass
+
+```javascript
+// requête sur la ville de rouen
+let req =  'https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];' +
+ 'area(id:3600075628)->.searchArea;' +
+ 'node[amenity=charging_station](area.searchArea);' +
+ 'out body geom;'
+```
 # sources
 https://forge.chapril.org/tykayn/melting-pot
diff --git a/img/socket_type2.svg b/img/socket_type2.svg
new file mode 100644
index 0000000..cdf2eb9
--- /dev/null
+++ b/img/socket_type2.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="100mm" height="88.855431mm" viewBox="0 0 100 88.855431" version="1.1" id="svg5" inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)" sodipodi:docname="type2.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><script xmlns=""/></svg>
\ No newline at end of file
diff --git a/img/socket_typee.svg b/img/socket_typee.svg
new file mode 100644
index 0000000..6ccf7bf
--- /dev/null
+++ b/img/socket_typee.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="752pt"
+   height="752pt"
+   version="1.1"
+   viewBox="0 0 752 752"
+   id="svg12"
+   sodipodi:docname="socket_typee.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   inkscape:export-filename="socket_typee.png"
+   inkscape:export-xdpi="13.077973"
+   inkscape:export-ydpi="13.077973"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     id="namedview14"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="pt"
+     showgrid="false"
+     inkscape:zoom="0.23537234"
+     inkscape:cx="499.20904"
+     inkscape:cy="501.33333"
+     inkscape:window-width="1920"
+     inkscape:window-height="1052"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <g
+     id="g10"
+     transform="matrix(2.1565516,0,0,2.1565516,-432.25172,-434.64797)">
+    <path
+       d="m 447.08,403.52 c -15.172,0 -27.52,-12.34 -27.52,-27.52 0,-15.18 12.34,-27.52 27.52,-27.52 15.18,0 27.52,12.34 27.52,27.52 0,15.18 -12.348,27.52 -27.52,27.52 z m 0,-45.566 c -9.9531,0 -18.047,8.0938 -18.047,18.047 0,9.9532 8.0938,18.047 18.047,18.047 9.9532,0 18.047,-8.0938 18.047,-18.047 -0.004,-9.9492 -8.0977,-18.047 -18.047,-18.047 z"
+       id="path2" />
+    <path
+       d="m 304.93,403.52 c -15.172,0 -27.516,-12.34 -27.516,-27.52 0,-15.18 12.34,-27.52 27.516,-27.52 15.172,0 27.516,12.34 27.516,27.52 0,15.18 -12.348,27.52 -27.516,27.52 z m 0,-45.566 c -9.9492,0 -18.043,8.0938 -18.043,18.047 0,9.9532 8.0938,18.047 18.043,18.047 9.9492,0 18.043,-8.0938 18.043,-18.047 0,-9.9492 -8.0938,-18.047 -18.043,-18.047 z"
+       id="path4" />
+    <path
+       d="m 398.79,303.84 c 0,12.582 -10.199,22.781 -22.781,22.781 -12.586,0 -22.785,-10.199 -22.785,-22.781 0,-12.586 10.199,-22.785 22.785,-22.785 12.582,0 22.781,10.199 22.781,22.785"
+       id="path6" />
+    <path
+       d="m 376,539.39 c -90.09,0 -163.38,-73.297 -163.38,-163.39 0,-90.093 73.293,-163.38 163.38,-163.38 90.087,0 163.39,73.293 163.39,163.38 0,90.087 -73.297,163.39 -163.39,163.39 z m 0,-307.83 c -79.645,0 -144.44,64.797 -144.44,144.44 0,79.643 64.797,144.45 144.44,144.45 79.643,0 144.45,-64.801 144.45,-144.45 0,-79.649 -64.801,-144.44 -144.45,-144.44 z"
+       id="path8" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 07f64ec..7b0ecb7 100644
--- a/index.html
+++ b/index.html
@@ -1,42 +1,39 @@
 <!DOCTYPE html>
-<html lang='fr' >
-<head >
-    <title >MeltingPot - Où manger et boire ? - OSM Bliss</title >
-    <meta charset='utf-8' >
+<html lang='fr'>
+<head>
+    <title>LibreChargeMap - OSM Bliss</title>
+    <meta charset='utf-8'>
     <meta
             name='viewport'
-            content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' >
+            content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
     <link
             rel='stylesheet'
-            href='styles/leaflet.css' />
+            href='styles/leaflet.css'/>
     <link
             rel='stylesheet'
-            href='styles/style.css' />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0">
+            href='styles/style.css'/>
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0">
     <link rel="shortcut icon" href="img/french.png">
-</head >
+</head>
 <body>
 
 
-<div id='map' >
+<div id='map'>
 
-    <div class='leaflet-control-container' >
-        <div class='leaflet-top leaflet-right' >
+    <div class='leaflet-control-container'>
+        <div class='leaflet-top leaflet-right'>
             <div
                     id='overpass-api-controls'
-                    class='leaflet-bar leaflet-control' >
-                <!--				<input-->
-                <!--						id='query-textfield'-->
-                <!--						value='amenity=restaurant'-->
-                <!--						size='50' >-->
+                    class='leaflet-bar leaflet-control'>
                 <input
                         id='query-button'
                         type='button'
-                        value='🍽️ Chercher' >
-            </div >
+                        value='🍽️ Chercher'>
+            </div>
 
             <div class="research_display">
-                <div id='spinning_icon' >
+                <div id='spinning_icon'>
                     <div class='message-loading'>
                         chargement en cours...
                     </div>
@@ -46,48 +43,51 @@
                             height='4cm'
                             viewBox='0 0 700 400'
                             xmlns='http://www.w3.org/2000/svg'
-                            version='1.1' >
+                            version='1.1'>
                         <polygon
                                 fill='red'
                                 stroke='red'
                                 stroke-width='10'
                                 points='350,75  379,161 469,161 397,215
 									423,301 350,250 277,301 303,215
-									231,161 321,161' />
+									231,161 321,161'/>
 
-                    </svg >
-                </div >
+                    </svg>
+                </div>
             </div>
-        </div >
-    </div >
+        </div>
+    </div>
 
-</div >
-
-<p>
-    Carte des IRVE de Rouen
-</p>
-<div id="filter">
-    filtres: <br>
-    prise: type 2, type CCS
-    cable: attaché, à fournir
-    puissance: min 50kW, 100kW, 300kW, 400kW
 </div>
-<h2 class="title">
-    À propos de ce plan</h2 >
-<p >
-    La carte thématique proposant des points de charge pour véhicule électrique, basée sur les données
-    d'OpenStreetMap.
-</p >
-<br>
-Fait par <a href="https://mastodon.cipherbliss.com/@tykayn" >Tykayn</a> - <a href="https://www.cipherbliss.com" >www.cipherbliss.com</a>.
-<a href="https://forge.chapril.org/tykayn/">Sources disponibles sur la forge du Chapril.</a>
 
-<script src='js/leaflet.js' ></script >
-<script src='js/jquery-3.2.1.min.js' ></script >
-<script src='js/osmtogeojson.js' ></script >
+<div class="bottom-content">
+
+    <p>
+        Carte des IRVE de Rouen
+    </p>
+    <div id="filter">
+        filtres: <br>
+        prise: type 2, type CCS
+        cable: attaché, à fournir
+        puissance: min 50kW, 100kW, 300kW, 400kW
+    </div>
+    <h2 class="title">
+        À propos de ce plan</h2>
+    <p>
+        La carte thématique proposant des points de charge pour véhicule électrique, basée sur les données
+        d'OpenStreetMap.
+    </p>
+    <br>
+    Fait par <a href="https://mastodon.cipherbliss.com/@tykayn">Tykayn</a> - <a href="https://www.cipherbliss.com">www.cipherbliss.com</a>.
+    <a href="https://forge.chapril.org/tykayn/">Sources disponibles sur la forge du Chapril.</a>
+
+</div>
+<script src='js/leaflet.js'></script>
+<script src='js/jquery-3.2.1.min.js'></script>
+<script src='js/osmtogeojson.js'></script>
 <script
         type='module'
-        src='js/main.js' ></script >
+        src='js/main.js'></script>
 
 <script>
 
diff --git a/js/main.js b/js/main.js
index af6bc35..0b4381f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -104,26 +104,38 @@ function displayPointsFromApi (points) {
 			console.log('layer', layer)
 			var label = L.marker(layer._latlng, {
 				icon: L.divIcon({
-					iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
-					className: 'label ' + makeCssClassFromTags(feature.properties.tags),
+					iconUrl: '/img/beer.jpg' ,
+						//+ getIconFromTags(feature.properties.tags),
+					// className: 'label ' + makeCssClassFromTags(feature.properties.tags),
 
 					iconSize: ['auto', 'auto'],
 				}),
 			}).addTo(map)
 
-			var myIcon = L.icon({
-				iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
-				iconSize: [iconSiZePx, iconSiZePx],
-				iconAnchor: [iconSiZePx / 2, iconSiZePx / 2],
-				popupAnchor: [iconSiZePx / 2, iconSiZePx / 2],
-				className: makeCssClassFromTags(feature.properties.tags),
+			let circle = L.circle(layer._latlng, {
+	color: '#c00',
+	fillColor: '#f00',
+	fillOpacity: 0.5,
+	radius: 10
+}).addTo(map)
 
-			})
 
-			let regular_marker = L.marker(layer._latlng, { title: rest_name, icon: myIcon }).addTo(map)
+			// var myIcon = L.icon({
+			// 	// iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
+			// 	iconSize: [iconSiZePx, iconSiZePx],
+			// 	iconAnchor: [iconSiZePx / 2, iconSiZePx / 2],
+			// 	popupAnchor: [iconSiZePx / 2, iconSiZePx / 2],
+			// 	className: makeCssClassFromTags(feature.properties.tags),
+			//
+			// })
 
-			regular_marker.bindPopup(html)
-			regular_marker.on({
+			// let regular_marker = L.marker(layer._latlng, {
+				// title: rest_name,
+				// icon: myIcon
+			// }).addTo(map)
+
+			circle.bindPopup(html)
+			circle.on({
 				mouseover: function () {
 					this.openPopup()
 				},
@@ -134,7 +146,6 @@ function displayPointsFromApi (points) {
 					this.openPopup()
 				},
 			})
-			// regular_marker.fire('mouseover');
 		},
 	})
 }
@@ -160,48 +171,6 @@ function getIconFromTags (tags) {
 	// let iconFileName = 'icon_restaurant.png';
 	if (tags['man_made']) {
 		iconFileName = 'fountain.png'
-	} else if (tags['shop']) {
-		iconFileName = 'croissant.png'
-	} else if (tags['amenity']) {
-		if (tags['amenity'] === 'restaurant') {
-			if (tags['cuisine'] === 'pizza') {
-				iconFileName = 'pizza.png'
-			}
-			if (tags['cuisine'] === 'italian') {
-				iconFileName = 'pizza.png'
-			}
-
-			if (tags['cuisine'] === 'japanese') {
-				iconFileName = 'asian_food.png'
-			}
-			if (tags['cuisine'] === 'crepe') {
-				iconFileName = 'crepe.png'
-			}
-			if (tags['cuisine'] === 'crepes') {
-				iconFileName = 'crepe.png'
-			}
-			if (tags['cuisine'] === 'sushi') {
-				iconFileName = 'asian_food.png'
-			}
-			if (tags['cuisine'] === 'asian') {
-				iconFileName = 'asian_food.png'
-			}
-			if (tags['cuisine'] === 'chinese') {
-				iconFileName = 'asian_food.png'
-			}
-
-		} else if (tags['amenity'] === 'vending_machine') {
-			iconFileName = 'vending_machine.png'
-		} else if (tags['amenity'] === 'drinking_water') {
-			iconFileName = 'fountain.png'
-		} else if (tags['amenity'] === 'pub') {
-			iconFileName = 'beer.png'
-		} else if (tags['amenity'] === 'fast_food') {
-			iconFileName = 'burger.png'
-			if (tags['cuisine'] === 'pizza') {
-				iconFileName = 'pizza.png'
-			}
-		}
 	}
 	return iconFileName
 }
@@ -230,8 +199,6 @@ function loadOverpassQuery () {
 	}
 }
 
-// console.log('loadQueryPoints', loadQueryPoints);
-// loadQueryPoints();
 $('#spinning_icon').hide()
 
 loadOverpassQuery()
diff --git a/js/main_2.js b/js/main_2.js
new file mode 100644
index 0000000..9b81a9a
--- /dev/null
+++ b/js/main_2.js
@@ -0,0 +1,287 @@
+//import * as geoDataPointsFromApi from './data.json';
+
+const overrideQuery = true
+const initialZoom = 14
+const maxZoom = 21
+const startCenterCoordinates = []
+const osmMention = '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+const baseUrl = 'https://overpass-api.de/api/interpreter'
+// serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
+// https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png
+// https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
+const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
+
+/**
+ * config des couches de fond de carte
+ */
+// var osm = L.tileLayer(
+// 	tileServer, {
+// 		maxZoom: maxZoom,
+// 		attribution: '© OpenStreetMap'
+// 	})
+//
+// var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+// 	maxZoom: maxZoom,
+// 	attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
+// })
+// var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+// 	maxZoom: 19,
+// 	attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)'
+// })
+
+// Créer la carte centrée sur Rouen
+// const map = L.map('map', {
+// 	center: startCenterCoordinates,
+// 	zoom: initialZoom,
+// 	layers: [
+// 		// osm,
+// 		osmHOT,
+// 		// openTopoMap
+// 	],
+// })
+const map = L.map('map').setView(startCenterCoordinates, initialZoom)
+
+// let circle = L.circle(startCenterCoordinates, {
+// 	color: 'green',
+// 	fillColor: '#f03',
+// 	fillOpacity: 0.5,
+// 	radius: 10
+// }).addTo(map)
+
+// var baseMaps = {
+	// 'OpenStreetMap': osm,
+	// 'OpenStreetMap.HOT': osmHOT
+// }
+
+// exemple de markers à grouper
+// var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
+// 	rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.')
+// var cities = L.layerGroup([crownHill])
+// var parks = L.layerGroup([crownHill, rubyHill])
+//
+// var overlayMaps = {
+// 	'Cities': cities
+// }
+//
+// var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map)
+// layerControl.addBaseLayer(openTopoMap, 'OpenTopoMap')
+
+// layerControl.addOverlay(parks, '+150kW')
+
+function initMap (callback) {
+	// Créer un groupe de couches pour les marqueurs de type 2
+	// var type2Markers = L.layerGroup()
+
+	// L.tileLayer(tileServer, {
+	// 	maxZoom,
+	// 	attribution: osmMention,
+	// }).addTo(map)
+
+// Ajouter les marqueurs de type 2 au groupe de couches
+// 	map.eachLayer(function (layer) {
+// 		if (layer.feature) {
+// 			if (layer.feature?.properties?.tags['socket:type2']) {
+// 				type2Markers.addLayer(layer)
+// 				console.log('includes', layer.feature.properties.tags['socket:type2'])
+// 			}
+//
+// 		}
+// 	})
+
+// Ajouter le groupe de couches aux couches de la carte
+// 	map.addLayer(type2Markers)
+
+// Ajouter un interrupteur pour afficher ou masquer les marqueurs de type 2
+// 	var type2Toggle = L.control({ position: 'topright' })
+// 	type2Toggle.onAdd = function (map) {
+// 		var div = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom')
+// 		div.innerHTML = '<input type="checkbox" id="type2-toggle" checked><label for="type2-toggle">Afficher Type 2</label>'
+// 		L.DomEvent.on(document, 'click', function () {
+// 			type2Markers.setVisible(document.getElementById('type2-toggle').checked)
+// 		})
+// 		return div
+// 	}
+// 	map.addControl(type2Toggle)
+}
+
+function buildOverpassApiUrl (map, overpassQuery) {
+
+	var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast()
+	var resultUrl, query = ''
+
+	if (overrideQuery) {
+		query = `?data=[out:json][timeout:15];(
+      node[amenity=charging_station](${bounds});
+      );out body geom;`
+	} else {
+		var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');'
+		var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');'
+		var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');'
+		query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;'
+
+	}
+
+	resultUrl = baseUrl + query
+	console.log('resultUrl', resultUrl)
+	return resultUrl
+}
+
+const tags_to_display_in_popup = ['capacity', 'socket:type_2',
+	'socket:type2:output',
+	'charging_station:output',
+	'socket:typee',
+	'socket:type2_combo',
+	'socket:chademo',
+	'operator',
+	'ref:EU:EVSE',
+	'network',
+	'contact',
+	'phone']
+
+function supprimerMarqueurs (map) {
+	map.eachLayer(function (layer) {
+		if (layer instanceof L.Marker) {
+			map.removeLayer(layer)
+		}
+	})
+}
+
+function displayPointsFromApi (points) {
+
+	// supprimerMarqueurs()
+
+	var resultAsGeojson = osmtogeojson(points)
+	console.log('resultAsGeojson', resultAsGeojson)
+	var resultLayer = L.geoJson(resultAsGeojson, {
+		style: function (feature) {
+			return { color: '#f00' }
+		},
+		// filter: function (feature, layer) {
+		// 	var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon')
+		// 	if (isPolygon) {
+		// 		feature.geometry.type = 'Point'
+		// 		var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter()
+		// 		feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]
+		// 	}
+		// 	return true
+		// },
+		// onzoomend: function (event) {
+		// 	console.log('event zoom end', event)
+		// },
+		onEachFeature: function (feature, layer) {
+			var popupContent = ''
+			console.log('feature.properties', feature.properties)
+			// var keys = Object.keys(feature.properties.tags)
+			// ne montrer que certains champs dans la popup
+			// tags_to_display_in_popup.forEach(function (key) {
+			// 	if (tags_to_display_in_popup.indexOf(key)) {
+			// 		let value = feature.properties.tags[key]
+			// 		if (value) {
+			// 			popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong> ' + value + ''
+			// 		}
+			// 	}
+			// })
+			// popupContent = popupContent + '</dl>'
+			// layer.bindPopup(popupContent)
+			//
+			// let iconSiZePx = 20
+			//
+			// let rest_name = ''
+			//
+			// let html = '<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=' + feature.properties.id + '">' +
+			// 	'✏️</a> <br/>' + popupContent
+
+			console.log('layer', layer)
+			// var label = L.marker(layer._latlng, {
+			// 	icon: L.divIcon({
+			// 		iconUrl: '/img/socket_type2svg',
+			// 		// + getIconFromTags(feature.properties.tags),
+			// 		className: 'label ' + makeCssClassFromTags(feature.properties.tags),
+			// 		// ,
+			// 		iconSize: ['auto', 'auto'],
+			// 	}),
+			// }).addTo(map)
+
+			// ajout de cercle coloré selon la puissance
+
+			// var myIcon = L.icon({
+			// 	iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
+			// 	iconSize: [iconSiZePx, iconSiZePx],
+			// 	iconAnchor: [iconSiZePx / 2, iconSiZePx / 2],
+			// 	popupAnchor: [iconSiZePx / 2, iconSiZePx / 2],
+			// 	className: makeCssClassFromTags(feature.properties.tags),
+			//
+			// })
+
+			// let regular_marker = L.marker(layer._latlng, { title: rest_name, icon: myIcon }).addTo(map)
+
+			// regular_marker.bindPopup(html)
+			// regular_marker.on({
+			// 	mouseover: function () {
+			// 		this.openPopup()
+			// 	},
+			// 	mouseout: function () {
+			// 		setTimeout(() => this.closePopup(), 3000)
+			// 	},
+			// 	click: function () {
+			// 		this.openPopup()
+			// 	},
+			// })
+		},
+	})
+}
+
+function makeCssClassFromTags (tags) {
+	console.log('tags', tags)
+	let tagKeys = Object.keys(tags)
+	console.log('tagKeys', tagKeys)
+	if (!tags) {
+		return ''
+	}
+	let listOfClasses = []
+
+	tagKeys.forEach((element) => {
+		listOfClasses.push('tag-' + element + '_' + tags[element].replace(':', '--').replace(' ', '-'))
+	})
+
+	return listOfClasses.join(' ')
+}
+
+function getIconFromTags (tags) {
+	let iconFileName = ''
+	// let iconFileName = 'icon_restaurant.png';
+	if (tags['socket:type_2'] == '150 kW') {
+		iconFileName = 'fountain.png'
+	}
+	return iconFileName
+}
+
+$('#query-button').click(function () {
+	loadOverpassQuery()
+})
+
+let isLoading = false
+
+function loadOverpassQuery () {
+
+	console.log('load data')
+	// ne pas charger si on recherche déjà
+	if (!isLoading) {
+		isLoading = true
+		$('#spinning_icon').fadeIn()
+		var queryTextfieldValue = $('#query-textfield').val()
+		console.log('queryTextfieldValue', queryTextfieldValue)
+		var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
+
+		$.get(overpassApiUrl, function (geoDataPointsFromApi) {
+
+			displayPointsFromApi(geoDataPointsFromApi)
+			$('#spinning_icon').fadeOut()
+			isLoading = false
+		}) // end of the getting from overpass API
+	}
+}
+
+// initMap()
+// $('#spinning_icon').hide()
+// loadOverpassQuery()
diff --git a/styles/images/map-marker.png b/styles/images/map-marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c1c045ac4b567aae2d266b5dd5bd6d2821a325e
GIT binary patch
literal 11982
zcmeHscUaR)w{9RbMMR`aRX`L7y%Ru0KtMpcQiTv8Ktk^zirYq2Afbcw5{i_BA|O=+
zM5HPt^d33_D)q#&_qWf{?>Wam&b{}!&z>iQ$(r?hXXag#RVGItjwS%7wA3}#0VKpG
zL?Q$L98CgD)cj!f0Dz7TKmY&$PyxtD&H%`XJrd%d5((R1eRYxx0N^({DF8r9|D*p^
z>s$MZ_Vt<X|BqGxLf0K#y<9yVUER1Pghc_emo;_B$iAu4vXhtrfNXpk>_mN102y%=
zC+<3WdAZ4ph#)+LZR}iap~4VXxQL&Pn~0dOs0aY8?B`|!afW(v+d>^+2u1$27ccp_
zVRnlArcyehI&P{^N7&T>52#^)t`Q`_86s!LudH+&>?iLBcY{N{Y`Fd4E(lL~KSlm;
z;PS-&SFs2`_cs+UXGMNZxQzo;Uj8c?My{?d++w1_Vxs&+5Dz<hd4ntJKOl&o6#0Lw
z)z{Zo*jGZ>)x$wVOioTtL{wZvTpUEy0D1Z&ylnhH2u~g&!g20z7+0X45D%D}7t9sG
z{T0*3*45ifk)QuK_YY_<nEk)7{}T^iN4^n3MC0ZLfBh(L0QGcr@&1ZtjDUG5iGxLc
zCH_nO#=rEHBt%6;#D3`iUH+Hy&3~i(cR6uaB44-hw{88;w@NgNj?P~^{-?eEX>&MS
z<oj;F>B?Vmg?PiE2rtbmO5aUr=L&(@$$NUaLY(Do#cd&SQnr#HNl7^|kff-r49M07
zDh-mBwY3!$gNlmTLFB+9KLLH+?{}dl!qdwJ0f7?Hi2`955!u#GR8GQP0s^uVwUq!#
zN{QKmY~-ZvK*WxetteDd3L^0r=HDLwB`x2XA|4{*aT59KP=2-L|9<;tlHcO^AG-db
z>$e#AE#-es*FSXq76ZSf{Lkt7hpyjZ;J1|jKRR9iDkq=_Vh!O-EEbM%0962xl=SP1
z*vN=4aw>9iGBWbxl#~=yCyt*uL4BN>n&#x`Q#2>(PEu2!Vmd`f&%nsYc!HLhg^7XX
zGy@~UR}c~)@fkAmW8~z=7-*<z7=F7QH3I0U0PBEtAPF6Sl#T>QM{?8(;2_pkBxJz9
z$}M6cMe%isB&3wbh{M{a03<*l2^j?$6*UFLk1~xoPDep``m7igy|jwH7lTbjAImu-
z6Ze>=W=3WnaY-4Er*Ro&OuVWFcVjPKvCZn8Gz?uQg0Yj30EjgFeJ*keGD;FsAQf>`
zk+>=nQc`lt;}k@lZ%V`wIx=$NL@MqS^y2z9WlfX}=Om>JJf3FsGBQaR-tA-Nxoo?>
zk$E%%I6=fEr32CdlmRVh7@8DthnwpE^*8Ed@AC2uqY<;?T498Ej|WNoS|5)9gU^sH
zP6EqoES-p6Q@c!^$feiMBwngpo1bDG+d3u}%+k3zUl91Z!w-DfbZ-20c^{j?z?pf&
z3cV3{g{J2`uczcIZr8vW-XQg8Yo$x{O+Kkt`=jF0vT}qJwFc#?LBV*PvR+FnuhCkR
zoRnf`$w#wGB4JPG(o*y4P6YV|^F}|r@OV0R_jp@ol#Z6bw&i$7aEDG;#$31a;u|*{
z8ot(ktN=YD%vlGn=EB#Z#LLI*x-K?%+&uph<%}JXzc_}4sYy-sUtc<Sz-=k<M<9lw
z`v@R0A}g0w-#t49n96pXnl@hOGUOIZw7e$od9N>ekdvX}^`(DjFkq;vx+cIc4p9G$
z)B*r5_b*XdO69^*n_{)!R2X&eolME}V>G_T5>z@rsFB9@VM=eGJ8F}Oljl@E8dQXA
zyaf$Mj^!7>v~xv8zr%6>ouIW%E_v8~N%vD#)8Nnbczm!O5-1;&zsB#ergdMQt~a+R
zg78tX6P|k?b28;hlSC5BB2aw;_=G=AHhnB!w!FSG-{TaAU1WLLn?Tj1$xy1-XDRyU
z9W>zyEfq951BUOeoU62eY>mjaUufc05+gX@Z7=9H5t6d<NgW%wF2OF|V(O&8S?RCU
zb*}l>=d=r^1M(QE4GZmn-5D?)dd>4V<<6S0`>G=#CWv%VE?=$FoYu)G$IK~(3G0gO
ztQBA6NWHGYr*ndNX>36pFPKS7GCC#A{($!65#aPQr>Q)Bf{)rXb-aEH8j~YjH4)%#
zpHhj3=|~xuN9CqOu-NB8K4?6kYHl-#8A?32*sRqp$gnkptaMy5hhw#am^zv2H>ob-
zYTwPXS5FUVX&EHfrM|t`cb{dU-$dQmTk-O@Z2(&WbX|m3uxHFcYB8BnXK=UD1LVu+
zw!3dn(wqcL%%)DWoA@x*Ibw6_?!S3%*p^=lx3q?3nI&Jd^ztU;_6B62#@+K|V~%NX
zf*<kROA356VYCcoExu5%CY&SJ8+%{PKEiC-pNs@>>C}ID<IL&(WV?nFE=o$ug<TY?
zJmE4}q4s5Uj8|HkzESQ2IPi|*=Nr{w`)?4~ay^oJA8S#FUh~_pHXMt?9qZGEG;Z2F
z@9#Ag=b_D+?MbMdmh*fJc4J^)GRiMLZ?Q13a6Q0i+Fs}V-K4+G%gNlAY-{|&@Hr0c
zBKf>KAHK<S=L?y=nJ=)ed%EQ;E}K+C#;<4@<gKNn4LR!xW-k*p$gStYJEo5Gn%mSE
znXgKgzk6?3*DeKK84cu^&^Q8==fxVBs-1U><DKTS4_E7W_p=WJItI`zouP()yuLV6
zz(xb@C^PC?WB1M#o!FtJe@F>wRA^G0el}ug9xkkHCKgwqSn9Bj(33i09(DaYWfbB%
z8m?iV7&8We{WJD^wtzI29{Shpq<;CV^9jfOBRmp~jsRZB0he(^Rhfd|@TvslUa62m
zYyK{^@tdSH(NLnPCHL~|(=u{uVCDnYT)ek+(onX&_jp)q=jf*+=TGc5Cp2neE+E0H
zDMlIka9{Pp0)yv&BkqUkNDR_4%`~Uej#-m!$STP}+?^99Ux&(uf-g%2Uz?Rq?X9z<
zmA;>knM)nu8lf(F?{Iyfjp4K|Tf<O72X{5Vvb}C5UkEB|7}IM~<JIZT=-g~EQ|io#
z%-<>2%-#m0Ufk!+C86hqUtw`)?IG=tJ~>-hVRdtI)1~tUyQNH)-9T0;e5cr2@9FL4
zSw^u0Z?ib$>R`G9tS`6<_9%1QZcswu2oM>!O8I3XL~7o!lR|?Erfv{R(D&UP4%Y2`
zT~<7t{W8vfs1T<(vT^emmf5Vp#xKx}%5#Qie;%d0I6I9*e~hx4V<GhViEK3sF9o_D
z;);&|mZ@;mweuR6Be)b7t2Ql^W-4^yQ(=BLIS5HwH`{?y3cl06rR?n=O|PLlrJ1rB
zBm@wrm%{3-H!#6|Pg&CR2ErRSO)d2d_mnfv`@Hu`hK%nEy$|U-8>{@n+nftjPR=1B
zcLew-_=!&Ye7g+7mC!JQ_=HU$!0=tXv}7{@I@<2h=H}yvFKe7r_Bw4NEKlSn_l0~!
zt<sHs9`+Frr0jU_4K~7fi!kr-B+KW=lv-c!mW)EdIC#=NrPQ>R;kDl5AC(%?cLp$`
zH9I{#;Z;6ke_&%1TY2<^Q@D$eFM8Lgmx0C!k>-XVro@^avZye}#j!cXx{*s0#;$P*
zVbvDtj8=bCI<RQwVsoFKjqi`NFqYM^lzznYRw`#|JHL(3+dBKwt-vZvHkH?}PF|wc
z_25F@Y;aB%Ixme)k>uS`b2h1{y^5KavuCEcKkwN5b}5k8{MyJ+>aY|xt>U_o4!x7b
zoC+iOByzJRi}!>ZJNPQ~!iZ7c&5`ppty2XywmJGMl7a{}n<Cu#V)(18G>ll}gEMC|
z6#UBmn5k)X6Lx>)-gxVzY)5*Anto(eTo3{@MS!_z+k#i@=q7)5K4cVATeQoEB_E#$
zp3B%cxPZdPW+(|(_rR;FJp3ISHopjVQdaS;YqXBBG8YJoG~UHT-S#z`zh$=?G2vJ2
z$<k@sYbr#OQ%R^zi9h|$s7agrTIFWDo>D-8MKjxZxz)6Np~OjaU(WH5_pYaInVY3z
zhu6yH3NIVDh3gcf^D~eU0jz-z3-@-y!dq`=EOGqN*He_J>G50>#C}Q*@x~R!wC{gr
zGE}d(XR)&$8dUIri#1+1hpJgNu&q<DFD9nK6$A1aTmAIJF9mCuW2p|WP3jAzH(P!Y
z?VXn&Rzjh3A`-=aXRiL?*_Kwu?a?y>8w}GX5ph|3UPG1dZP0ngF6)Y$I6hucIs%ZF
z>J0QT-!s1PworC&Jw$H&5?8l#n)N(`_<mXmW7h!^6=AZcSQ=_=elC!wS+_wz>hzXP
zal_0dX>A;nzrRvjZcy^xZDq23YS#;jnj2QUJbBR$TMtvyhsk%;fjK;C^TAZ^!LL#a
zLbHGNC`8M!g}+m-*nRP~X*uj+`&Op8hwdMrOQsdEW1}6jnR{I`r58By@l9Oxes)&b
z)h|hvbEG2epTuCc+*K|XJ}d~a>T^?gG`%$Yx^PG*ZOTK=7{w_TG~;Cz^K!ER$9guR
z$?#QvVPr9LusUUp>9NyOPP<8AS1&^IQCf~NwfQMi=A3>hCzp#7r<@0Kj?*W*-QO|{
zK<*49YUa<lMWjr{xH>Og0O)b+g#gO>Ty5}OIOQu`l}08!+q90$!b4*ChGz}<VtthU
z`vF6BKa|>8;HQg0obCy;y>3lY{JJ7uc70!5!~|_bx5toXPI?$745Ng}wZ%N-$Ii94
zF&fOWM}PwT?G45<V-B;Ap0Oi1`2O%3)#VhgTSc``MTYrZSZ8PUm^wFIS3d94uM6Uz
zZS%MJJxNOg%7<L_A3k_uZ8srrAZg|M?jbWCHbxtoAmBjd_A8zdB9{((2x|(I<pNw>
zeUITC^7K<LB6e_rzWk{0HIbOQXMrBpWI;NUPXl76_NlI1PUs(CwY-o|QhybqVk7q%
z*Sf(j2dQ`7bqddu(XR)YNn@}}ePb9G>_PT&<rXTk_+@E%8+lX!XGXS<$U$bm8$PeP
zHpvXN*22bf(%BqundZMvjhIOZ-8U3|AYJUss$+GLx6iz^y?jU@0spbP>|}(EH%IN>
zBO$3O4j!-4&|_DmK&SQJsH)yYxJ`&FS`5|YJ$hxAP&iPat?sOqg5gI)a4m-Xv$`nh
z6h1!hLhZ&C=SlV6C4sC*i!ov!>_MnRL?*g0hUI{hS$DN&uLfA{hfI#2#dvc1CdEOz
z+qxGOEJ0nx3ELZVEenh1w^A{J`)|^a_w>5;++_-89+<qMk+oOXJ?S3hAUolA@sJon
z1od0%2w4#^TcF#xkuHl;XMS`GH5b?ms@Hukso~|pfJQr?CNcl~({O!%8qVUI;nI?e
zcKq|C?~x11hxL+=$UDS04>z5S;vtKm!#7ml*X&<-aV8hbiS$C=7;8117_JaW96AEv
zj{yDwU%FlW+V&Nw_Z-))VmVk{c4c(B3%64AvT|}f)!@~ytzMP2N@}vY^WJ)jnu%bK
zfJ8iCX1v&S+3q|f{&JigK|W?A(%j&_-7oSJ_W;VB5L5pTichb9K8({wXueBl#5-Vd
zxEgS!wSN$D7Kn@a%roVBB77j8dE$~umC$)t9mhRX(N<5>a^zt+ON?&WUd>xK%AyH0
zh2c|(XNm8dzMzp8FRCnKR(yg}b14MbG$^xrlu+4FufsvtT159}Y2>;RQ|LLb-Zgol
zjmGJFhc$+B4nh^z(3Ept>=veK7+=maE6t1h5!ZC}AG8_I=LN1+j9kf0+@{wQDizn{
z3CDk8k3a39X_OR;yjdIT3m<L3?!?lCh3QANLgDF|v?BsMbh{7he3*lVg!`*4?%YXS
zj>VqX+zbwP{35fnfBV>H#**s+u~T(d<8=j#y$f5iN7c*?ugnkWvcqz{pe<<jPggtl
zxJYB;N+Q`(-s=A$X^Cl=Hm!`R8Zb&K=@K$s%CZ_+5Y=%hVG)-+rQ$=y{WLVkfl9Vs
z4S{qj%r=W1sj3JLP<Q{}Q@%-im~qMG2w=uHF1l@&LYv&4XrgM(ezx(aocK3=A%~$;
z5(=kb@#%_9p$Hu&hIFIW%{LjJKj>zBVRF$ndni(Sq+4cz;A{TkSiVUFK`W+y8a{&A
z7LNo4>(H7n42t(}7ZGL%Y32>%z$hEP-q!amFi#2hJ`*3frMCiH!@vK&Hmps-rA7t9
zdB3f$FYI-_>@}Fg7Zu%0u`H`SC;jHi-SF*-T=FkvUaF5+w`~XY2qXp2CSg%a%e$;>
z-vV4{>tP0x<AGK~X@B8Ndj5mt5U!X!`z5wJlq84Y4HES8$XV;;2oYCxfnF1nfriq`
zMfG$ka+>oi^-Iv9)Vf1JUBBtBf<SFd2=5_a29oYR-B`dLExFGoniD-Ys6$N%F2s2c
z7Z-e3e`Qm*`bYkv<G8=pw#UAhcVRK%rr!Iymxa->CQ8oH`+6LvY|k=s*Pvw~D{FxY
zlllG_mfrd;;}T7*CXV83C=2@Wbv-MmLeLA_ILiSJRL%x3AHEhTcjLHtMnqvjHGEY{
z=GqRbXTIP7ZB$t+gzjH#4_i}u<P~wCu_VHM1RyZ_((d+()I2O4m<SpJcb1>|JbCix
zdkwtR-GlVOF&|nxBPHdW)3_Kf{x)CM73|Kc9*B9&n$Q2z&P)T<=j4`i+k9=GPqDkt
zwmEw=TbetMx)ev{Ja4)_=dkH5_L#+kYO22{=}oh()#*xSb+K5}K|b$dbF<YIaACjk
ztqGhd!3X*r#{J|NFcEm?#$)LcR7>A<(!|Ug^Q1XLL`_b~N$!UyPGyPdyB7{16Bj9x
zYK2i37c7j2&XfVfRGAG=J@URbItBz=POXB6?D-is1d`k$yv}7Upsn7&7p`$0`jjTQ
zC=g%*A00QZul5#h9<@np?XgRJ?hqflY_8GqvTAx=ud&$U-atCz)Ma_UouA{D6C!a1
zl-^^wXHo$3x@nr%AI&%xd}@((H+slQ<p?k!u*$WaY3)gCT+sNX&L3$fwb9J}Uy4aG
z5|ZkA;GQzNZkh9Seo%-OUls3yUf8Mx4!(j<GZU$6(AvDa(h)?rA@e|updG%>JuuKW
zWTd7?hCsnASYD5aTTC|sFtcZj1qUJp^y{*hV@7Zv9xrN%hR3DGh=?TJp3GeeK0SMl
zaI;IbMU#vvZC!=CXun;kZC0vooK5etNy9w4Sjx+9aznE0`uv5?1<V6%X4>&b=Mpzs
zt^=VEy<-45zyW1gOWq^2R?4DbtbS@-yk+X(XGMpif@T9^5s&rZSn)juk`XZbVAig!
z#{+e?V})_gKe9>y8?E0+@=JorspOWHFBL7B#T4rr&6c503!<K-8<}={6hz79CQOu{
zeQ*Z=Oz-W6I1Hy+OpB&TR~p0>7q|=%E0~0)$*eyz^P5J6%ZE+hOl8lVzBzzdVY?Sn
z#65d319{OX5>OKEK4)l#T<zbg!q{QFLFhp6WL~K*&et1ps9W~Di{}R3RrW!|6AHbe
zO)Iy11yWQih*9%EtDH81f@Xg1*c7zf2j$G&AMuEfl2VD<(O)h+`ht<w0@3*MtDo6+
zN>9`Fw^!_{zU^5K-QyzZdzvND@P}-}w4qlI%;hj3eFUSeo!MEhl;T(NapB?Bo`Kun
z9H*(<5uo_=UP3^zE@k)h8}!-Is8bU^1u>eo1+L)(%lTV7YO2$_`k)&A%R#2@X*gHJ
z%w})!?51fPEkb)D`f;7Oh=GOmUCOMYq;XRkWAKBElYTKWQE)doa%Tb~!N#e%o*AZ=
zn{IezdGgFtx1`#D#Nd1ksKwY+x@1-~$^N<e=+Fa9@%$aiA|y|e{fD}_+Exf(4sQ|W
zCf|qX6Vgnm)9j;+(8_j|!R_8{Tr+6$Wz82{&2+RCgQX&k?8j6#G!9;c!{SaPTJ>na
zVh3p|uxs39^1irFY_(1j_4Uz_JyA;OW~jGJ7G-d#t}YT;i5<T^>NAb2ZfgdsX4er$
zEFU_5bFBGO%GaMpweXl+Y`c~g2K83DeKrBG4|&NBHe{S5RMri4^pEDiMdn7Z+Z-^@
zB<fTwYR_di&P0rGie53srzy=!uMEz0er!CtNtqPWNox>f`j~2Qdidb%yu*%4aO|DM
ztG)i?m)Wh|3u+xIu_20jD`q)4y-=%kU9hSDmTI;GLHVXX<q_aIx;kX&aqt^OlRV(u
z#+>n!_wB#PL4UL2x>Jm}@%4_1_haqI;xUYPMw}lD;}zyL$h605=VA(&zOCwxfzfiU
zN&QNx{nE0$jsL9P!3xZIxZ-(k#<lXPLV0^C`N!FDwW82*`_<{a5wM1^pak6sNx24F
zglU*ZEheWP6wrt7IfKaR>(_K1EOlB6wm2>_I_@*KGpD=y3G55C?a|O&u)>vMN3ml8
zg2UD@u|M;=o<H-tl<x`o?KEAQ{#{jJ;NJ57Tjgfz<rGRS_3*d5r>6EI_4?pa@`W7?
zJjKZEt;wS3X}R`dR{$w0T@4vvMo<&Rj0MyFFFU*Y(}gs6#Jan}7damGI<X@FvZN9f
z6^R*leQ5gl7WM_cp?_e9@M2KN)GWTw9KWn1LCF-s?#u4p_*V9!PzmZJRy-9Pguf`W
zD1~u4^d;1%Mz~xnY>vpeEQ6ZSf1##H-d7@jELHzX2m4v%H2Lx>A7t9*Vcz3{6GD{*
zxm)HVLvsQ8-h8^kg_Xs{KB#c29SNqMUdk0l=0^vrLkiTGFkivGcLOF^Ulr=vQ|izs
zmA4_3;wJW7l#kj9V=^fDs1~(wnb@iiegkOT*sx^GXuR_UA=MB6E~nGGIl#Ch&oU`f
z8y>8{K6OrNE%I54`{?*ud+6?%fL^9kXG|W~fb$nIQ9>|{jvzE_EpO^+o$9b5fM<cb
zWJHQ{&R?L~yI3=*cVbjPUgd_MWU&2{e$4vll3*7EouA_tBzlFN-Mm3o?rkFrYvbF%
zxCivKe8L`1LuVzx!7@6%xvOLSx-|u%nLn3e|1MA=R`3nK3RE#n%+N?71SO>c*uDKr
zv9}D<8Y2`P{CV5;iwpnYr&MOu=a=l!*0%EYcPonun45U&`FfONK+_Q+!d7(!gw4(|
zbG7RRACv2)cctGu2ZP{&uGLMsWlHWc(lsxfmTHEEcexKT3#y|Bc&DGg*1NtN(|mw0
zi;O@#m$@^W;;GaCbvLWqI4SJ2We`@bZ7>`N4~8!VzCBA$jSGDFW}$<N#b*gWI$68Y
zr>=2#gSt~9ML2V$A<qHht%UjD<F5N&!}#6uwVfXsR^^Y&g5&SMUlwrX#i~{wKIu|9
z+*1}yUk}~mCq{<MkKZDLZY?(C=}V)Fp*fIpq9^$2$06YF6)tLCqXa>kH^yDAc{R_~
z=e!wtggV#{pAx?edYxtKUG7Tm1`$qZsVq>^r?n5-w)tQ+C4_|ga4}1>hh`(IT;mLb
zs;{qjl-0_V=uj1aHhg?(*Hqkh^cFG-UC@zKh1iv8<*o9YsJ@ktH?Db~^?d98N>SY-
zb?w@AxqDtuYw@$AE$Jd=8@UD8FRzC3oCTNg*kYZPz}mz&De-C?%un$(RcBNzY4eWh
zaDJM-!ZO~D7E}PvrFrW0RMwz(&7}LPpgqU;*JOn4N6br~qn6R=L)>lcz(N8PKfb?$
zk8pT@zZ{&pa2s+2Fy8WVa9+Wpt+6<*!{D4bP82Sa`d`tP{%iF0{Lb+}lfh5KekGfx
zWI?cC0al1n4279<1Z#$sr$)&xnGK=pXitmxM*|7^vY)H6Ky6vP1q|~#D*@f%gUO)E
zCF*2nLT+K`?IQJnhj-X1+#ByrVSKz_?^F0czEQXt2eqqb!r<%&y2I~vFHIDDyslYX
zdj#0E2|48>g2F4kP#h#Vl<7PI_~gA+9_ZO`d;AHqy%*ie5k6Z*ThimL{OXJK>cE%w
z-RL(r(tVVztM^qtG?=^XE`KuIcSRnq=%s|@|F;j-cv7?$Rc@?Gmsdy3hYzn7`F|1Z
zbkf!wEch6`tsrb*8^2GS6sb(l6oMQ&@Ciis?3>5k-X>xf^vqo|eZf_VzkOcl2q0Me
zZQdVa`THGV-xu4KKI{F`GK~-t?h!rq6_YDb%xd}eOHWWP))(Hly;_uq%7j%>Q(8=@
zs?5KpC5OEBr;qmtVc1CU*EOuLiZ#((`4DfismzvQ+HN?P8)Mo~dYClWk2ZWaFu0gZ
zCXUtGg@B-{XFLa`x@m4HkxjO90*A0eq#)SU_pGB=tByN64LQXi1%7q!NkZc8T5W8G
zzEzZ2fQl-ieAou26$(PIhg-;oR>P$1eIioK;w%#vw?;2wGjxFG5c!@h6u_LUyQ|8Y
zLQ`c{OyNg>$GjC_Gn4+^b9v2GPReo`>yn34)7=;L@|44D4~_ttT*pWA_h-2p`}ZEt
z#Rd0%&J`KoJ-c2!68%<xpGLVl4W=>5^?z3LT&kWHJm2`z=hQ;Z#>voy{0YdzcdD|&
zCQM<(?X<kvfSc<rG_)s};sr`D6+<QiT{le?x@OaS;~O+Mp>M&OH#K>S9t~@DENYIT
zmSXdND%^i6M}BeT{Ova|a=B!l<VV?b>8D3$TN<Y0%#@Pq4&mm?xaK98cWOzPZgx#j
zao(5U@Nn&-xebE+8NtLOKoXbv5kNbVbvwM3;D`vha0I9}RJXL<klkX->!jVgF9{tI
zp<9qqj^p}t+_9_3ivQe$#m(sNa{A|)HPK%(wqI_c(r?u1u6)JM`f?DStX*WKsAghl
w8vPdSu;*_vV(GxFh6g<@ZY@7X`v^f;F0CVUhR5Fdh2Q;^FaEzJ10D_k2V#Iy&Hw-a

literal 0
HcmV?d00001

diff --git a/styles/style.css b/styles/style.css
index b443124..bd88c57 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,152 +1,183 @@
-html, body{
-    height: 100%;
-    width: 100%;
-    background: #ccc;
+html, body {
+	height: 100%;
+	width: 100%;
+	background: #ccc;
 }
+
 body {
-    padding: 0;
-    margin: 0;
+	padding: 0;
+	margin: 0;
 }
-html, p{
-    font-family: Calibri, Roboto, Arial,"Ubuntu Mono";
-    font-size: 1rem;
+
+html, p {
+	font-family: Calibri, Roboto, Arial, "Ubuntu Mono";
+	font-size: 1rem;
 }
-p{
-    font-size: 1.25rem;
+
+p {
+	font-size: 1.25rem;
 }
 
 #map {
-    height: 70%;
-    width: 100%;
-    margin: 0;
-    border: solid 2px;
-}
-.padded{
-    padding: 1rem;
-}
-#heading{
-    background: #000;
-    color: #ddd;
-    min-height: 5%;
-    height:4rem;
-    width: 100%;
-    padding-left: 1em;
-}
-.icon{
-    width: 0.25rem !important;
-    height: 0.25rem !important;
-    display: inline-block;
-    margin-right: 1rem;
-    background: white;
-    border-radius: 100%;
-    padding: 0.25rem;
-    margin-top: -0.5rem;
-    float: left;
+	height: 70%;
+	width: 100%;
+	margin: 0;
+	border: solid 2px;
 }
 
-.title{
-    margin-right: 1em;
-    line-height: 1.5rem;
+.padded {
+	padding: 1rem;
 }
-h2{
-    font-weight: normal;
+
+#heading {
+	background: #000;
+	color: #ddd;
+	min-height: 5%;
+	height: 4rem;
+	width: 100%;
+	padding-left: 1em;
+}
+
+.icon {
+	width: 0.25rem !important;
+	height: 0.25rem !important;
+	display: inline-block;
+	margin-right: 1rem;
+	background: white;
+	border-radius: 100%;
+	padding: 0.25rem;
+	margin-top: -0.5rem;
+	float: left;
+}
+
+.title {
+	margin-right: 1em;
+	line-height: 1.5rem;
+}
+
+h2 {
+	font-weight: normal;
 }
 
 #overpass-api-controls {
-    position: fixed;
-    top: 8em;
-    left: 4em;
-    padding: 10px;
-    background-color: rgb(255, 255, 255);
-    z-index: 10;
+	position: fixed;
+	top: 8em;
+	left: 4em;
+	padding: 10px;
+	background-color: rgb(255, 255, 255);
+	z-index: 10;
 }
 
 #overpass-api-controls a {
-    display: inline;
+	display: inline;
 }
 
-img.leaflet-marker-icon{
-    background: #fff;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
-    border-radius: 100%;
-    padding: 0.25rem;
-    border: solid 1px #ccc;
-    margin-left: -20px;
-    margin-top: -20px;
-    box-shadow: 0 0 0.05em green;
-}
-img.leaflet-marker-icon.tag-socket\:type2_yes{
-    box-shadow: 0 0 0.5em cornflowerblue;
-    border-color:cornflowerblue;
-    border-width:3px;
+/*img.leaflet-marker-icon {*/
+/*	background: #fff;*/
+/*	-webkit-border-radius: 100%;*/
+/*	-moz-border-radius: 100%;*/
+/*	border-radius: 100%;*/
+/*	padding: 0.25rem;*/
+/*	border: solid 1px #ccc;*/
+/*	margin-left: -20px;*/
+/*	margin-top: -20px;*/
+/*	box-shadow: 0 0 0.05em green;*/
+/*}*/
+
+img.leaflet-marker-icon.tag-socket\:type2_yes {
+	box-shadow: 0 0 0.5em cornflowerblue;
+	border-color: cornflowerblue;
+	border-width: 3px;
 }
 
-img.leaflet-marker-icon.diet--vegetarian_yes{
-    border: solid 3px green;
-}
+/*img.leaflet-marker-icon.diet--vegetarian_yes {*/
+/*	border: solid 3px green;*/
+/*}*/
+
 #query-button,
-.edit-button{
-    background: #497cd3;
-    padding: 0.5em;
-    border-radius: 0.25em;
-    color: white;
-    border: solid 1px #497CD3FF;
-    float:right;
+.edit-button {
+	background: #497cd3;
+	padding: 0.5em;
+	border-radius: 0.25em;
+	color: white;
+	border: solid 1px #497cd3ff;
+	float: right;
 }
+
 #query-button:hover,
-.edit-button:hover{
-    background: #0d377b;
-    border: solid 1px #08285c;
-    cursor:pointer;
+.edit-button:hover {
+	background: #0d377b;
+	border: solid 1px #08285c;
+	cursor: pointer;
 }
-.edit-button{
-    margin-left: 1ch;
+
+.edit-button {
+	margin-left: 1ch;
 
 }
 
-#query-button{
-    min-width: 10em;
+#query-button {
+	min-width: 10em;
 }
 
-.pull-left{
-    float:left;
+.pull-left {
+	float: left;
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% {  transform: rotate(359deg); }
-}
-a{
-    color: #3388ff;
-}
-#spinning_icon{
-    position: fixed;
-    top: 11rem;
-    left: 3.5rem;
-    z-index: 10;
-    background: white;
-    font-size: 2rem;
-}
-#spinning_icon svg{
-    position: fixed;
-    top: 1.5rem;
-    left: 0.8rem;
-    background: white;
-    border-radius: 100%;
-    width: 3rem;
-    height: 3rem;
-}
-#spinning_icon svg{
-    animation: spin 2s linear infinite;
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(359deg);
+	}
 }
 
-#footer{
-    max-width: 70ch;
-    margin: 0 auto;
+a {
+	color: #38f;
 }
-.leaflet-popup-content{
-    min-width: 15rem;
-    min-height: 10rem;
+.leaflet-control-custom{
+	padding: 1rem;
+	background: white;
+}
+#spinning_icon {
+	position: fixed;
+	top: 11rem;
+	left: 20.5rem;
+	z-index: 10;
+	background: white;
+	font-size: 2rem;
+}
+
+#spinning_icon svg {
+	position: fixed;
+	top: 1.5rem;
+	left: 0.8rem;
+	background: white;
+	border-radius: 100%;
+	width: 3rem;
+	height: 3rem;
+}
+
+#spinning_icon svg {
+	animation: spin 2s linear infinite;
+}
+
+#footer {
+	max-width: 70ch;
+	margin: 0 auto;
+}
+
+.leaflet-popup-content {
+	min-width: 15rem;
+	min-height: 10rem;
+}
+
+.popup-key {
+	min-width: 6rem;
+	display: inline-block
+}
+
+.bottom-content{
+	padding: 0 2rem 4rem;
 }
-.popup-key { min-width: 6rem; display: inline-block}