diff --git a/.gitignore b/.gitignore index a37ba14..7ce9755 100644 --- a/.gitignore +++ b/.gitignore @@ -130,4 +130,6 @@ dmypy.json .idea .vscode -*.code-workspace \ No newline at end of file +*.code-workspace + +osm_data.geojson \ No newline at end of file diff --git a/static/data/layers.js b/static/data/layers.js new file mode 100644 index 0000000..a7bb605 --- /dev/null +++ b/static/data/layers.js @@ -0,0 +1,718 @@ +export default { + "version":8, + "metadata":{ + "maputnik:renderer":"mbgljs" + }, + "sources":{ + "osmTiles":{ + "type":"raster", + "tiles":[ + "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png", + "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png", + "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png" + ], + "tileSize":256, + "maxzoom":19, + "paint":{ + "raster-fade-duration":100 + }, + "attribution":"data © OpenStreetMap contributors." + }, + "mediaWikiTiles":{ + "type":"raster", + "tiles":[ + "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png?lang=uk" + ], + "tileSize":256, + "maxzoom":19, + "paint":{ + "raster-fade-duration":100 + }, + "attribution":"map: WikiMedia; data: © OpenStreetMap contributors." + }, + "osmData":{ + "type":"geojson", + "data":"https://dopomoha.pl/data/osm_data.geojson", + "maxzoom":12 + }, + "charityDropOff":{ + "type":"geojson", + "data":"https://dopomoha.pl/data/zbiorki.geojson", + "maxzoom":12 + }, + "mapboxSatellite":{ + "type":"raster", + "tiles":[ + "https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoidHQtb3NtcCIsImEiOiJjbDA2bmNzcTcwM3M2M2NsdmZnM2EzcGF2In0.IXOLX5Xw_C9wf0JyL3v6Yw" + ], + "tileSize":256, + "maxzoom":19, + "paint":{ + "raster-fade-duration":100 + }, + "attribution":"`data © © Mapbox © OpenStreetMap Improve this map © Maxar`" + } + }, + "glyphs":"https://fonts.openmaptiles.org/{fontstack}/{range}.pbf", + "layers":[ + { + "id":"mapboxSatellite", + "type":"raster", + "source":"mapboxSatellite", + "minZoom":0, + "maxZoom":19, + "layout":{ + "visibility":"none" + }, + "metadata":{ + "group":"mapboxSatellite", + "name":{ + "pl":"Satelita", + "uk":"Cупутник", + "en":"Satellite" + } + } + }, + { + "id":"background", + "type":"raster", + "metadata":{ + "group":"background", + "name":{ + "pl":"OSM Carto", + "en":"OSM Carto", + "uk":"OSM Carto" + } + }, + "source":"osmTiles", + "layout":{ + "visibility":"visible" + } + }, + { + "id":"helpPointsCircles", + "type":"circle", + "metadata":{ + "group":"helpPoints", + "name":{ + "pl":"Punkty recepcyjne", + "en":"Reception points", + "uk":"Прийомні пункти" + } + }, + "source":"osmData", + "filter":[ + "all", + [ + "==", + [ + "get", + "social_facility" + ], + "outreach" + ], + [ + "==", + [ + "get", + "social_facility:for" + ], + "refugee" + ] + ], + "layout":{ + "visibility":"visible" + }, + "paint":{ + "circle-color":"#ffd500", + "circle-radius":12, + "circle-stroke-color":"#fff", + "circle-stroke-width":3 + } + }, + { + "id":"helpPointsLabels", + "type":"symbol", + "metadata":{ + "group":"helpPoints", + "name":{ + "pl":"Punkty recepcyjne", + "en":"Reception points", + "uk":"Прийомні пункти" + } + }, + "source":"osmData", + "minzoom":5, + "filter":[ + "all", + [ + "==", + [ + "get", + "social_facility" + ], + "outreach" + ], + [ + "==", + [ + "get", + "social_facility:for" + ], + "refugee" + ] + ], + "layout":{ + "text-field":"{name:pl}", + "text-offset":[ + 0, + 3 + ], + "text-size":10, + "text-font":[ + "Open Sans Bold" + ], + "text-letter-spacing":0.05, + "visibility":"visible" + }, + "paint":{ + "text-color":"#050505", + "text-halo-color":"rgba(255, 255, 255, 0.9)", + "text-halo-width":2 + } + }, + { + "id":"informationPointsCircles", + "type":"circle", + "metadata":{ + "group":"informationPoints", + "name":{ + "pl":"Punkty informacyjne", + "en":"Information points", + "uk":"Інформаційні пункти" + } + }, + "source":"osmData", + "filter":[ + "==", + [ + "get", + "information:for" + ], + "refugees" + ], + "layout":{ + "visibility":"visible" + }, + "paint":{ + "circle-color":"#ffee00", + "circle-radius":9, + "circle-stroke-color":"#fff", + "circle-stroke-width":2 + } + }, + { + "id":"informationPointsLabels", + "type":"symbol", + "metadata":{ + "group":"informationPoints", + "name":{ + "pl":"Punkty informacyjne", + "en":"Information points", + "uk":"Інформаційні пункти" + } + }, + "source":"osmData", + "minzoom":5, + "filter":[ + "==", + [ + "get", + "information:for" + ], + "refugees" + ], + "layout":{ + "text-field":"{name:pl}", + "text-offset":[ + 0, + 3 + ], + "text-size":10, + "text-font":[ + "Open Sans Bold" + ], + "text-letter-spacing":0.05, + "visibility":"visible" + }, + "paint":{ + "text-color":"#050505", + "text-halo-color":"rgba(255, 255, 255, 0.9)", + "text-halo-width":2 + } + }, + { + "id":"bloodDonationCircles", + "type":"circle", + "metadata":{ + "group":"bloodDonation", + "name":{ + "pl":"Punkty oddawania krwi", + "en":"Blood donation points", + "uk":"Пункти здачі крові" + } + }, + "source":"osmData", + "filter":[ + "==", + [ + "get", + "healthcare" + ], + "blood_donation" + ], + "layout":{ + "visibility":"none" + }, + "paint":{ + "circle-color":"#990000", + "circle-radius":6, + "circle-stroke-color":"#fff", + "circle-stroke-width":2 + } + }, + { + "id":"bloodDonationLabels", + "type":"symbol", + "metadata":{ + "group":"bloodDonation", + "name":{ + "pl":"Punkty oddawania krwi", + "en":"Blood donation points", + "uk":"Пункти здачі крові" + } + }, + "source":"osmData", + "minzoom":5, + "filter":[ + "==", + [ + "get", + "healthcare" + ], + "blood_donation" + ], + "layout":{ + "text-field":"{name:pl}", + "text-offset":[ + 0, + 3 + ], + "text-size":7, + "text-font":[ + "Open Sans Bold" + ], + "text-letter-spacing":0.05, + "visibility":"none" + }, + "paint":{ + "text-color":"#050505", + "text-halo-color":"rgba(255, 255, 255, 0.9)", + "text-halo-width":2 + } + }, + { + "id":"socialFacilitiesCircles", + "type":"circle", + "metadata":{ + "group":"socialFacilities", + "name":{ + "pl":"Placówki opieki społecznej", + "en":"Social facilities", + "uk":"Установи соціальної опіки" + } + }, + "source":"osmData", + "filter":[ + "any", + [ + "in", + [ + "get", + "social_facility" + ], + [ + "literal", + [ + "shelter", + "food_bank", + "soup_kitchen" + ] + ] + ], + [ + "==", + [ + "get", + "social_facility:for" + ], + "refugees" + ] + ], + "layout":{ + "visibility":"visible" + }, + "paint":{ + "circle-color":"#00d5ff", + "circle-radius":7, + "circle-stroke-color":"#fff", + "circle-stroke-width":2 + } + }, + { + "id":"socialFacilitiesLabels", + "type":"symbol", + "metadata":{ + "group":"socialFacilities", + "name":{ + "pl":"Placówki opieki społecznej", + "en":"Social facilities", + "uk":"Установи соціальної опіки" + } + }, + "source":"osmData", + "minzoom":5, + "filter":[ + "any", + [ + "in", + [ + "get", + "social_facility" + ], + [ + "literal", + [ + "shelter", + "food_bank", + "soup_kitchen" + ] + ] + ], + [ + "==", + [ + "get", + "social_facility:for" + ], + "refugees" + ] + ], + "layout":{ + "text-field":"{name:pl}", + "text-offset":[ + 0, + 3 + ], + "text-size":8, + "text-font":[ + "Open Sans Bold" + ], + "text-letter-spacing":0.05, + "visibility":"visible" + }, + "paint":{ + "text-color":"#050505", + "text-halo-color":"rgba(255, 255, 255, 0.9)", + "text-halo-width":2 + } + }, + { + "id":"pharmaciesCircles", + "type":"circle", + "metadata":{ + "group":"pharmacies", + "name":{ + "pl":"Apteki", + "en":"Pharmacies", + "uk":"Аптеки" + } + }, + "source":"osmData", + "filter":[ + "==", + [ + "get", + "amenity" + ], + "pharmacy" + ], + "layout":{ + "visibility":"none" + }, + "paint":{ + "circle-color":"#880044", + "circle-radius":5, + "circle-stroke-color":"#fff", + "circle-stroke-width":1 + } + }, + { + "id":"pharmaciesLabels", + "type":"symbol", + "metadata":{ + "group":"pharmacies", + "name":{ + "pl":"Apteki", + "en":"Pharmacies", + "uk":"Аптеки" + } + }, + "source":"osmData", + "minzoom":5, + "filter":[ + "==", + [ + "get", + "amenity" + ], + "pharmacy" + ], + "layout":{ + "text-field":"{name:pl}", + "text-offset":[ + 0, + 3 + ], + "text-size":7, + "text-font":[ + "Open Sans Bold" + ], + "text-letter-spacing":0.05, + "visibility":"none" + }, + "paint":{ + "text-color":"#050505", + "text-halo-color":"rgba(255, 255, 255, 0.9)", + "text-halo-width":2 + } + }, + { + "id":"hospitalsCircles", + "type":"circle", + "metadata":{ + "group":"hospitals", + "name":{ + "pl":"Szpitale", + "en":"Hospitals", + "uk":"Лікарні" + } + }, + "source":"osmData", + "filter":[ + "==", + [ + "get", + "amenity" + ], + "hospital" + ], + "layout":{ + "visibility":"none" + }, + "paint":{ + "circle-color":"#ff1111", + "circle-radius":8, + "circle-stroke-color":"#fff", + "circle-stroke-width":2 + } + }, + { + "id":"hospitalsLabels", + "type":"symbol", + "metadata":{ + "group":"hospitals", + "name":{ + "pl":"Szpitale", + "en":"Hospitals", + "uk":"Лікарні" + } + }, + "source":"osmData", + "minzoom":5, + "filter":[ + "==", + [ + "get", + "amenity" + ], + "hospital" + ], + "layout":{ + "text-field":"{name:pl}", + "text-offset":[ + 0, + 3 + ], + "text-size":8, + "text-font":[ + "Open Sans Bold" + ], + "text-letter-spacing":0.05, + "visibility":"none" + }, + "paint":{ + "text-color":"#050505", + "text-halo-color":"rgba(255, 255, 255, 0.9)", + "text-halo-width":2 + } + }, + { + "id":"diplomaticCircles", + "type":"circle", + "metadata":{ + "group":"diplomatic", + "name":{ + "pl":"Konsulaty", + "en":"Consulates", + "uk":"консульства" + } + }, + "source":"osmData", + "filter":[ + "all", + [ + "==", + [ + "get", + "office" + ], + "diplomatic" + ], + [ + "==", + [ + "get", + "country" + ], + "UA" + ] + ], + "layout":{ + "visibility":"visible" + }, + "paint":{ + "circle-color":"#446688", + "circle-radius":10, + "circle-stroke-color":"#fff", + "circle-stroke-width":2 + } + }, + { + "id":"diplomaticLabels", + "type":"symbol", + "metadata":{ + "group":"diplomatic", + "name":{ + "pl":"Konsulaty", + "en":"Consulates", + "uk":"консульства" + } + }, + "source":"osmData", + "minzoom":5, + "filter":[ + "all", + [ + "==", + [ + "get", + "office" + ], + "diplomatic" + ], + [ + "==", + [ + "get", + "country" + ], + "UA" + ] + ], + "layout":{ + "text-field":"{name:pl}", + "text-offset":[ + 0, + 3 + ], + "text-size":8, + "text-font":[ + "Open Sans Bold" + ], + "text-letter-spacing":0.05, + "visibility":"visible" + }, + "paint":{ + "text-color":"#050505", + "text-halo-color":"rgba(255, 255, 255, 0.9)", + "text-halo-width":2 + } + }, + { + "id":"charityDropOffCircles", + "type":"circle", + "metadata":{ + "group":"charityDropOff", + "name":{ + "pl":"Punkty zbiórek charytatywnych", + "en":"Donation drop points", + "uk":"Благодійні пункти збору" + } + }, + "source":"charityDropOff", + "layout":{ + "visibility":"visible" + }, + "paint":{ + "circle-color":"#11ee11", + "circle-radius":7, + "circle-stroke-color":"#fff", + "circle-stroke-width":2 + } + }, + { + "id":"charityDropOffLabels", + "type":"symbol", + "metadata":{ + "group":"charityDropOff", + "name":{ + "pl":"Punkty zbiórek charytatywnych", + "en":"Donation drop points", + "uk":"Благодійні пункти збору" + } + }, + "source":"charityDropOff", + "minzoom":5, + "layout":{ + "text-field":"Punkt zbiórki charytatywnej \n {Name}", + "text-offset":[ + 0, + 3.5 + ], + "text-size":8, + "text-font":[ + "Open Sans Bold" + ], + "text-letter-spacing":0.05, + "visibility":"visible" + }, + "paint":{ + "text-color":"#050505", + "text-halo-color":"rgba(255, 255, 255, 0.9)", + "text-halo-width":2 + } + } + ], + "id":"53fam6b4c" +} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 390bd0b..f976e07 100644 --- a/templates/index.html +++ b/templates/index.html @@ -103,7 +103,7 @@
- + @@ -130,11 +130,11 @@

{{ strings.layers[lang] }}

- -
@@ -155,7 +155,7 @@
- + diff --git a/templates/map.js b/templates/map.js index 1951d6f..fb02ce6 100644 --- a/templates/map.js +++ b/templates/map.js @@ -1,30 +1,29 @@ -var language = '{{ lang }}'; - -const customLayerURL = "{{ url_for('static', filename='custom.geojson') }}"; -const osmLayerURL = "{{ url_for('get_osm_data_geojson') }}"; - -const textLayerDefaultLayoutParams = { - 'text-font': ['Open Sans Bold'], - 'text-letter-spacing': 0.05, -}; -const textLayerDefaultPaint = { - 'text-color': '#050505', - 'text-halo-color': 'rgba(255, 255, 255, 0.9)', - 'text-halo-width': 2, -}; +import layers from '../static/data/layers.js' const controlsLocation = 'bottom-right'; -const layersDict = { - background: 'background', - helpPoints: 'helpPoints', - informationPoints: 'informationPoints', - bloodDonation: 'bloodDonation', - socialFacilities: 'socialFacilities', - pharmacies: 'pharmacies', - hospitals: 'hospitals', - diplomatic: 'diplomatic', - charityDropOff: 'charityDropOff', +const LANG = '{{lang}}' + +function getLayersState(layers, lang) { + const layersDefinitions = {}; + const layersVisibilityState = {}; + layers.forEach(layer => { + const { group } = layer.metadata; + const { visibility } = layer.layout; + if(!layersDefinitions[group]) { + layersVisibilityState[group] = visibility === 'visible'; + } + if(layersDefinitions[group]) { + layersDefinitions[group].layers.push(layer); + return + } + layersDefinitions[group] = { + layers: [layer], + id: group, + name: layer.metadata.name[lang], + } + }); + return {layersDefinitions, layersVisibilityState}; } const layersColoursDict = { @@ -39,347 +38,12 @@ const layersColoursDict = { charityDropOff: '#11ee11', } -const layersVisibilityOnInit = { - [layersDict.background]: true, - [layersDict.helpPoints]: true, - [layersDict.informationPoints]: true, - [layersDict.bloodDonation]: false, - [layersDict.socialFacilities]: true, - [layersDict.pharmacies]: false, - [layersDict.hospitals]: false, - [layersDict.diplomatic]: true, - [layersDict.charityDropOff]: true, -} - -function getIsLayerVisibleOnInit(id) { - return layersVisibilityOnInit[id] ? 'visible' : 'none'; -} +const {layersDefinitions, layersVisibilityState} = getLayersState(layers.layers, LANG); +const layersArray = Object.keys(layersDefinitions).map(id => layersDefinitions[id]); const sidebarDivId = 'sidebar-div'; -const usedLayersIds = [ - layersDict.background, - layersDict.helpPoints, - layersDict.informationPoints, - layersDict.bloodDonation, - layersDict.socialFacilities, - layersDict.pharmacies, - layersDict.hospitals, - layersDict.diplomatic, - layersDict.charityDropOff, -]; - -const layersDefinitions = { - [layersDict.background]: { - layers: [ - { - id: layersDict.background, - type: 'raster', - source: 'osmTiles', - minZoom: 0, - maxZoom: 19, - layout: { - visibility: getIsLayerVisibleOnInit(layersDict.background) - } - }, - ], - name: 'OSM Carto {{ strings.map[lang] }}', - id: layersDict.background, - before: layersDict.helpPoints - }, - [layersDict.helpPoints]: { - layers: [ - { - id: `${layersDict.helpPoints}Circles`, - type: 'circle', - source: 'osmData', - paint: { - 'circle-color': layersColoursDict.helpPoints, - 'circle-radius': 12, - 'circle-stroke-color': '#fff', - 'circle-stroke-width': 3, - }, - layout: { - visibility: getIsLayerVisibleOnInit(layersDict.helpPoints) - }, - filter: ['all', ['==', ['get', 'social_facility'], 'outreach'], ['==', ['get', 'social_facility:for'], 'refugee']], - }, - { - id: `${layersDict.helpPoints}Labels`, - type: 'symbol', - source: 'osmData', - minzoom: 5, - layout: { - 'text-field': '{name:{{ lang }}}', - 'text-offset': [0, 3], - 'text-size': 10, - ...textLayerDefaultLayoutParams, - visibility: getIsLayerVisibleOnInit(layersDict.helpPoints) - }, - paint: textLayerDefaultPaint, - filter: ['all', ['==', ['get', 'social_facility'], 'outreach'], ['==', ['get', 'social_facility:for'], 'refugee']], - }, - ], - name: '{{ strings.reception_points[lang] }}', - id: layersDict.helpPoints, - }, - [layersDict.informationPoints]: { - layers: [ - { - id: `${layersDict.informationPoints}Circles`, - type: 'circle', - source: 'osmData', - paint: { - 'circle-color': layersColoursDict.informationPoints, - 'circle-radius': 9, - 'circle-stroke-color': '#fff', - 'circle-stroke-width': 2, - }, - layout: { - visibility: getIsLayerVisibleOnInit(layersDict.informationPoints) - }, - filter: ['==', ['get', 'information:for'], 'refugees'], - }, { - id: `${layersDict.informationPoints}Labels`, - type: 'symbol', - source: 'osmData', - minzoom: 5, - layout: { - 'text-field': '{name:{{ lang }}}', - 'text-offset': [0, 3], - 'text-size': 10, - ...textLayerDefaultLayoutParams, - visibility: getIsLayerVisibleOnInit(layersDict.informationPoints) - }, - paint: textLayerDefaultPaint, - filter: ['==', ['get', 'information:for'], 'refugees'], - }, - ], - name: '{{ strings.information_points[lang] }}', - id: layersDict.informationPoints, - }, - [layersDict.bloodDonation]: { - layers: [ - { - id: `${layersDict.bloodDonation}Circles`, - type: 'circle', - source: 'osmData', - paint: { - 'circle-color': layersColoursDict.bloodDonation, - 'circle-radius': 6, - 'circle-stroke-color': '#fff', - 'circle-stroke-width': 2, - }, - layout: { - visibility: getIsLayerVisibleOnInit(layersDict.bloodDonation) - }, - filter: ['==', ['get', 'healthcare'], 'blood_donation'], - }, { - id: `${layersDict.bloodDonation}Labels`, - type: 'symbol', - source: 'osmData', - minzoom: 5, - layout: { - 'text-field': '{name:{{ lang }}}', - 'text-offset': [0, 3], - 'text-size': 7, - ...textLayerDefaultLayoutParams, - visibility: getIsLayerVisibleOnInit(layersDict.bloodDonation) - }, - paint: textLayerDefaultPaint, - filter: ['==', ['get', 'healthcare'], 'blood_donation'], - }, - ], - name: '{{ strings.blood_donation[lang] }}', - id: layersDict.bloodDonation, - }, - [layersDict.socialFacilities]: { - layers: [ - { - id: `${layersDict.socialFacilities}Circles`, - type: 'circle', - source: 'osmData', - paint: { - 'circle-color': layersColoursDict.socialFacilities, - 'circle-radius': 7, - 'circle-stroke-color': '#fff', - 'circle-stroke-width': 2, - }, - layout: { - visibility: getIsLayerVisibleOnInit(layersDict.socialFacilities) - }, - filter: [ - 'any', - ['in', ['get', 'social_facility'], ['literal', ['shelter', 'food_bank', 'soup_kitchen']]], - ['==', ['get', 'social_facility:for'], 'refugees'], - ], - }, { - id: `${layersDict.socialFacilities}Labels`, - type: 'symbol', - source: 'osmData', - minzoom: 5, - layout: { - 'text-field': '{name:{{ lang }}}', - 'text-offset': [0, 3], - 'text-size': 8, - ...textLayerDefaultLayoutParams, - visibility: getIsLayerVisibleOnInit(layersDict.socialFacilities) - }, - paint: textLayerDefaultPaint, - filter: [ - 'any', - ['in', ['get', 'social_facility'], ['literal', ['shelter', 'food_bank', 'soup_kitchen']]], - ['==', ['get', 'social_facility:for'], 'refugees'], - ], - }, - ], - name: '{{ strings.social_facilities[lang] }}', - id: layersDict.socialFacilities, - }, - [layersDict.pharmacies]: { - layers: [ - { - id: `${layersDict.pharmacies}Circles`, - type: 'circle', - source: 'osmData', - paint: { - 'circle-color': layersColoursDict.pharmacies, - 'circle-radius': 5, - 'circle-stroke-color': '#fff', - 'circle-stroke-width': 1, - }, - layout: { - visibility: getIsLayerVisibleOnInit(layersDict.pharmacies) - }, - filter: ['==', ['get', 'amenity'], 'pharmacy'], - }, { - id: `${layersDict.pharmacies}Labels`, - type: 'symbol', - source: 'osmData', - minzoom: 5, - layout: { - 'text-field': '{name:{{ lang }}}', - 'text-offset': [0, 3], - 'text-size': 7, - ...textLayerDefaultLayoutParams, - visibility: getIsLayerVisibleOnInit(layersDict.pharmacies) - }, - paint: textLayerDefaultPaint, - filter: ['==', ['get', 'amenity'], 'pharmacy'], - }, - ], - name: '{{ strings.pharmacies[lang] }}', - id: layersDict.pharmacies, - }, - [layersDict.hospitals]: { - layers: [ - { - id: `${layersDict.hospitals}Circles`, - type: 'circle', - source: 'osmData', - paint: { - 'circle-color': layersColoursDict.hospitals, - 'circle-radius': 8, - 'circle-stroke-color': '#fff', - 'circle-stroke-width': 2, - }, - layout: { - visibility: getIsLayerVisibleOnInit(layersDict.hospitals) - }, - filter: ['==', ['get', 'amenity'], 'hospital'], - }, { - id: `${layersDict.hospitals}Labels`, - type: 'symbol', - source: 'osmData', - minzoom: 5, - layout: { - 'text-field': '{name:{{ lang }}}', - 'text-offset': [0, 3], - 'text-size': 8, - ...textLayerDefaultLayoutParams, - visibility: getIsLayerVisibleOnInit(layersDict.hospitals) - }, - paint: textLayerDefaultPaint, - filter: ['==', ['get', 'amenity'], 'hospital'], - }, - ], - name: '{{ strings.hospitals[lang] }}', - id: layersDict.hospitals, - }, - [layersDict.diplomatic]: { - layers: [ - { - id: `${layersDict.diplomatic}Circles`, - type: 'circle', - source: 'osmData', - paint: { - 'circle-color': layersColoursDict.diplomatic, - 'circle-radius': 10, - 'circle-stroke-color': '#fff', - 'circle-stroke-width': 2, - }, - layout: { - visibility: getIsLayerVisibleOnInit(layersDict.diplomatic) - }, - filter: ['all', ['==', ['get', 'office'], 'diplomatic'], ['==', ['get', 'country'], 'UA']], - }, { - id: `${layersDict.diplomatic}Labels`, - type: 'symbol', - source: 'osmData', - minzoom: 5, - layout: { - 'text-field': '{name:{{ lang }}}', - 'text-offset': [0, 3], - 'text-size': 8, - ...textLayerDefaultLayoutParams, - visibility: getIsLayerVisibleOnInit(layersDict.diplomatic) - }, - paint: textLayerDefaultPaint, - filter: ['all', ['==', ['get', 'office'], 'diplomatic'], ['==', ['get', 'country'], 'UA']], - }, - ], - name: '{{ strings.consulate[lang] }}', - id: layersDict.diplomatic, - }, - [layersDict.charityDropOff]: { - layers: [ - { - id: `${layersDict.charityDropOff}Circles`, - type: 'circle', - source: 'charityDropOff', - paint: { - 'circle-color': layersColoursDict.charityDropOff, - 'circle-radius': 7, - 'circle-stroke-color': '#fff', - 'circle-stroke-width': 2, - }, - layout: { - visibility: getIsLayerVisibleOnInit(layersDict.charityDropOff) - }, - }, { - id: `${layersDict.charityDropOff}Labels`, - type: 'symbol', - source: 'charityDropOff', - minzoom: 5, - layout: { - 'text-field': '{{ strings.charity_drop_off_singular[lang] }} \n {Name}', - 'text-offset': [0, 3.5], - 'text-size': 8, - ...textLayerDefaultLayoutParams, - visibility: getIsLayerVisibleOnInit(layersDict.charityDropOff) - }, - paint: textLayerDefaultPaint, - }, - ], - name: '{{ strings.charity_drop_off[lang] }}', - id: layersDict.charityDropOff, - }, -}; - -const usedLayersDefs = usedLayersIds.map(layerId => layersDefinitions[layerId]); -const separatedLayersDefs = usedLayersDefs.reduce((acc, layer) => [...acc, ...layer.layers], []); - -var map = new maplibregl.Map({ +const map = new maplibregl.Map({ container: 'map', // container id center: [24.055, 50.538], // starting position [lng, lat] zoom: 7, // starting zoom @@ -387,55 +51,7 @@ var map = new maplibregl.Map({ maxPitch: 0, dragRotate: false, hash: 'map', - style: { - version: 8, - glyphs: "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf", - sources: { - osmTiles: { - type: 'raster', - tiles: [ - 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', - 'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png', - 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png' - ], - tileSize: 256, - maxzoom: 19, - paint: { - 'raster-fade-duration': 100 - }, - attribution: `data © OpenStreetMap contributors.`, - }, - mediaWikiTiles: { - type: 'raster', - tiles: [ - 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png?lang=uk' - ], - tileSize: 256, - maxzoom: 19, - paint: { - 'raster-fade-duration': 100 - }, - attribution: `map: WikiMedia; data: © OpenStreetMap contributors.`, - }, - custom: { - type: 'geojson', - data: customLayerURL, - maxzoom: 12, - generateId: true, - }, - osmData: { - type: 'geojson', - data: osmLayerURL, - maxzoom: 12, - }, - charityDropOff: { - type: 'geojson', - data: 'https://dopomoha.pl/data/zbiorki.geojson', - maxzoom: 12, - }, - }, - layers: separatedLayersDefs, - }, + style: layers }); // controlls stuff @@ -461,20 +77,20 @@ map.addControl(geolocate, controlsLocation); // user interaction stuff // ---------------- -Object.entries(layersDict).forEach(x => { - if (x[1] !== 'background') { - map.on('mouseenter', `${x[1]}Circles`, () => { +Object.entries(layersDefinitions).forEach(x => { + if (x[0] !== 'background') { + map.on('mouseenter', `${x[0]}Circles`, () => { map.getCanvas().style.cursor = 'pointer'; }); - map.on('mouseleave', `${x[1]}Circles`, () => { + map.on('mouseleave', `${x[0]}Circles`, () => { map.getCanvas().style.cursor = ''; }); } }); -Object.entries(layersDict).forEach(x => { - if (x[1] !== 'background') { - map.on('click', `${x[1]}Circles`, function (e) { +Object.entries(layersDefinitions).forEach(x => { + if (x[0] !== 'background') { + map.on('click', `${x[0]}Circles`, function (e) { const lonlat = e.features[0].geometry.coordinates; const properties = e.features[0].properties; const popupHTML = renderBasicPopup(lonlat, properties); @@ -486,24 +102,6 @@ Object.entries(layersDict).forEach(x => { } }); -// map.on('click', `${layersDict.helpPoints}Circles`, function (e) { -// const lonlat = e.features[0].geometry.coordinates; -// const properties = e.features[0].properties; -// const namePl = e.features[0].properties['name:pl']; -// const nameUk = e.features[0].properties['name:uk']; -// const popupHTML = ` -//

${nameUk}

-//

${namePl}

-// ${renderOSMRouteLink(lonlat, properties)} -// ${renderGoogleRouteLink(lonlat, properties)} -//

${properties.description}

-// `; -// new maplibregl.Popup({maxWidth: '300px'}) -// .setLngLat(e.lngLat) -// .setHTML(popupHTML) -// .addTo(map); -// }); - // ---------------- function renderOSMRouteLink(lonlat, properties) { return `
${properties.note}

`; @@ -574,11 +172,12 @@ function renderBasicPopup(lonlat, properties) { } function toggleLayer(layerId) { - const currentState = map.getLayoutProperty(layersDefinitions[layerId].layers[0].id, 'visibility') - const newState = !currentState || currentState === 'visible' ? 'none' : 'visible'; + const currentState = layersVisibilityState[layerId]; + const newState = currentState ? 'none' : 'visible'; layersDefinitions[layerId].layers.forEach(layer => { map.setLayoutProperty(layer.id, 'visibility', newState) }); + layersVisibilityState[layerId] = !currentState; } function toggleSidebar() { @@ -590,15 +189,6 @@ function toggleSidebar() { console.log('Sidebar not found.'); } -function hideSidebar() { - let sidebar = document.getElementById(sidebarDivId); - if (sidebar) { - sidebar.classList.add('is-invisible'); - } else { - console.log('Sidebar not found.'); - } -} - function closeNavBurger() { document.getElementById('navMenu').classList.remove('is-active'); document.getElementsByClassName('navbar-burger')[0].classList.remove('is-active'); @@ -607,7 +197,7 @@ function closeNavBurger() { // -------------------------------------------------------------------------------------- // Bulma controls document.addEventListener('DOMContentLoaded', () => { - + Array.from(document.getElementsByClassName('sidebar-button--toggle')).forEach(element => element.addEventListener('click', toggleSidebar)); // Get all "navbar-burger" elements const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); @@ -682,13 +272,13 @@ document.addEventListener('DOMContentLoaded', () => { function renderLegend(layers) { layers.forEach(layer => { - const legendItem = getLegendItem(layer.id, layer.name, layersVisibilityOnInit[layer.id]) + const legendItem = getLegendItem(layer.id, layer.name, layersVisibilityState[layer.id]) list.appendChild(legendItem) }) legend.appendChild(list) } addTogglingListener() - renderLegend(usedLayersDefs) + renderLegend(layersArray) })(); });