red dots
This commit is contained in:
parent
60d9e6b9fd
commit
8f47bd6996
@ -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
|
||||
|
||||
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>
|
||||
<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 >
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<div class="bottom-content">
|
||||
|
||||
<p>
|
||||
Carte des IRVE de Rouen
|
||||
</p>
|
||||
<div id="filter">
|
||||
</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 >
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
|
||||
81
js/main.js
81
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()
|
||||
|
||||
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%;
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html, p{
|
||||
font-family: Calibri, Roboto, Arial,"Ubuntu Mono";
|
||||
|
||||
html, p {
|
||||
font-family: Calibri, Roboto, Arial, "Ubuntu Mono";
|
||||
font-size: 1rem;
|
||||
}
|
||||
p{
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@ -21,18 +24,21 @@ p{
|
||||
margin: 0;
|
||||
border: solid 2px;
|
||||
}
|
||||
.padded{
|
||||
|
||||
.padded {
|
||||
padding: 1rem;
|
||||
}
|
||||
#heading{
|
||||
|
||||
#heading {
|
||||
background: #000;
|
||||
color: #ddd;
|
||||
min-height: 5%;
|
||||
height:4rem;
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.icon{
|
||||
|
||||
.icon {
|
||||
width: 0.25rem !important;
|
||||
height: 0.25rem !important;
|
||||
display: inline-block;
|
||||
@ -44,11 +50,12 @@ p{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.title{
|
||||
.title {
|
||||
margin-right: 1em;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
h2{
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@ -65,70 +72,84 @@ h2{
|
||||
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{
|
||||
/*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;
|
||||
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{
|
||||
.edit-button {
|
||||
background: #497cd3;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.25em;
|
||||
color: white;
|
||||
border: solid 1px #497CD3FF;
|
||||
float:right;
|
||||
border: solid 1px #497cd3ff;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#query-button:hover,
|
||||
.edit-button:hover{
|
||||
.edit-button:hover {
|
||||
background: #0d377b;
|
||||
border: solid 1px #08285c;
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
.edit-button{
|
||||
|
||||
.edit-button {
|
||||
margin-left: 1ch;
|
||||
|
||||
}
|
||||
|
||||
#query-button{
|
||||
#query-button {
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.pull-left{
|
||||
float:left;
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(359deg); }
|
||||
0% {
|
||||
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;
|
||||
top: 11rem;
|
||||
left: 3.5rem;
|
||||
left: 20.5rem;
|
||||
z-index: 10;
|
||||
background: white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
#spinning_icon svg{
|
||||
|
||||
#spinning_icon svg {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
left: 0.8rem;
|
||||
@ -137,16 +158,26 @@ a{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
#spinning_icon svg{
|
||||
|
||||
#spinning_icon svg {
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
#footer{
|
||||
#footer {
|
||||
max-width: 70ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.leaflet-popup-content{
|
||||
|
||||
.leaflet-popup-content {
|
||||
min-width: 15rem;
|
||||
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…
Reference in New Issue
Block a user