mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
red dots
This commit is contained in:
Tykayn
tykayn
parent
60d9e6b9fd
commit
8f47bd6996
8 changed files with 574 additions and 222 deletions
|
|
@ -20,5 +20,14 @@ Vous pouvez modifier les paramètres en entête de fichier pour choisir les tuil
|
||||||
# licence
|
# licence
|
||||||
Gnu Affero 3+
|
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
|
# sources
|
||||||
https://forge.chapril.org/tykayn/melting-pot
|
https://forge.chapril.org/tykayn/melting-pot
|
||||||
|
|
|
||||||
3
img/socket_type2.svg
Normal file
3
img/socket_type2.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 509 B |
55
img/socket_typee.svg
Normal file
55
img/socket_typee.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
84
index.html
84
index.html
|
|
@ -1,42 +1,39 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang='fr' >
|
<html lang='fr'>
|
||||||
<head >
|
<head>
|
||||||
<title >MeltingPot - Où manger et boire ? - OSM Bliss</title >
|
<title>LibreChargeMap - OSM Bliss</title>
|
||||||
<meta charset='utf-8' >
|
<meta charset='utf-8'>
|
||||||
<meta
|
<meta
|
||||||
name='viewport'
|
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
|
<link
|
||||||
rel='stylesheet'
|
rel='stylesheet'
|
||||||
href='styles/leaflet.css' />
|
href='styles/leaflet.css'/>
|
||||||
<link
|
<link
|
||||||
rel='stylesheet'
|
rel='stylesheet'
|
||||||
href='styles/style.css' />
|
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">
|
<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">
|
<link rel="shortcut icon" href="img/french.png">
|
||||||
</head >
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
<div id='map' >
|
<div id='map'>
|
||||||
|
|
||||||
<div class='leaflet-control-container' >
|
<div class='leaflet-control-container'>
|
||||||
<div class='leaflet-top leaflet-right' >
|
<div class='leaflet-top leaflet-right'>
|
||||||
<div
|
<div
|
||||||
id='overpass-api-controls'
|
id='overpass-api-controls'
|
||||||
class='leaflet-bar leaflet-control' >
|
class='leaflet-bar leaflet-control'>
|
||||||
<!-- <input-->
|
|
||||||
<!-- id='query-textfield'-->
|
|
||||||
<!-- value='amenity=restaurant'-->
|
|
||||||
<!-- size='50' >-->
|
|
||||||
<input
|
<input
|
||||||
id='query-button'
|
id='query-button'
|
||||||
type='button'
|
type='button'
|
||||||
value='🍽️ Chercher' >
|
value='🍽️ Chercher'>
|
||||||
</div >
|
</div>
|
||||||
|
|
||||||
<div class="research_display">
|
<div class="research_display">
|
||||||
<div id='spinning_icon' >
|
<div id='spinning_icon'>
|
||||||
<div class='message-loading'>
|
<div class='message-loading'>
|
||||||
chargement en cours...
|
chargement en cours...
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -46,48 +43,51 @@
|
||||||
height='4cm'
|
height='4cm'
|
||||||
viewBox='0 0 700 400'
|
viewBox='0 0 700 400'
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
version='1.1' >
|
version='1.1'>
|
||||||
<polygon
|
<polygon
|
||||||
fill='red'
|
fill='red'
|
||||||
stroke='red'
|
stroke='red'
|
||||||
stroke-width='10'
|
stroke-width='10'
|
||||||
points='350,75 379,161 469,161 397,215
|
points='350,75 379,161 469,161 397,215
|
||||||
423,301 350,250 277,301 303,215
|
423,301 350,250 277,301 303,215
|
||||||
231,161 321,161' />
|
231,161 321,161'/>
|
||||||
|
|
||||||
</svg >
|
</svg>
|
||||||
</div >
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div >
|
|
||||||
</div >
|
|
||||||
|
|
||||||
</div >
|
</div>
|
||||||
|
|
||||||
<p>
|
<div class="bottom-content">
|
||||||
|
|
||||||
|
<p>
|
||||||
Carte des IRVE de Rouen
|
Carte des IRVE de Rouen
|
||||||
</p>
|
</p>
|
||||||
<div id="filter">
|
<div id="filter">
|
||||||
filtres: <br>
|
filtres: <br>
|
||||||
prise: type 2, type CCS
|
prise: type 2, type CCS
|
||||||
cable: attaché, à fournir
|
cable: attaché, à fournir
|
||||||
puissance: min 50kW, 100kW, 300kW, 400kW
|
puissance: min 50kW, 100kW, 300kW, 400kW
|
||||||
</div>
|
</div>
|
||||||
<h2 class="title">
|
<h2 class="title">
|
||||||
À propos de ce plan</h2 >
|
À propos de ce plan</h2>
|
||||||
<p >
|
<p>
|
||||||
La carte thématique proposant des points de charge pour véhicule électrique, basée sur les données
|
La carte thématique proposant des points de charge pour véhicule électrique, basée sur les données
|
||||||
d'OpenStreetMap.
|
d'OpenStreetMap.
|
||||||
</p >
|
</p>
|
||||||
<br>
|
<br>
|
||||||
Fait par <a href="https://mastodon.cipherbliss.com/@tykayn" >Tykayn</a> - <a href="https://www.cipherbliss.com" >www.cipherbliss.com</a>.
|
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>
|
<a href="https://forge.chapril.org/tykayn/">Sources disponibles sur la forge du Chapril.</a>
|
||||||
|
|
||||||
<script src='js/leaflet.js' ></script >
|
</div>
|
||||||
<script src='js/jquery-3.2.1.min.js' ></script >
|
<script src='js/leaflet.js'></script>
|
||||||
<script src='js/osmtogeojson.js' ></script >
|
<script src='js/jquery-3.2.1.min.js'></script>
|
||||||
|
<script src='js/osmtogeojson.js'></script>
|
||||||
<script
|
<script
|
||||||
type='module'
|
type='module'
|
||||||
src='js/main.js' ></script >
|
src='js/main.js'></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
|
||||||
81
js/main.js
81
js/main.js
|
|
@ -104,26 +104,38 @@ function displayPointsFromApi (points) {
|
||||||
console.log('layer', layer)
|
console.log('layer', layer)
|
||||||
var label = L.marker(layer._latlng, {
|
var label = L.marker(layer._latlng, {
|
||||||
icon: L.divIcon({
|
icon: L.divIcon({
|
||||||
iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
|
iconUrl: '/img/beer.jpg' ,
|
||||||
className: 'label ' + makeCssClassFromTags(feature.properties.tags),
|
//+ getIconFromTags(feature.properties.tags),
|
||||||
|
// className: 'label ' + makeCssClassFromTags(feature.properties.tags),
|
||||||
|
|
||||||
iconSize: ['auto', 'auto'],
|
iconSize: ['auto', 'auto'],
|
||||||
}),
|
}),
|
||||||
}).addTo(map)
|
}).addTo(map)
|
||||||
|
|
||||||
var myIcon = L.icon({
|
let circle = L.circle(layer._latlng, {
|
||||||
iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
|
color: '#c00',
|
||||||
iconSize: [iconSiZePx, iconSiZePx],
|
fillColor: '#f00',
|
||||||
iconAnchor: [iconSiZePx / 2, iconSiZePx / 2],
|
fillOpacity: 0.5,
|
||||||
popupAnchor: [iconSiZePx / 2, iconSiZePx / 2],
|
radius: 10
|
||||||
className: makeCssClassFromTags(feature.properties.tags),
|
}).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)
|
// let regular_marker = L.marker(layer._latlng, {
|
||||||
regular_marker.on({
|
// title: rest_name,
|
||||||
|
// icon: myIcon
|
||||||
|
// }).addTo(map)
|
||||||
|
|
||||||
|
circle.bindPopup(html)
|
||||||
|
circle.on({
|
||||||
mouseover: function () {
|
mouseover: function () {
|
||||||
this.openPopup()
|
this.openPopup()
|
||||||
},
|
},
|
||||||
|
|
@ -134,7 +146,6 @@ function displayPointsFromApi (points) {
|
||||||
this.openPopup()
|
this.openPopup()
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
// regular_marker.fire('mouseover');
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -160,48 +171,6 @@ function getIconFromTags (tags) {
|
||||||
// let iconFileName = 'icon_restaurant.png';
|
// let iconFileName = 'icon_restaurant.png';
|
||||||
if (tags['man_made']) {
|
if (tags['man_made']) {
|
||||||
iconFileName = 'fountain.png'
|
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
|
return iconFileName
|
||||||
}
|
}
|
||||||
|
|
@ -230,8 +199,6 @@ function loadOverpassQuery () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// console.log('loadQueryPoints', loadQueryPoints);
|
|
||||||
// loadQueryPoints();
|
|
||||||
$('#spinning_icon').hide()
|
$('#spinning_icon').hide()
|
||||||
|
|
||||||
loadOverpassQuery()
|
loadOverpassQuery()
|
||||||
|
|
|
||||||
287
js/main_2.js
Normal file
287
js/main_2.js
Normal file
|
|
@ -0,0 +1,287 @@
|
||||||
|
//import * as geoDataPointsFromApi from './data.json';
|
||||||
|
|
||||||
|
const overrideQuery = true
|
||||||
|
const initialZoom = 14
|
||||||
|
const maxZoom = 21
|
||||||
|
const startCenterCoordinates = []
|
||||||
|
const osmMention = '© <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()
|
||||||
BIN
styles/images/map-marker.png
Normal file
BIN
styles/images/map-marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
125
styles/style.css
125
styles/style.css
|
|
@ -1,17 +1,20 @@
|
||||||
html, body{
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
html, p{
|
|
||||||
font-family: Calibri, Roboto, Arial,"Ubuntu Mono";
|
html, p {
|
||||||
|
font-family: Calibri, Roboto, Arial, "Ubuntu Mono";
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
p{
|
|
||||||
|
p {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -21,18 +24,21 @@ p{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: solid 2px;
|
border: solid 2px;
|
||||||
}
|
}
|
||||||
.padded{
|
|
||||||
|
.padded {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
#heading{
|
|
||||||
|
#heading {
|
||||||
background: #000;
|
background: #000;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
min-height: 5%;
|
min-height: 5%;
|
||||||
height:4rem;
|
height: 4rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
}
|
}
|
||||||
.icon{
|
|
||||||
|
.icon {
|
||||||
width: 0.25rem !important;
|
width: 0.25rem !important;
|
||||||
height: 0.25rem !important;
|
height: 0.25rem !important;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -44,11 +50,12 @@ p{
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title{
|
.title {
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
h2{
|
|
||||||
|
h2 {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -65,70 +72,84 @@ h2{
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.leaflet-marker-icon{
|
/*img.leaflet-marker-icon {*/
|
||||||
background: #fff;
|
/* background: #fff;*/
|
||||||
-webkit-border-radius: 100%;
|
/* -webkit-border-radius: 100%;*/
|
||||||
-moz-border-radius: 100%;
|
/* -moz-border-radius: 100%;*/
|
||||||
border-radius: 100%;
|
/* border-radius: 100%;*/
|
||||||
padding: 0.25rem;
|
/* padding: 0.25rem;*/
|
||||||
border: solid 1px #ccc;
|
/* border: solid 1px #ccc;*/
|
||||||
margin-left: -20px;
|
/* margin-left: -20px;*/
|
||||||
margin-top: -20px;
|
/* margin-top: -20px;*/
|
||||||
box-shadow: 0 0 0.05em green;
|
/* box-shadow: 0 0 0.05em green;*/
|
||||||
}
|
/*}*/
|
||||||
img.leaflet-marker-icon.tag-socket\:type2_yes{
|
|
||||||
|
img.leaflet-marker-icon.tag-socket\:type2_yes {
|
||||||
box-shadow: 0 0 0.5em cornflowerblue;
|
box-shadow: 0 0 0.5em cornflowerblue;
|
||||||
border-color:cornflowerblue;
|
border-color: cornflowerblue;
|
||||||
border-width:3px;
|
border-width: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.leaflet-marker-icon.diet--vegetarian_yes{
|
/*img.leaflet-marker-icon.diet--vegetarian_yes {*/
|
||||||
border: solid 3px green;
|
/* border: solid 3px green;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
#query-button,
|
#query-button,
|
||||||
.edit-button{
|
.edit-button {
|
||||||
background: #497cd3;
|
background: #497cd3;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
border-radius: 0.25em;
|
border-radius: 0.25em;
|
||||||
color: white;
|
color: white;
|
||||||
border: solid 1px #497CD3FF;
|
border: solid 1px #497cd3ff;
|
||||||
float:right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#query-button:hover,
|
#query-button:hover,
|
||||||
.edit-button:hover{
|
.edit-button:hover {
|
||||||
background: #0d377b;
|
background: #0d377b;
|
||||||
border: solid 1px #08285c;
|
border: solid 1px #08285c;
|
||||||
cursor:pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.edit-button{
|
|
||||||
|
.edit-button {
|
||||||
margin-left: 1ch;
|
margin-left: 1ch;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#query-button{
|
#query-button {
|
||||||
min-width: 10em;
|
min-width: 10em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pull-left{
|
.pull-left {
|
||||||
float:left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% { transform: rotate(0deg); }
|
0% {
|
||||||
100% { transform: rotate(359deg); }
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
a{
|
|
||||||
color: #3388ff;
|
a {
|
||||||
|
color: #38f;
|
||||||
}
|
}
|
||||||
#spinning_icon{
|
.leaflet-control-custom{
|
||||||
|
padding: 1rem;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
#spinning_icon {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 11rem;
|
top: 11rem;
|
||||||
left: 3.5rem;
|
left: 20.5rem;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background: white;
|
background: white;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
#spinning_icon svg{
|
|
||||||
|
#spinning_icon svg {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 1.5rem;
|
top: 1.5rem;
|
||||||
left: 0.8rem;
|
left: 0.8rem;
|
||||||
|
|
@ -137,16 +158,26 @@ a{
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
}
|
}
|
||||||
#spinning_icon svg{
|
|
||||||
|
#spinning_icon svg {
|
||||||
animation: spin 2s linear infinite;
|
animation: spin 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer{
|
#footer {
|
||||||
max-width: 70ch;
|
max-width: 70ch;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.leaflet-popup-content{
|
|
||||||
|
.leaflet-popup-content {
|
||||||
min-width: 15rem;
|
min-width: 15rem;
|
||||||
min-height: 10rem;
|
min-height: 10rem;
|
||||||
}
|
}
|
||||||
.popup-key { min-width: 6rem; display: inline-block}
|
|
||||||
|
.popup-key {
|
||||||
|
min-width: 6rem;
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content{
|
||||||
|
padding: 0 2rem 4rem;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue