mirror
/
sotlas-frontend
kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Show filtered summits on main map with a small, faint circle (#18)

pull/12/merge
Manuel Kasper 2022-11-12 11:57:09 +01:00
rodzic cba61ea997
commit 12251b36f6
7 zmienionych plików z 177 dodań i 2 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

29
src/assets/norkart.json
Wyświetl plik

@ -136,6 +136,35 @@
"text-halo-blur": 1
}
},
{
"id": "summits_circles_all",
"type": "circle",
"source": "summits",
"source-layer": "summits",
"layout": {"visibility": "none"},
"paint": {
"circle-stroke-color": "rgba(255, 255, 255, 1)",
"circle-color": [
"match",
["get", "points"],
[1],
"rgba(77, 122, 32, 1)",
[2],
"rgba(109, 165, 54, 1)",
[4],
"rgba(174, 167, 39, 1)",
[6],
"rgba(239, 168, 24, 1)",
[8],
"rgba(220, 93, 4, 0.5)",
[10],
"rgba(200, 16, 30, 0.5)",
"#000"
],
"circle-stroke-width": {"stops": [[4, 0], [15, 1]]},
"circle-radius": {"stops": [[0, 0.05], [10, 4], [22, 10]]}
}
},
{
"id": "summits_circles",
"type": "circle",

29
src/assets/openmaptiles.json
Wyświetl plik

@ -2203,6 +2203,35 @@
"text-halo-blur": 1
}
},
{
"id": "summits_circles_all",
"type": "circle",
"source": "summits",
"source-layer": "summits",
"layout": {"visibility": "none"},
"paint": {
"circle-stroke-color": "rgba(255, 255, 255, 1)",
"circle-color": [
"match",
["get", "points"],
[1],
"rgba(77, 122, 32, 1)",
[2],
"rgba(109, 165, 54, 1)",
[4],
"rgba(174, 167, 39, 1)",
[6],
"rgba(239, 168, 24, 1)",
[8],
"rgba(220, 93, 4, 0.5)",
[10],
"rgba(200, 16, 30, 0.5)",
"#000"
],
"circle-stroke-width": {"stops": [[4, 0], [15, 1]]},
"circle-radius": {"stops": [[0, 0.05], [10, 4], [22, 10]]}
}
},
{
"id": "summits_circles",
"type": "circle",

29
src/assets/swisstopo.json
Wyświetl plik

@ -9116,6 +9116,35 @@
"text-halo-blur": 1
}
},
{
"id": "summits_circles_all",
"type": "circle",
"source": "summits",
"source-layer": "summits",
"layout": {"visibility": "none"},
"paint": {
"circle-stroke-color": "rgba(255, 255, 255, 1)",
"circle-color": [
"match",
["get", "points"],
[1],
"rgba(77, 122, 32, 1)",
[2],
"rgba(109, 165, 54, 1)",
[4],
"rgba(174, 167, 39, 1)",
[6],
"rgba(239, 168, 24, 1)",
[8],
"rgba(220, 93, 4, 0.5)",
[10],
"rgba(200, 16, 30, 0.5)",
"#000"
],
"circle-stroke-width": {"stops": [[4, 0], [15, 1]]},
"circle-radius": {"stops": [[0, 0.05], [10, 4], [22, 10]]}
}
},
{
"id": "summits_circles",
"type": "circle",

29
src/assets/swisstopo_aerial.json
Wyświetl plik

@ -269,6 +269,35 @@
"text-halo-blur": 1
}
},
{
"id": "summits_circles_all",
"type": "circle",
"source": "summits",
"source-layer": "summits",
"layout": {"visibility": "none"},
"paint": {
"circle-stroke-color": "rgba(255, 255, 255, 1)",
"circle-color": [
"match",
["get", "points"],
[1],
"rgba(77, 122, 32, 1)",
[2],
"rgba(109, 165, 54, 1)",
[4],
"rgba(174, 167, 39, 1)",
[6],
"rgba(239, 168, 24, 1)",
[8],
"rgba(220, 93, 4, 0.5)",
[10],
"rgba(200, 16, 30, 0.5)",
"#000"
],
"circle-stroke-width": {"stops": [[4, 0], [15, 1]]},
"circle-radius": {"stops": [[0, 0.05], [10, 4], [22, 10]]}
}
},
{
"id": "summits_circles",
"type": "circle",

29
src/assets/swisstopo_raster.json
Wyświetl plik

@ -269,6 +269,35 @@
"text-halo-blur": 1
}
},
{
"id": "summits_circles_all",
"type": "circle",
"source": "summits",
"source-layer": "summits",
"layout": {"visibility": "none"},
"paint": {
"circle-stroke-color": "rgba(255, 255, 255, 1)",
"circle-color": [
"match",
["get", "points"],
[1],
"rgba(77, 122, 32, 1)",
[2],
"rgba(109, 165, 54, 1)",
[4],
"rgba(174, 167, 39, 1)",
[6],
"rgba(239, 168, 24, 1)",
[8],
"rgba(220, 93, 4, 0.5)",
[10],
"rgba(200, 16, 30, 0.5)",
"#000"
],
"circle-stroke-width": {"stops": [[4, 0], [15, 1]]},
"circle-radius": {"stops": [[0, 0.05], [10, 4], [22, 10]]}
}
},
{
"id": "summits_circles",
"type": "circle",

29
src/assets/toposvalbard.json
Wyświetl plik

@ -136,6 +136,35 @@
"text-halo-blur": 1
}
},
{
"id": "summits_circles_all",
"type": "circle",
"source": "summits",
"source-layer": "summits",
"layout": {"visibility": "none"},
"paint": {
"circle-stroke-color": "rgba(255, 255, 255, 1)",
"circle-color": [
"match",
["get", "points"],
[1],
"rgba(77, 122, 32, 1)",
[2],
"rgba(109, 165, 54, 1)",
[4],
"rgba(174, 167, 39, 1)",
[6],
"rgba(239, 168, 24, 1)",
[8],
"rgba(220, 93, 4, 0.5)",
[10],
"rgba(200, 16, 30, 0.5)",
"#000"
],
"circle-stroke-width": {"stops": [[4, 0], [15, 1]]},
"circle-radius": {"stops": [[0, 0.05], [10, 4], [22, 10]]}
}
},
{
"id": "summits_circles",
"type": "circle",

5
src/views/Map.vue
Wyświetl plik

@ -224,7 +224,7 @@ export default {
onMapLoaded (event) {
this.map = event.map
this.map.touchZoomRotate.disableRotation();
['summits_circles', 'summits_inactive_circles'].forEach(layer => {
['summits_circles_all', 'summits_circles', 'summits_inactive_circles'].forEach(layer => {
this.map.on('mouseenter', layer, () => {
if (!this.$refs.draw.isDrawing()) {
this.map.getCanvas().style.cursor = 'pointer'
@ -236,6 +236,7 @@ export default {
})
this.updateLayers(this.map)
this.map.setLayoutProperty('summits_circles_all', 'visibility', 'visible')
this.installLongTouchHandler(this.map, (e) => {
this.infoCoordinates = {
@ -253,7 +254,7 @@ export default {
// Search for summit circles with some padding/fuzz to make it easier to hit on mobile devices
let point = event.mapboxEvent.point
let bbox = [[point.x - this.clickFuzz, point.y - this.clickFuzz], [point.x + this.clickFuzz, point.y + this.clickFuzz]]
let features = this.map.queryRenderedFeatures(bbox, { layers: ['summits_circles', 'summits_inactive_circles'] })
let features = this.map.queryRenderedFeatures(bbox, { layers: ['summits_circles_all', 'summits_circles', 'summits_inactive_circles'] })
if (features.length === 0) {
// User probably clicked outside any features; close any controls