lister les cuisines dans un set
This commit is contained in:
parent
104e4fa9d3
commit
00c1154a1f
127
cuisines.md
Normal file
127
cuisines.md
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
# Sortes de cuisines fréquentes
|
||||||
|
|
||||||
|
- afghan
|
||||||
|
- african
|
||||||
|
- american
|
||||||
|
- antilles
|
||||||
|
- arab
|
||||||
|
- argentinian
|
||||||
|
- asian
|
||||||
|
- asian_fusion
|
||||||
|
- bagel
|
||||||
|
- barbecue
|
||||||
|
- basque
|
||||||
|
- bistro
|
||||||
|
- brasilian
|
||||||
|
- brasserie
|
||||||
|
- brazilian
|
||||||
|
- brunch
|
||||||
|
- bubble_tea
|
||||||
|
- burge
|
||||||
|
- burger
|
||||||
|
- cafe
|
||||||
|
- cafeteria
|
||||||
|
- cake
|
||||||
|
- cambodian
|
||||||
|
- cameroonian
|
||||||
|
- caribbean
|
||||||
|
- chicken
|
||||||
|
- chinese
|
||||||
|
- coffee_shop
|
||||||
|
- colombian
|
||||||
|
- corean
|
||||||
|
- couscous
|
||||||
|
- creole
|
||||||
|
- crepe
|
||||||
|
- cuisine_nissarde
|
||||||
|
- djiboutian
|
||||||
|
- donut
|
||||||
|
- ethiopian
|
||||||
|
- falafel
|
||||||
|
- fish
|
||||||
|
- fish_and_chips
|
||||||
|
- french
|
||||||
|
- fried_chicken
|
||||||
|
- friture
|
||||||
|
- fusion
|
||||||
|
- gabonese
|
||||||
|
- georgian
|
||||||
|
- greek
|
||||||
|
- grill
|
||||||
|
- hawaiian
|
||||||
|
- hot_dog
|
||||||
|
- ice_cream
|
||||||
|
- indian
|
||||||
|
- international
|
||||||
|
- italian
|
||||||
|
- italian_pizza
|
||||||
|
- japanese
|
||||||
|
- japonais
|
||||||
|
- juice
|
||||||
|
- kebab
|
||||||
|
- korean
|
||||||
|
- kque
|
||||||
|
- kurdish
|
||||||
|
- lao
|
||||||
|
- laotian
|
||||||
|
- latin_american
|
||||||
|
- lebanese
|
||||||
|
- maghreb
|
||||||
|
- maghrébine
|
||||||
|
- malaysian
|
||||||
|
- mauritian
|
||||||
|
- meat
|
||||||
|
- mediterranean
|
||||||
|
- Mésopotamie_et_Anatolie
|
||||||
|
- mexican
|
||||||
|
- mexico
|
||||||
|
- middle_eastern
|
||||||
|
- moroccan
|
||||||
|
- nepalese
|
||||||
|
- noodle
|
||||||
|
- organic
|
||||||
|
- oriental
|
||||||
|
- paella
|
||||||
|
- pakistani
|
||||||
|
- pancake
|
||||||
|
- pasta
|
||||||
|
- pâtes
|
||||||
|
- persian
|
||||||
|
- peruvian
|
||||||
|
- pizza
|
||||||
|
- poke
|
||||||
|
- polish
|
||||||
|
- portugese
|
||||||
|
- portuguese
|
||||||
|
- ramen
|
||||||
|
- regional
|
||||||
|
- romanian
|
||||||
|
- Roumaine
|
||||||
|
- russian
|
||||||
|
- salad
|
||||||
|
- sandwich
|
||||||
|
- Savoie
|
||||||
|
- savory_pancakes
|
||||||
|
- seafood
|
||||||
|
- seasonal
|
||||||
|
- Sénégal
|
||||||
|
- serbian
|
||||||
|
- sichuan
|
||||||
|
- spanish
|
||||||
|
- steak_house
|
||||||
|
- street_food
|
||||||
|
- sushi
|
||||||
|
- syrian
|
||||||
|
- taiwan
|
||||||
|
- taiwanese
|
||||||
|
- tapas
|
||||||
|
- thai
|
||||||
|
- thaï
|
||||||
|
- tibetan
|
||||||
|
- tunisian
|
||||||
|
- turkish
|
||||||
|
- vegan
|
||||||
|
- vietnam
|
||||||
|
- vietnamese
|
||||||
|
- wrap
|
||||||
|
- 火鍋
|
||||||
BIN
img/miss_hour.png
Normal file
BIN
img/miss_hour.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
668
js/main.js
668
js/main.js
@ -1,53 +1,56 @@
|
|||||||
//import * as geoDataPointsFromApi from './data.json';
|
//import * as geoDataPointsFromApi from './data.json';
|
||||||
|
|
||||||
|
// liste des cuisines uniques
|
||||||
|
let cuisineSet = ['pizza', 'italian', 'japanese', 'thai', 'thaï', 'lebanese','portugese']
|
||||||
|
|
||||||
// Filtre pour afficher seulement les cafés
|
// Filtre pour afficher seulement les cafés
|
||||||
// Appliquer/retirer le filtre quand on clique sur le bouton
|
// Appliquer/retirer le filtre quand on clique sur le bouton
|
||||||
export function toggleFilter(objectAmenity) {
|
export function toggleFilter(objectAmenity) {
|
||||||
const filterExpression = ['==', ['get', 'amenity'], objectAmenity];
|
const filterExpression = ['==', ['get', 'amenity'], objectAmenity];
|
||||||
let visibility = map.getLayoutProperty('points', 'visibility')
|
let visibility = map.getLayoutProperty('points', 'visibility')
|
||||||
console.log('visibility', visibility)
|
console.log('visibility', visibility)
|
||||||
|
|
||||||
if (map.getLayoutProperty('points', 'visibility') === 'visible') {
|
if (map.getLayoutProperty('points', 'visibility') === 'visible') {
|
||||||
console.log('cacher les aménités', objectAmenity)
|
console.log('cacher les aménités', objectAmenity)
|
||||||
map.setFilter('points', ['!=', 'amenity', objectAmenity]);
|
map.setFilter('points', ['!=', 'amenity', objectAmenity]);
|
||||||
map.setLayoutProperty('points', 'visibility', 'none');
|
map.setLayoutProperty('points', 'visibility', 'none');
|
||||||
} else {
|
} else {
|
||||||
console.log('montrer les aménités', objectAmenity)
|
console.log('montrer les aménités', objectAmenity)
|
||||||
map.setFilter('points', filterExpression);
|
map.setFilter('points', filterExpression);
|
||||||
map.setLayoutProperty('points', 'visibility', 'visible');
|
map.setLayoutProperty('points', 'visibility', 'visible');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const geoDataJsonMock = {
|
const geoDataJsonMock = {
|
||||||
'version': 0.6,
|
'version': 0.6,
|
||||||
'generator': 'Overpass API 0.7.57 93a4d346',
|
'generator': 'Overpass API 0.7.57 93a4d346',
|
||||||
'osm3s': {
|
'osm3s': {
|
||||||
'timestamp_osm_base': '2021-12-05T21:05:09Z',
|
'timestamp_osm_base': '2021-12-05T21:05:09Z',
|
||||||
'copyright': 'The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.',
|
'copyright': 'The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.',
|
||||||
|
},
|
||||||
|
'elements': [{
|
||||||
|
'type': 'node',
|
||||||
|
'id': 598729945,
|
||||||
|
'lat': 48.6727029,
|
||||||
|
'lon': 2.0690276,
|
||||||
|
'tags': {'amenity': 'restaurant', 'cuisine': 'crepe', 'name': 'Le Chat Botté'},
|
||||||
|
}, {
|
||||||
|
'type': 'node',
|
||||||
|
'id': 963824814,
|
||||||
|
'lat': 48.6735834,
|
||||||
|
'lon': 2.1704756,
|
||||||
|
'tags': {
|
||||||
|
'addr:city': 'Saint-Jean-de-Beauregard',
|
||||||
|
'addr:housenumber': '5',
|
||||||
|
'addr:postcode': '91940',
|
||||||
|
'addr:street': 'Grande Rue',
|
||||||
|
'amenity': 'restaurant',
|
||||||
|
'cuisine': 'french',
|
||||||
|
'name': 'L\'Atelier Gourmand',
|
||||||
|
'phone': '+33 1 60 12 31 01',
|
||||||
|
'website': 'https://lateliergourmand-restaurant.fr/',
|
||||||
},
|
},
|
||||||
'elements': [{
|
}],
|
||||||
'type': 'node',
|
|
||||||
'id': 598729945,
|
|
||||||
'lat': 48.6727029,
|
|
||||||
'lon': 2.0690276,
|
|
||||||
'tags': {'amenity': 'restaurant', 'cuisine': 'crepe', 'name': 'Le Chat Botté'},
|
|
||||||
}, {
|
|
||||||
'type': 'node',
|
|
||||||
'id': 963824814,
|
|
||||||
'lat': 48.6735834,
|
|
||||||
'lon': 2.1704756,
|
|
||||||
'tags': {
|
|
||||||
'addr:city': 'Saint-Jean-de-Beauregard',
|
|
||||||
'addr:housenumber': '5',
|
|
||||||
'addr:postcode': '91940',
|
|
||||||
'addr:street': 'Grande Rue',
|
|
||||||
'amenity': 'restaurant',
|
|
||||||
'cuisine': 'french',
|
|
||||||
'name': 'L\'Atelier Gourmand',
|
|
||||||
'phone': '+33 1 60 12 31 01',
|
|
||||||
'website': 'https://lateliergourmand-restaurant.fr/',
|
|
||||||
},
|
|
||||||
}],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const overrideQuery = true;
|
const overrideQuery = true;
|
||||||
@ -60,8 +63,8 @@ const osmMention = '© <a href="https://openstreetmap.org/copyright">OpenStr
|
|||||||
const tileServer = "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
|
const tileServer = "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
|
||||||
var map = L.map('map').setView([48.6410, 2.1307], initialZoom);
|
var map = L.map('map').setView([48.6410, 2.1307], initialZoom);
|
||||||
L.tileLayer(tileServer, {
|
L.tileLayer(tileServer, {
|
||||||
maxZoom: 19,
|
maxZoom: 19,
|
||||||
attribution: osmMention,
|
attribution: osmMention,
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
// if (overrideQuery) {
|
// if (overrideQuery) {
|
||||||
@ -70,12 +73,12 @@ L.tileLayer(tileServer, {
|
|||||||
|
|
||||||
function buildOverpassApiUrl(map, overpassQuery) {
|
function buildOverpassApiUrl(map, overpassQuery) {
|
||||||
|
|
||||||
var baseUrl = 'https://overpass-api.de/api/interpreter';
|
var baseUrl = 'https://overpass-api.de/api/interpreter';
|
||||||
var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast();
|
var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast();
|
||||||
var resultUrl, query = '';
|
var resultUrl, query = '';
|
||||||
|
|
||||||
if (overrideQuery) {
|
if (overrideQuery) {
|
||||||
query = `?data=[out:json][timeout:15];(
|
query = `?data=[out:json][timeout:15];(
|
||||||
node[shop=bakery](${bounds});
|
node[shop=bakery](${bounds});
|
||||||
node[amenity=fast_food](${bounds});
|
node[amenity=fast_food](${bounds});
|
||||||
node[amenity=restaurant](${bounds});
|
node[amenity=restaurant](${bounds});
|
||||||
@ -94,131 +97,136 @@ function buildOverpassApiUrl(map, overpassQuery) {
|
|||||||
way[amenity=restaurant](${bounds});
|
way[amenity=restaurant](${bounds});
|
||||||
);out body geom;`;
|
);out body geom;`;
|
||||||
|
|
||||||
let not_used_query = `
|
let not_used_query = `
|
||||||
node[man_made=water_tap](${bounds});
|
node[man_made=water_tap](${bounds});
|
||||||
node[man_made=drinking_fountain](${bounds});
|
node[man_made=drinking_fountain](${bounds});
|
||||||
node[amenity=vending_machine](${bounds});
|
node[amenity=vending_machine](${bounds});
|
||||||
node[amenity=bar](${bounds});
|
node[amenity=bar](${bounds});
|
||||||
node[amenity=cafe](${bounds});
|
node[amenity=cafe](${bounds});
|
||||||
`
|
`
|
||||||
} else {
|
} else {
|
||||||
var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');';
|
var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');';
|
||||||
var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');';
|
var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');';
|
||||||
var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');';
|
var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');';
|
||||||
query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;';
|
query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;';
|
||||||
|
|
||||||
}
|
}
|
||||||
resultUrl = baseUrl + query;
|
resultUrl = baseUrl + query;
|
||||||
// console.log("query url", resultUrl)
|
// console.log("query url", resultUrl)
|
||||||
return resultUrl;
|
return resultUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
const UseLocalJson = false;
|
const UseLocalJson = false;
|
||||||
|
|
||||||
const loadQueryPoints = () => {
|
const loadQueryPoints = () => {
|
||||||
|
|
||||||
if (UseLocalJson) {
|
if (UseLocalJson) {
|
||||||
displayPointsFromApi(geoDataJsonMock);
|
displayPointsFromApi(geoDataJsonMock);
|
||||||
} else {
|
} else {
|
||||||
loadOverpassQuery();
|
loadOverpassQuery();
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function loadedSuccess() {
|
function loadedSuccess() {
|
||||||
document.querySelector('#success_load').classList.add('visible')
|
document.querySelector('#success_load').classList.add('visible')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
document.querySelector('#success_load').classList.remove('visible')
|
document.querySelector('#success_load').classList.remove('visible')
|
||||||
}, 1000)
|
}, 1000)
|
||||||
$('#spinning_icon').fadeOut();
|
$('#spinning_icon').fadeOut();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let counterFeatures = 0;
|
||||||
|
let counterFeaturesHourMissing = 0;
|
||||||
|
let counterFeaturesCuisineMissing = 0;
|
||||||
function displayPointsFromApi(points) {
|
function displayPointsFromApi(points) {
|
||||||
|
|
||||||
var resultAsGeojson = osmtogeojson(points);
|
var resultAsGeojson = osmtogeojson(points);
|
||||||
var resultLayer = L.geoJson(resultAsGeojson, {
|
var resultLayer = L.geoJson(resultAsGeojson, {
|
||||||
style: function (feature) {
|
style: function (feature) {
|
||||||
return {color: '#ff0000'};
|
return {color: '#ff0000'};
|
||||||
},
|
},
|
||||||
filter: function (feature, layer) {
|
filter: function (feature, layer) {
|
||||||
var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon');
|
var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon');
|
||||||
if (isPolygon) {
|
if (isPolygon) {
|
||||||
feature.geometry.type = 'Point';
|
feature.geometry.type = 'Point';
|
||||||
var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter();
|
var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter();
|
||||||
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng];
|
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng];
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
onEachFeature: function (feature, layer) {
|
onEachFeature: function (feature, layer) {
|
||||||
var popupContent = '';
|
counterFeatures++
|
||||||
popupContent = popupContent + '<dt>@id</dt><dd>' + feature.properties.type + '/' + feature.properties.id + '</dd>';
|
var popupContent = '';
|
||||||
var keys = Object.keys(feature.properties.tags);
|
popupContent = popupContent + '<dt>@id</dt><dd>' + feature.properties.type + '/' + feature.properties.id + '</dd>';
|
||||||
keys.forEach(function (key) {
|
var keys = Object.keys(feature.properties.tags);
|
||||||
popupContent = popupContent + '<dt>' + key + '</dt><dd>' + feature.properties.tags[key] + '</dd>';
|
keys.forEach(function (key) {
|
||||||
});
|
popupContent = popupContent + '<dt>' + key + '</dt><dd>' + feature.properties.tags[key] + '</dd>';
|
||||||
popupContent = popupContent + '</dl>';
|
});
|
||||||
layer.bindPopup(popupContent);
|
popupContent = popupContent + '</dl>';
|
||||||
|
layer.bindPopup(popupContent);
|
||||||
|
|
||||||
let iconSiZePx = 20;
|
let iconSiZePx = 20;
|
||||||
|
|
||||||
if (feature.properties.tags['amenity'] && feature.properties.tags['amenity'] === 'restaurant' ||
|
if (feature.properties.tags['amenity'] && feature.properties.tags['amenity'] === 'restaurant' ||
|
||||||
feature.properties.tags['amenity'] === 'fast_food'
|
feature.properties.tags['amenity'] === 'fast_food'
|
||||||
) {
|
) {
|
||||||
iconSiZePx = 40;
|
iconSiZePx = 40;
|
||||||
}
|
}
|
||||||
|
|
||||||
let icon, cuisine, rest_name = '';
|
let icon, cuisine, rest_name = '';
|
||||||
if (feature.properties.tags['name'] !== undefined) {
|
if (feature.properties.tags['name'] !== undefined) {
|
||||||
rest_name = feature.properties.tags['name'];
|
rest_name = feature.properties.tags['name'];
|
||||||
} else {
|
} else {
|
||||||
rest_name = `<span class="unknown-name"> Nom inconnu, ${feature.properties.tags['amenity']}</span>`;
|
rest_name = `<span class="unknown-name"> Nom inconnu, ${feature.properties.tags['amenity']}</span>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof feature.properties.tags['cuisine'] !== typeof undefined && feature.properties.tags['cuisine'].length) {
|
if (typeof feature.properties.tags['cuisine'] !== typeof undefined && feature.properties.tags['cuisine'].length) {
|
||||||
|
|
||||||
let cooklist = feature.properties.tags['cuisine']
|
let cooklist = feature.properties.tags['cuisine']
|
||||||
// console.log('feature.properties.tags[\'cuisine\']', feature.properties.tags['cuisine'])
|
// console.log('feature.properties.tags[\'cuisine\']', feature.properties.tags['cuisine'])
|
||||||
if(cooklist){
|
if (cooklist) {
|
||||||
cuisine = `
|
cuisine = `
|
||||||
- cuisine:
|
- cuisine:
|
||||||
${cooklist}`;
|
${cooklist}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!cuisine){
|
if (!cuisine) {
|
||||||
cuisine = ' ';
|
cuisine = ' ';
|
||||||
}
|
counterFeaturesCuisineMissing++
|
||||||
let isOpen = false;
|
}
|
||||||
let opening, hours = '';
|
let isOpen = false;
|
||||||
// let isOpen = getIsOpenFromOpeningHours(feature.properties.tags)
|
let opening, hours = '';
|
||||||
if(feature.properties.tags.opening_hours){
|
// let isOpen = getIsOpenFromOpeningHours(feature.properties.tags)
|
||||||
isOpen = isLocationOpenNow(feature.properties.tags.opening_hours)
|
if (feature.properties.tags.opening_hours) {
|
||||||
}
|
isOpen = isLocationOpenNow(feature.properties.tags.opening_hours)
|
||||||
if(feature.properties.tags.opening_hours){
|
}
|
||||||
hours = feature.properties.tags.opening_hours
|
if (feature.properties.tags.opening_hours) {
|
||||||
}
|
hours = feature.properties.tags.opening_hours
|
||||||
if(hours){
|
}
|
||||||
|
if (hours) {
|
||||||
|
|
||||||
if(isOpen){
|
if (isOpen) {
|
||||||
isOpen = 'ouvert'
|
isOpen = 'ouvert'
|
||||||
} else {
|
} else {
|
||||||
isOpen = 'fermé'
|
isOpen = 'fermé'
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
isOpen = 'horaires non renseignées'
|
isOpen = 'horaires non renseignées'
|
||||||
}
|
}
|
||||||
if(isOpen){
|
if (isOpen) {
|
||||||
opening = `
|
opening = `
|
||||||
<span class="open">${isOpen}</span>
|
<span class="open">${isOpen}</span>
|
||||||
<span class="hours">
|
<span class="hours">
|
||||||
${hours}
|
${hours}
|
||||||
</span>
|
</span>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
let html = `
|
let html = `
|
||||||
<div class="label-content">
|
<div class="label-content">
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a>
|
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a>
|
||||||
@ -230,65 +238,97 @@ function displayPointsFromApi(points) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
L.marker(layer._latlng, {
|
L.marker(layer._latlng, {
|
||||||
icon: L.divIcon({
|
icon: L.divIcon({
|
||||||
iconUrl: 'https://www.cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
|
iconUrl: 'https://www.cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
|
||||||
className: 'label ' + makeCssClassFromTags(feature.properties.tags),
|
className: 'label ' + makeCssClassFromTags(feature.properties.tags),
|
||||||
// html : html,
|
// html : html,
|
||||||
iconSize: ['auto', 'auto'],
|
iconSize: ['auto', 'auto'],
|
||||||
}),
|
}),
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
var myIcon = L.icon({
|
var myIcon = L.icon({
|
||||||
iconUrl: 'https://www.cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
|
iconUrl: 'https://www.cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
|
||||||
iconSize: [iconSiZePx, iconSiZePx],
|
iconSize: [iconSiZePx, iconSiZePx],
|
||||||
iconAnchor: [iconSiZePx / 2, iconSiZePx / 2],
|
iconAnchor: [iconSiZePx / 2, iconSiZePx / 2],
|
||||||
popupAnchor: [iconSiZePx / 2, iconSiZePx / 2],
|
popupAnchor: [iconSiZePx / 2, iconSiZePx / 2],
|
||||||
className: makeCssClassFromTags(feature.properties.tags),
|
className: makeCssClassFromTags(feature.properties.tags),
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
let regular_marker = L.marker(layer._latlng, {title: rest_name, icon: myIcon}).addTo(map);
|
|
||||||
|
|
||||||
regular_marker.bindPopup(html);
|
let regular_marker = L.marker(layer._latlng, {title: rest_name, icon: myIcon}).addTo(map);
|
||||||
|
|
||||||
regular_marker.on({
|
regular_marker.bindPopup(html);
|
||||||
mouseover: function () {
|
|
||||||
this.openPopup();
|
regular_marker.on({
|
||||||
},
|
mouseover: function () {
|
||||||
mouseout: function () {
|
this.openPopup();
|
||||||
setTimeout(() => this.closePopup(), 3000);
|
|
||||||
},
|
|
||||||
click: function () {
|
|
||||||
this.openPopup();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// regular_marker.fire('mouseover');
|
|
||||||
},
|
},
|
||||||
});
|
mouseout: function () {
|
||||||
|
setTimeout(() => this.closePopup(), 3000);
|
||||||
|
},
|
||||||
|
click: function () {
|
||||||
|
this.openPopup();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ajout d'icone pour chaque restaurant où il manque l'horaire
|
||||||
|
*/
|
||||||
|
if (!feature.properties.tags.opening_hours) {
|
||||||
|
counterFeaturesHourMissing++
|
||||||
|
var missingHour = L.icon({
|
||||||
|
iconUrl: '/img/miss_hour.png',
|
||||||
|
iconSize: [iconSiZePx/3, iconSiZePx/3],
|
||||||
|
iconAnchor: [iconSiZePx / 2, iconSiZePx / 2],
|
||||||
|
className: makeCssClassFromTags(feature.properties.tags),
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
L.marker(
|
||||||
|
{
|
||||||
|
lat: layer._latlng.lat + 0.00002,
|
||||||
|
lng: layer._latlng.lng + 0.00001
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "horaire manquante",
|
||||||
|
icon: missingHour
|
||||||
|
}
|
||||||
|
).addTo(map);
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('counterFeatures', counterFeatures)
|
||||||
|
console.log('counterFeatures hour missing', counterFeaturesHourMissing)
|
||||||
|
console.log('counterFeatures cuisine missing', counterFeaturesCuisineMissing)
|
||||||
}
|
}
|
||||||
|
|
||||||
function makeCssClassFromTags(tags) {
|
function makeCssClassFromTags(tags) {
|
||||||
let tagKeys = Object.keys(tags);
|
let tagKeys = Object.keys(tags);
|
||||||
if (!tags) {
|
if (!tags) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
let listOfClasses = [];
|
let listOfClasses = [];
|
||||||
|
|
||||||
tagKeys.forEach((element) => {
|
tagKeys.forEach((element) => {
|
||||||
listOfClasses.push('tag-' + element + '_' + tags[element].replace(':', '--'));
|
listOfClasses.push('tag-' + element + '_' + tags[element].replace(':', '--'));
|
||||||
});
|
});
|
||||||
|
|
||||||
let isOpen = getIsOpenFromOpeningHours(tags)
|
let isOpen = getIsOpenFromOpeningHours(tags)
|
||||||
|
|
||||||
if (tags['opening_hours']) {
|
if (tags['opening_hours']) {
|
||||||
listOfClasses.push('tag-has-opening-hours')
|
listOfClasses.push('tag-has-opening-hours')
|
||||||
} else {
|
} else {
|
||||||
listOfClasses.push('tag-no-opening-hours')
|
listOfClasses.push('tag-no-opening-hours')
|
||||||
}
|
}
|
||||||
listOfClasses.push('is-open-today-'+isOpen)
|
listOfClasses.push('is-open-today-' + isOpen)
|
||||||
|
|
||||||
return listOfClasses.join(' ');
|
return listOfClasses.join(' ');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -299,45 +339,45 @@ function makeCssClassFromTags(tags) {
|
|||||||
* @returns {string}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
function getIsOpenFromOpeningHours(tags) {
|
function getIsOpenFromOpeningHours(tags) {
|
||||||
let isOpen = 'has-no-opening-hours';
|
let isOpen = 'has-no-opening-hours';
|
||||||
|
|
||||||
let currentDay = new Date();
|
let currentDay = new Date();
|
||||||
let daysArray = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
|
let daysArray = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
|
||||||
let todayInLetters = daysArray[currentDay.getDay()];
|
let todayInLetters = daysArray[currentDay.getDay()];
|
||||||
let todayInHour = daysArray[currentDay.getHours()];
|
let todayInHour = daysArray[currentDay.getHours()];
|
||||||
|
|
||||||
if (tags['opening_hours']) {
|
if (tags['opening_hours']) {
|
||||||
let opening_hours = tags['opening_hours'].trim();
|
let opening_hours = tags['opening_hours'].trim();
|
||||||
|
|
||||||
|
|
||||||
// trouver les sections séparées par des points virgule
|
// trouver les sections séparées par des points virgule
|
||||||
let sections = opening_hours.split(' ')
|
let sections = opening_hours.split(' ')
|
||||||
// séparer les sections d'ouverture par un espace entre la plage de jour et les heures
|
// séparer les sections d'ouverture par un espace entre la plage de jour et les heures
|
||||||
sections.map(part => {
|
sections.map(part => {
|
||||||
// prendre en compte les périodes de plusieurs jours Mo-Sa
|
// prendre en compte les périodes de plusieurs jours Mo-Sa
|
||||||
// prise en compte d'un seul jour à la fois
|
// prise en compte d'un seul jour à la fois
|
||||||
if (part.indexOf(todayInLetters)) {
|
if (part.indexOf(todayInLetters)) {
|
||||||
|
|
||||||
// voir si le jour actuel est inclus dans la section
|
// voir si le jour actuel est inclus dans la section
|
||||||
// voir si les horaires de ce jour sont dans le futur
|
// voir si les horaires de ce jour sont dans le futur
|
||||||
// dans ce cas le restaurant est ouvert, YES!
|
// dans ce cas le restaurant est ouvert, YES!
|
||||||
isOpen = 'is-open-this-day'
|
isOpen = 'is-open-this-day'
|
||||||
let splitDay = part.split('-')
|
let splitDay = part.split('-')
|
||||||
if (splitDay.length) {
|
if (splitDay.length) {
|
||||||
let start = splitDay[0]
|
let start = splitDay[0]
|
||||||
let end = splitDay[1]
|
let end = splitDay[1]
|
||||||
if (start.substring(0, 2) < todayInHour) {
|
if (start.substring(0, 2) < todayInHour) {
|
||||||
//sera ouvert aujourd'hui
|
//sera ouvert aujourd'hui
|
||||||
} else {
|
} else {
|
||||||
//était ouvert aujourd'hui
|
//était ouvert aujourd'hui
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// console.log(tags['opening_hours'], isOpen)
|
// console.log(tags['opening_hours'], isOpen)
|
||||||
return isOpen;
|
return isOpen;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -345,125 +385,125 @@ function getIsOpenFromOpeningHours(tags) {
|
|||||||
* @param {string} openingHours The value of the 'opening_hours' tag.
|
* @param {string} openingHours The value of the 'opening_hours' tag.
|
||||||
*/
|
*/
|
||||||
function isLocationOpenNow(openingHours) {
|
function isLocationOpenNow(openingHours) {
|
||||||
if(openingHours === '24/7'){
|
if (openingHours === '24/7') {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
const regex = /MO(\d+)-(\d+)|TU(\d+)-(\d+)|WE(\d+)-(\d+)|TH(\d+)-(\d+)|FR(\d+)-(\d+)|SA(\d+)-(\d+)|SU(\d+)-(\d+)/g;
|
const regex = /MO(\d+)-(\d+)|TU(\d+)-(\d+)|WE(\d+)-(\d+)|TH(\d+)-(\d+)|FR(\d+)-(\d+)|SA(\d+)-(\d+)|SU(\d+)-(\d+)/g;
|
||||||
const matches = Array.from(openingHours.matchAll(regex)).flat();
|
const matches = Array.from(openingHours.matchAll(regex)).flat();
|
||||||
|
|
||||||
const dayOfWeek = new Date().getDay();
|
const dayOfWeek = new Date().getDay();
|
||||||
const startTime = parseInt(matches[(dayOfWeek - 1) * 2]);
|
const startTime = parseInt(matches[(dayOfWeek - 1) * 2]);
|
||||||
const closeTime = parseInt(matches[(dayOfWeek - 1) * 2 + 1]);
|
const closeTime = parseInt(matches[(dayOfWeek - 1) * 2 + 1]);
|
||||||
|
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const openAt = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startTime);
|
const openAt = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startTime);
|
||||||
const closeAt = new Date(now.getFullYear(), now.getMonth(), now.getDate(), closeTime);
|
const closeAt = new Date(now.getFullYear(), now.getMonth(), now.getDate(), closeTime);
|
||||||
|
|
||||||
if (now >= openAt && now <= closeAt) {
|
if (now >= openAt && now <= closeAt) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function getIconFromTags(tags) {
|
function getIconFromTags(tags) {
|
||||||
let iconFileName = 'icon_restaurant.png';
|
let iconFileName = 'icon_restaurant.png';
|
||||||
|
|
||||||
if(!tags['cuisine']){
|
if (!tags['cuisine']) {
|
||||||
return iconFileName;
|
|
||||||
}
|
|
||||||
let firstCuisine = tags['cuisine'].split(';')[0];
|
|
||||||
if(!firstCuisine){
|
|
||||||
firstCuisine = tags['cuisine']
|
|
||||||
}
|
|
||||||
|
|
||||||
if (tags['man_made']) {
|
|
||||||
iconFileName = 'fountain.png';
|
|
||||||
} else if (tags['shop']) {
|
|
||||||
iconFileName = 'croissant.png';
|
|
||||||
} else if (tags['amenity']) {
|
|
||||||
if (tags['amenity'] === 'restaurant') {
|
|
||||||
|
|
||||||
|
|
||||||
if (firstCuisine === 'pizza') {
|
|
||||||
iconFileName = 'pizza.png';
|
|
||||||
}
|
|
||||||
if (firstCuisine === 'italian') {
|
|
||||||
iconFileName = 'pizza.png';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (firstCuisine === 'japanese') {
|
|
||||||
iconFileName = 'asian_food.png';
|
|
||||||
}
|
|
||||||
if (firstCuisine === 'thai') {
|
|
||||||
iconFileName = 'pad-thai.png';
|
|
||||||
}
|
|
||||||
if (firstCuisine === 'thaï') {
|
|
||||||
iconFileName = 'pad-thai.png';
|
|
||||||
}
|
|
||||||
if (firstCuisine === 'crepe') {
|
|
||||||
iconFileName = 'crepe.png';
|
|
||||||
}
|
|
||||||
if (firstCuisine === 'crepes') {
|
|
||||||
iconFileName = 'crepe.png';
|
|
||||||
}
|
|
||||||
if (firstCuisine === 'sushi') {
|
|
||||||
iconFileName = 'asian_food.png';
|
|
||||||
}
|
|
||||||
if (firstCuisine === 'asian') {
|
|
||||||
iconFileName = 'asian_food.png';
|
|
||||||
}
|
|
||||||
if (firstCuisine === '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.jpg';
|
|
||||||
}
|
|
||||||
else if (tags['amenity'] === 'bar') {
|
|
||||||
iconFileName = 'beer.jpg';
|
|
||||||
}
|
|
||||||
else if (tags['amenity'] === 'fast_food') {
|
|
||||||
iconFileName = 'burger.png';
|
|
||||||
if (firstCuisine === 'pizza') {
|
|
||||||
iconFileName = 'pizza.png';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return iconFileName;
|
return iconFileName;
|
||||||
|
}
|
||||||
|
let firstCuisine = tags['cuisine'].split(';')[0];
|
||||||
|
if (!firstCuisine) {
|
||||||
|
firstCuisine = tags['cuisine']
|
||||||
|
|
||||||
|
}
|
||||||
|
if(cuisineSet.indexOf(firstCuisine) === -1) {
|
||||||
|
cuisineSet.push(firstCuisine)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tags['man_made']) {
|
||||||
|
iconFileName = 'fountain.png';
|
||||||
|
} else if (tags['shop']) {
|
||||||
|
iconFileName = 'croissant.png';
|
||||||
|
} else if (tags['amenity']) {
|
||||||
|
if (tags['amenity'] === 'restaurant') {
|
||||||
|
|
||||||
|
|
||||||
|
if (firstCuisine === 'pizza') {
|
||||||
|
iconFileName = 'pizza.png';
|
||||||
|
}
|
||||||
|
if (firstCuisine === 'italian') {
|
||||||
|
iconFileName = 'pizza.png';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (firstCuisine === 'japanese') {
|
||||||
|
iconFileName = 'asian_food.png';
|
||||||
|
}
|
||||||
|
if (firstCuisine === 'thai') {
|
||||||
|
iconFileName = 'pad-thai.png';
|
||||||
|
}
|
||||||
|
if (firstCuisine === 'thaï') {
|
||||||
|
iconFileName = 'pad-thai.png';
|
||||||
|
}
|
||||||
|
if (firstCuisine === 'crepe') {
|
||||||
|
iconFileName = 'crepe.png';
|
||||||
|
}
|
||||||
|
if (firstCuisine === 'crepes') {
|
||||||
|
iconFileName = 'crepe.png';
|
||||||
|
}
|
||||||
|
if (firstCuisine === 'sushi') {
|
||||||
|
iconFileName = 'asian_food.png';
|
||||||
|
}
|
||||||
|
if (firstCuisine === 'asian') {
|
||||||
|
iconFileName = 'asian_food.png';
|
||||||
|
}
|
||||||
|
if (firstCuisine === '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.jpg';
|
||||||
|
} else if (tags['amenity'] === 'bar') {
|
||||||
|
iconFileName = 'beer.jpg';
|
||||||
|
} else if (tags['amenity'] === 'fast_food') {
|
||||||
|
iconFileName = 'burger.png';
|
||||||
|
if (firstCuisine === 'pizza') {
|
||||||
|
iconFileName = 'pizza.png';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return iconFileName;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let isLoading = false;
|
let isLoading = false;
|
||||||
|
|
||||||
function removeOlderPoints() {
|
function removeOlderPoints() {
|
||||||
// L.clearLayers()
|
// L.clearLayers()
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadOverpassQuery() {
|
function loadOverpassQuery() {
|
||||||
|
|
||||||
// ne pas charger si on recherche déjà
|
// ne pas charger si on recherche déjà
|
||||||
if (!isLoading) {
|
if (!isLoading) {
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
$('#spinning_icon').fadeIn();
|
$('#spinning_icon').fadeIn();
|
||||||
var queryTextfieldValue = $('#query-textfield').val();
|
var queryTextfieldValue = $('#query-textfield').val();
|
||||||
var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue);
|
var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue);
|
||||||
|
|
||||||
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
|
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
|
||||||
|
|
||||||
removeOlderPoints()
|
removeOlderPoints()
|
||||||
displayPointsFromApi(geoDataPointsFromApi);
|
displayPointsFromApi(geoDataPointsFromApi);
|
||||||
|
|
||||||
loadedSuccess();
|
console.log('cuisineSet', new Set(cuisineSet))
|
||||||
isLoading = false;
|
loadedSuccess();
|
||||||
}); // end of the getting from overpass API
|
isLoading = false;
|
||||||
}
|
}); // end of the getting from overpass API
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('loadQueryPoints', loadQueryPoints);
|
console.log('loadQueryPoints', loadQueryPoints);
|
||||||
@ -475,14 +515,14 @@ $('#spinning_icon').hide();
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
$('#query-button').click(function () {
|
$('#query-button').click(function () {
|
||||||
loadOverpassQuery();
|
loadOverpassQuery();
|
||||||
});
|
});
|
||||||
$('#toggle_cafe').click(function () {
|
$('#toggle_cafe').click(function () {
|
||||||
toggleFilter('cafe');
|
toggleFilter('cafe');
|
||||||
});
|
});
|
||||||
$('#toggle_restaurant').click(function () {
|
$('#toggle_restaurant').click(function () {
|
||||||
toggleFilter('restaurant');
|
toggleFilter('restaurant');
|
||||||
});
|
});
|
||||||
$('#toggle_fast_food').click(function () {
|
$('#toggle_fast_food').click(function () {
|
||||||
toggleFilter('fast_food');
|
toggleFilter('fast_food');
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue
Block a user