adam/maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

stop rotate on zoom start

Browse source
This commit is contained in:
Adam 2023-04-17 10:24:08 -04:00
parent 5950294d35
commit 4a1b3a977d
2 changed files with 54 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
lightning/src/components/BadassMap.tsx
View file

@ -63,6 +63,7 @@ function BadassMap(): JSX.Element {
onDrag={() => setRotate(false)} onDrag={() => setRotate(false)}
onMouseDown={() => setRotate(false)} onMouseDown={() => setRotate(false)}
onTouchStart={() => setRotate(false)} onTouchStart={() => setRotate(false)}
onZoomStart={() => setRotate(false)}
> >
<MapScatLayer data={SCAT_DATA} /> <MapScatLayer data={SCAT_DATA} />
<MapArcLayer data={ARC_DATA} /> <MapArcLayer data={ARC_DATA} />

91
lightning/src/style.json
View file

@ -1,6 +1,6 @@
{ {
"version": 8, "version": 8,
"name": "Klokantech 3D", "name": "BadassMap",
"metadata": { "metadata": {
"mapbox:autocomposite": false, "mapbox:autocomposite": false,
"maputnik:renderer": "mbgljs", "maputnik:renderer": "mbgljs",
@ -10,6 +10,7 @@
"zoom": 15.5, "zoom": 15.5,
"bearing": 160, "bearing": 160,
"pitch": 60, "pitch": 60,
"light": {"intensity": 0.7, "anchor": "viewport"},
"sources": { "sources": {
"openmaptiles": { "openmaptiles": {
"type": "vector", "type": "vector",
@ -22,7 +23,8 @@
{ {
"id": "background", "id": "background",
"type": "background", "type": "background",
"paint": {"background-color": "hsl(47, 26%, 88%)"} "layout": {"visibility": "visible"},
"paint": {"background-color": "rgba(212, 209, 196, 1)"}
}, },
{ {
"id": "landuse-residential", "id": "landuse-residential",
@ -35,7 +37,7 @@
["==", "class", "residential"] ["==", "class", "residential"]
], ],
"layout": {"visibility": "visible"}, "layout": {"visibility": "visible"},
"paint": {"fill-color": "hsl(47, 13%, 86%)", "fill-opacity": 0.7} "paint": {"fill-color": "rgba(204, 202, 195, 1)", "fill-opacity": 0.7}
}, },
{ {
"id": "landcover_grass", "id": "landcover_grass",
@ -43,14 +45,14 @@
"source": "openmaptiles", "source": "openmaptiles",
"source-layer": "landcover", "source-layer": "landcover",
"filter": ["==", "class", "grass"], "filter": ["==", "class", "grass"],
"paint": {"fill-color": "hsl(82, 46%, 72%)", "fill-opacity": 0.45} "paint": {"fill-color": "rgba(172, 196, 131, 1)", "fill-opacity": 0.45}
}, },
{ {
"id": "park", "id": "park",
"type": "fill", "type": "fill",
"source": "openmaptiles", "source": "openmaptiles",
"source-layer": "park", "source-layer": "park",
"paint": {"fill-color": "rgba(192, 216, 151, 0.53)", "fill-opacity": 1} "paint": {"fill-color": "rgba(172, 196, 131, 1)", "fill-opacity": 1}
}, },
{ {
"id": "landcover_wood", "id": "landcover_wood",
@ -59,7 +61,7 @@
"source-layer": "landcover", "source-layer": "landcover",
"filter": ["==", "class", "wood"], "filter": ["==", "class", "wood"],
"paint": { "paint": {
"fill-color": "hsl(82, 46%, 72%)", "fill-color": "rgba(172, 196, 131, 1)",
"fill-opacity": {"base": 1, "stops": [[8, 0.6], [22, 1]]} "fill-opacity": {"base": 1, "stops": [[8, 0.6], [22, 1]]}
} }
}, },
@ -73,7 +75,7 @@
["==", "$type", "Polygon"], ["==", "$type", "Polygon"],
["!=", "brunnel", "tunnel"] ["!=", "brunnel", "tunnel"]
], ],
"paint": {"fill-color": "hsl(205, 56%, 73%)"} "paint": {"fill-color": "rgba(128, 173, 205, 1)"}
}, },
{ {
"id": "landcover-ice-shelf", "id": "landcover-ice-shelf",
@ -82,7 +84,7 @@
"source-layer": "landcover", "source-layer": "landcover",
"filter": ["==", "subclass", "ice_shelf"], "filter": ["==", "subclass", "ice_shelf"],
"layout": {"visibility": "visible"}, "layout": {"visibility": "visible"},
"paint": {"fill-color": "hsl(47, 26%, 88%)", "fill-opacity": 0.8} "paint": {"fill-color": "rgba(212, 209, 196, 1)", "fill-opacity": 0.8}
}, },
{ {
"id": "landcover-glacier", "id": "landcover-glacier",
@ -92,7 +94,7 @@
"filter": ["==", "subclass", "glacier"], "filter": ["==", "subclass", "glacier"],
"layout": {"visibility": "visible"}, "layout": {"visibility": "visible"},
"paint": { "paint": {
"fill-color": "hsl(47, 22%, 94%)", "fill-color": "rgba(223, 222, 216, 1)",
"fill-opacity": {"base": 1, "stops": [[0, 1], [8, 0.5]]} "fill-opacity": {"base": 1, "stops": [[0, 1], [8, 0.5]]}
} }
}, },
@ -103,7 +105,7 @@
"source-layer": "landuse", "source-layer": "landuse",
"filter": ["==", "class", "agriculture"], "filter": ["==", "class", "agriculture"],
"layout": {"visibility": "visible"}, "layout": {"visibility": "visible"},
"paint": {"fill-color": "#eae0d0"} "paint": {"fill-color": "rgba(214, 204, 188, 1)"}
}, },
{ {
"id": "landuse_overlay_national_park", "id": "landuse_overlay_national_park",
@ -112,7 +114,7 @@
"source-layer": "landcover", "source-layer": "landcover",
"filter": ["==", "class", "national_park"], "filter": ["==", "class", "national_park"],
"paint": { "paint": {
"fill-color": "#E1EBB0", "fill-color": "rgba(205, 215, 156, 1)",
"fill-opacity": {"base": 1, "stops": [[5, 0], [9, 0.75]]} "fill-opacity": {"base": 1, "stops": [[5, 0], [9, 0.75]]}
} }
}, },
@ -123,7 +125,7 @@
"source-layer": "park", "source-layer": "park",
"layout": {}, "layout": {},
"paint": { "paint": {
"line-color": "rgba(159, 183, 118, 0.69)", "line-color": "rgba(139, 163, 98, 1)",
"line-dasharray": [0.5, 1] "line-dasharray": [0.5, 1]
} }
}, },
@ -197,7 +199,7 @@
], ],
"layout": {"line-cap": "butt", "line-join": "miter"}, "layout": {"line-cap": "butt", "line-join": "miter"},
"paint": { "paint": {
"line-color": "hsl(34, 12%, 66%)", "line-color": "rgba(159, 150, 138, 1)",
"line-dasharray": [3, 3], "line-dasharray": [3, 3],
"line-opacity": {"base": 1, "stops": [[11, 0], [16, 1]]} "line-opacity": {"base": 1, "stops": [[11, 0], [16, 1]]}
} }
@ -210,7 +212,7 @@
"source-layer": "transportation", "source-layer": "transportation",
"filter": ["all", ["==", "$type", "Polygon"], ["==", "class", "pier"]], "filter": ["all", ["==", "$type", "Polygon"], ["==", "class", "pier"]],
"layout": {"visibility": "visible"}, "layout": {"visibility": "visible"},
"paint": {"fill-antialias": true, "fill-color": "hsl(47, 26%, 88%)"} "paint": {"fill-antialias": true, "fill-color": "rgba(212, 209, 196, 1)"}
}, },
{ {
"id": "road_pier", "id": "road_pier",
@ -221,7 +223,7 @@
"filter": ["all", ["==", "$type", "LineString"], ["in", "class", "pier"]], "filter": ["all", ["==", "$type", "LineString"], ["in", "class", "pier"]],
"layout": {"line-cap": "round", "line-join": "round"}, "layout": {"line-cap": "round", "line-join": "round"},
"paint": { "paint": {
"line-color": "hsl(47, 26%, 88%)", "line-color": "rgba(212, 209, 196, 1)",
"line-width": {"base": 1.2, "stops": [[15, 1], [17, 4]]} "line-width": {"base": 1.2, "stops": [[15, 1], [17, 4]]}
} }
}, },
@ -236,7 +238,11 @@
["in", "brunnel", "bridge"] ["in", "brunnel", "bridge"]
], ],
"layout": {}, "layout": {},
"paint": {"fill-color": "hsl(47, 26%, 88%)", "fill-opacity": 0.5} "paint": {
"fill-color": "rgba(212, 209, 196, 1)",
"fill-opacity": 0.5,
"fill-antialias": true
}
}, },
{ {
"id": "road_path", "id": "road_path",
@ -250,7 +256,7 @@
], ],
"layout": {"line-cap": "square", "line-join": "bevel"}, "layout": {"line-cap": "square", "line-join": "bevel"},
"paint": { "paint": {
"line-color": "hsl(0, 0%, 97%)", "line-color": "rgba(227, 227, 227, 1)",
"line-dasharray": [1, 1], "line-dasharray": [1, 1],
"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 10]]} "line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 10]]}
} }
@ -267,7 +273,7 @@
], ],
"layout": {"line-cap": "round", "line-join": "round"}, "layout": {"line-cap": "round", "line-join": "round"},
"paint": { "paint": {
"line-color": "hsl(0, 0%, 97%)", "line-color": "rgba(227, 227, 227, 1)",
"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]} "line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]}
} }
}, },
@ -283,7 +289,7 @@
], ],
"layout": {"line-cap": "butt", "line-join": "miter"}, "layout": {"line-cap": "butt", "line-join": "miter"},
"paint": { "paint": {
"line-color": "#efefef", "line-color": "rgba(219, 219, 219, 1)",
"line-dasharray": [0.36, 0.18], "line-dasharray": [0.36, 0.18],
"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]} "line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]}
} }
@ -304,7 +310,7 @@
], ],
"layout": {"line-cap": "butt", "line-join": "miter"}, "layout": {"line-cap": "butt", "line-join": "miter"},
"paint": { "paint": {
"line-color": "#fff", "line-color": "rgba(235, 235, 235, 1)",
"line-dasharray": [0.28, 0.14], "line-dasharray": [0.28, 0.14],
"line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]} "line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]}
} }
@ -321,7 +327,7 @@
], ],
"layout": {"line-cap": "round", "line-join": "round"}, "layout": {"line-cap": "round", "line-join": "round"},
"paint": { "paint": {
"line-color": "#fff", "line-color": "rgba(235, 235, 235, 1)",
"line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]} "line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]}
} }
}, },
@ -337,7 +343,7 @@
], ],
"layout": {"line-cap": "round", "line-join": "round"}, "layout": {"line-cap": "round", "line-join": "round"},
"paint": { "paint": {
"line-color": "#fff", "line-color": "rgba(235, 235, 235, 1)",
"line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 20]]} "line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 20]]}
} }
}, },
@ -353,7 +359,7 @@
], ],
"layout": {"line-cap": "round", "line-join": "round"}, "layout": {"line-cap": "round", "line-join": "round"},
"paint": { "paint": {
"line-color": "hsl(0, 0%, 100%)", "line-color": "rgba(235, 235, 235, 1)",
"line-offset": 0, "line-offset": 0,
"line-width": {"base": 1.4, "stops": [[8, 1], [16, 10]]} "line-width": {"base": 1.4, "stops": [[8, 1], [16, 10]]}
} }
@ -370,7 +376,7 @@
], ],
"layout": {"visibility": "visible"}, "layout": {"visibility": "visible"},
"paint": { "paint": {
"line-color": "hsl(34, 12%, 66%)", "line-color": "rgba(159, 150, 138, 1)",
"line-opacity": {"base": 1, "stops": [[11, 0], [16, 1]]} "line-opacity": {"base": 1, "stops": [[11, 0], [16, 1]]}
} }
}, },
@ -382,7 +388,7 @@
"filter": ["==", "class", "rail"], "filter": ["==", "class", "rail"],
"layout": {"visibility": "visible"}, "layout": {"visibility": "visible"},
"paint": { "paint": {
"line-color": "hsl(34, 12%, 66%)", "line-color": "rgba(159, 150, 138, 1)",
"line-opacity": {"base": 1, "stops": [[11, 0], [16, 1]]} "line-opacity": {"base": 1, "stops": [[11, 0], [16, 1]]}
} }
}, },
@ -398,7 +404,7 @@
], ],
"layout": {"line-cap": "butt", "line-join": "miter"}, "layout": {"line-cap": "butt", "line-join": "miter"},
"paint": { "paint": {
"line-color": "#dedede", "line-color": "rgba(202, 202, 202, 1)",
"line-gap-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]}, "line-gap-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]},
"line-width": {"base": 1.6, "stops": [[12, 0.5], [20, 10]]} "line-width": {"base": 1.6, "stops": [[12, 0.5], [20, 10]]}
} }
@ -419,7 +425,7 @@
], ],
"layout": {"line-cap": "butt", "line-join": "miter"}, "layout": {"line-cap": "butt", "line-join": "miter"},
"paint": { "paint": {
"line-color": "#dedede", "line-color": "rgba(202, 202, 202, 1)",
"line-gap-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]}, "line-gap-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]},
"line-width": {"base": 1.6, "stops": [[12, 0.5], [20, 10]]} "line-width": {"base": 1.6, "stops": [[12, 0.5], [20, 10]]}
} }
@ -436,7 +442,7 @@
], ],
"layout": {"line-cap": "round", "line-join": "round"}, "layout": {"line-cap": "round", "line-join": "round"},
"paint": { "paint": {
"line-color": "#efefef", "line-color": "rgba(209, 209, 209, 1)",
"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]} "line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]}
} }
}, },
@ -456,7 +462,7 @@
], ],
"layout": {"line-cap": "round", "line-join": "round"}, "layout": {"line-cap": "round", "line-join": "round"},
"paint": { "paint": {
"line-color": "#fff", "line-color": "rgba(235, 235, 235, 1)",
"line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]} "line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]}
} }
}, },
@ -467,7 +473,10 @@
"source-layer": "boundary", "source-layer": "boundary",
"filter": ["in", "admin_level", 4, 6, 8], "filter": ["in", "admin_level", 4, 6, 8],
"layout": {"visibility": "visible"}, "layout": {"visibility": "visible"},
"paint": {"line-color": "hsl(0, 0%, 76%)", "line-dasharray": [2, 1]} "paint": {
"line-color": "rgba(174, 174, 174, 1)",
"line-dasharray": [2, 1]
}
}, },
{ {
"id": "admin_country_z0-4", "id": "admin_country_z0-4",
@ -483,7 +492,7 @@
], ],
"layout": {"line-cap": "round", "line-join": "round"}, "layout": {"line-cap": "round", "line-join": "round"},
"paint": { "paint": {
"line-color": "hsla(0, 8%, 22%, 0.51)", "line-color": "rgba(41, 32, 32, 1)",
"line-width": {"base": 1.3, "stops": [[3, 0.5], [22, 15]]} "line-width": {"base": 1.3, "stops": [[3, 0.5], [22, 15]]}
} }
}, },
@ -500,7 +509,7 @@
], ],
"layout": {"line-cap": "round", "line-join": "round"}, "layout": {"line-cap": "round", "line-join": "round"},
"paint": { "paint": {
"line-color": "hsla(0, 8%, 22%, 0.51)", "line-color": "rgba(41, 32, 32, 1)",
"line-width": {"base": 1.3, "stops": [[3, 0.5], [22, 15]]} "line-width": {"base": 1.3, "stops": [[3, 0.5], [22, 15]]}
} }
}, },
@ -517,11 +526,16 @@
"text-letter-spacing": 0.1, "text-letter-spacing": 0.1,
"text-rotation-alignment": "map", "text-rotation-alignment": "map",
"text-size": {"base": 1.4, "stops": [[10, 8], [20, 14]]}, "text-size": {"base": 1.4, "stops": [[10, 8], [20, 14]]},
"text-transform": "uppercase" "text-transform": "uppercase",
"symbol-avoid-edges": false,
"symbol-z-order": "auto",
"text-pitch-alignment": "viewport",
"text-keep-upright": true,
"text-optional": false
}, },
"paint": { "paint": {
"text-color": "#000", "text-color": "#000",
"text-halo-color": "hsl(0, 0%, 100%)", "text-halo-color": "rgba(235, 235, 235, 1)",
"text-halo-width": 2 "text-halo-width": 2
} }
}, },
@ -552,7 +566,7 @@
"property": "render_min_height", "property": "render_min_height",
"type": "identity" "type": "identity"
}, },
"fill-extrusion-color": "hsl(39, 41%, 86%)", "fill-extrusion-color": "rgba(214, 204, 185, 1)",
"fill-extrusion-height": { "fill-extrusion-height": {
"property": "render_height", "property": "render_height",
"type": "identity" "type": "identity"
@ -580,12 +594,13 @@
"text-font": ["Klokantech Noto Sans Regular"], "text-font": ["Klokantech Noto Sans Regular"],
"text-max-width": 6, "text-max-width": 6,
"text-size": {"stops": [[6, 10], [12, 14]]}, "text-size": {"stops": [[6, 10], [12, 14]]},
"visibility": "visible" "visibility": "visible",
"icon-keep-upright": false
}, },
"paint": { "paint": {
"text-color": "hsl(0, 10%, 25%)", "text-color": "rgba(50, 37, 37, 1)",
"text-halo-blur": 0, "text-halo-blur": 0,
"text-halo-color": "hsl(0, 0%, 100%)", "text-halo-color": "rgba(235, 235, 235, 1)",
"text-halo-width": 2 "text-halo-width": 2
} }
}, },