libre-charge-map/js/main.js

//import * as geoDataPointsFromApi from './data.json';

const overrideQuery = true
const initialZoom = 14
const osmMention = '&copy; <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()