mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
init depuis meltingpot
This commit is contained in:
Tykayn
tykayn
commit
60d9e6b9fd
20 changed files with 1396 additions and 0 deletions
237
js/main.js
Normal file
237
js/main.js
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
//import * as geoDataPointsFromApi from './data.json';
|
||||
|
||||
const overrideQuery = true
|
||||
const initialZoom = 14
|
||||
const osmMention = '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
|
||||
// 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'
|
||||
|
||||
// Créer la carte centrée sur Rouen
|
||||
var map = L.map('map').setView([49.4438, 1.0993], initialZoom)
|
||||
// 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];' +
|
||||
// 'area(id:3600075628)->.searchArea;' +
|
||||
// 'node[amenity=charging_station](area.searchArea);' +
|
||||
// 'out body geom;'
|
||||
|
||||
L.tileLayer(tileServer, {
|
||||
maxZoom: 19,
|
||||
attribution: osmMention,
|
||||
}).addTo(map)
|
||||
|
||||
// if (overrideQuery) {
|
||||
// $('#overpass-api-controls').hide();
|
||||
// }
|
||||
|
||||
function buildOverpassApiUrl (map, overpassQuery) {
|
||||
|
||||
var baseUrl = 'https://overpass-api.de/api/interpreter'
|
||||
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
|
||||
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 displayPointsFromApi (points) {
|
||||
|
||||
var resultAsGeojson = osmtogeojson(points)
|
||||
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', event)
|
||||
},
|
||||
onEachFeature: function (feature, layer) {
|
||||
var popupContent = ''
|
||||
console.log('feature.properties', feature.properties)
|
||||
// popupContent = popupContent + '<dt>@id</dt><dd> capacité: ' + feature.properties.tags['capacity'] + '</dd>'
|
||||
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: 'https://cipherbliss.com/ou-manger/img/' + 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 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()
|
||||
},
|
||||
})
|
||||
// regular_marker.fire('mouseover');
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
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['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
|
||||
}
|
||||
|
||||
$('#query-button').click(function () {
|
||||
loadOverpassQuery()
|
||||
})
|
||||
|
||||
let isLoading = false
|
||||
|
||||
function loadOverpassQuery () {
|
||||
|
||||
// ne pas charger si on recherche déjà
|
||||
if (!isLoading) {
|
||||
isLoading = true
|
||||
$('#spinning_icon').fadeIn()
|
||||
var queryTextfieldValue = $('#query-textfield').val()
|
||||
var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
|
||||
|
||||
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
|
||||
|
||||
displayPointsFromApi(geoDataPointsFromApi)
|
||||
$('#spinning_icon').fadeOut()
|
||||
isLoading = false
|
||||
}) // end of the getting from overpass API
|
||||
}
|
||||
}
|
||||
|
||||
// console.log('loadQueryPoints', loadQueryPoints);
|
||||
// loadQueryPoints();
|
||||
$('#spinning_icon').hide()
|
||||
|
||||
loadOverpassQuery()
|
||||
Loading…
Add table
Add a link
Reference in a new issue