stop rotate on zoom start
This commit is contained in:
Adam
parent
5950294d35
commit
4a1b3a977d
2 changed files with 54 additions and 38 deletions
|
|
@ -63,6 +63,7 @@ function BadassMap(): JSX.Element {
|
|||
onDrag={() => setRotate(false)}
|
||||
onMouseDown={() => setRotate(false)}
|
||||
onTouchStart={() => setRotate(false)}
|
||||
onZoomStart={() => setRotate(false)}
|
||||
>
|
||||
<MapScatLayer data={SCAT_DATA} />
|
||||
<MapArcLayer data={ARC_DATA} />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 8,
|
||||
"name": "Klokantech 3D",
|
||||
"name": "BadassMap",
|
||||
"metadata": {
|
||||
"mapbox:autocomposite": false,
|
||||
"maputnik:renderer": "mbgljs",
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
"zoom": 15.5,
|
||||
"bearing": 160,
|
||||
"pitch": 60,
|
||||
"light": {"intensity": 0.7, "anchor": "viewport"},
|
||||
"sources": {
|
||||
"openmaptiles": {
|
||||
"type": "vector",
|
||||
|
|
@ -22,7 +23,8 @@
|
|||
{
|
||||
"id": "background",
|
||||
"type": "background",
|
||||
"paint": {"background-color": "hsl(47, 26%, 88%)"}
|
||||
"layout": {"visibility": "visible"},
|
||||
"paint": {"background-color": "rgba(212, 209, 196, 1)"}
|
||||
},
|
||||
{
|
||||
"id": "landuse-residential",
|
||||
|
|
@ -35,7 +37,7 @@
|
|||
["==", "class", "residential"]
|
||||
],
|
||||
"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",
|
||||
|
|
@ -43,14 +45,14 @@
|
|||
"source": "openmaptiles",
|
||||
"source-layer": "landcover",
|
||||
"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",
|
||||
"type": "fill",
|
||||
"source": "openmaptiles",
|
||||
"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",
|
||||
|
|
@ -59,7 +61,7 @@
|
|||
"source-layer": "landcover",
|
||||
"filter": ["==", "class", "wood"],
|
||||
"paint": {
|
||||
"fill-color": "hsl(82, 46%, 72%)",
|
||||
"fill-color": "rgba(172, 196, 131, 1)",
|
||||
"fill-opacity": {"base": 1, "stops": [[8, 0.6], [22, 1]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -73,7 +75,7 @@
|
|||
["==", "$type", "Polygon"],
|
||||
["!=", "brunnel", "tunnel"]
|
||||
],
|
||||
"paint": {"fill-color": "hsl(205, 56%, 73%)"}
|
||||
"paint": {"fill-color": "rgba(128, 173, 205, 1)"}
|
||||
},
|
||||
{
|
||||
"id": "landcover-ice-shelf",
|
||||
|
|
@ -82,7 +84,7 @@
|
|||
"source-layer": "landcover",
|
||||
"filter": ["==", "subclass", "ice_shelf"],
|
||||
"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",
|
||||
|
|
@ -92,7 +94,7 @@
|
|||
"filter": ["==", "subclass", "glacier"],
|
||||
"layout": {"visibility": "visible"},
|
||||
"paint": {
|
||||
"fill-color": "hsl(47, 22%, 94%)",
|
||||
"fill-color": "rgba(223, 222, 216, 1)",
|
||||
"fill-opacity": {"base": 1, "stops": [[0, 1], [8, 0.5]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -103,7 +105,7 @@
|
|||
"source-layer": "landuse",
|
||||
"filter": ["==", "class", "agriculture"],
|
||||
"layout": {"visibility": "visible"},
|
||||
"paint": {"fill-color": "#eae0d0"}
|
||||
"paint": {"fill-color": "rgba(214, 204, 188, 1)"}
|
||||
},
|
||||
{
|
||||
"id": "landuse_overlay_national_park",
|
||||
|
|
@ -112,7 +114,7 @@
|
|||
"source-layer": "landcover",
|
||||
"filter": ["==", "class", "national_park"],
|
||||
"paint": {
|
||||
"fill-color": "#E1EBB0",
|
||||
"fill-color": "rgba(205, 215, 156, 1)",
|
||||
"fill-opacity": {"base": 1, "stops": [[5, 0], [9, 0.75]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -123,7 +125,7 @@
|
|||
"source-layer": "park",
|
||||
"layout": {},
|
||||
"paint": {
|
||||
"line-color": "rgba(159, 183, 118, 0.69)",
|
||||
"line-color": "rgba(139, 163, 98, 1)",
|
||||
"line-dasharray": [0.5, 1]
|
||||
}
|
||||
},
|
||||
|
|
@ -197,7 +199,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "butt", "line-join": "miter"},
|
||||
"paint": {
|
||||
"line-color": "hsl(34, 12%, 66%)",
|
||||
"line-color": "rgba(159, 150, 138, 1)",
|
||||
"line-dasharray": [3, 3],
|
||||
"line-opacity": {"base": 1, "stops": [[11, 0], [16, 1]]}
|
||||
}
|
||||
|
|
@ -210,7 +212,7 @@
|
|||
"source-layer": "transportation",
|
||||
"filter": ["all", ["==", "$type", "Polygon"], ["==", "class", "pier"]],
|
||||
"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",
|
||||
|
|
@ -221,7 +223,7 @@
|
|||
"filter": ["all", ["==", "$type", "LineString"], ["in", "class", "pier"]],
|
||||
"layout": {"line-cap": "round", "line-join": "round"},
|
||||
"paint": {
|
||||
"line-color": "hsl(47, 26%, 88%)",
|
||||
"line-color": "rgba(212, 209, 196, 1)",
|
||||
"line-width": {"base": 1.2, "stops": [[15, 1], [17, 4]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -236,7 +238,11 @@
|
|||
["in", "brunnel", "bridge"]
|
||||
],
|
||||
"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",
|
||||
|
|
@ -250,7 +256,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "square", "line-join": "bevel"},
|
||||
"paint": {
|
||||
"line-color": "hsl(0, 0%, 97%)",
|
||||
"line-color": "rgba(227, 227, 227, 1)",
|
||||
"line-dasharray": [1, 1],
|
||||
"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 10]]}
|
||||
}
|
||||
|
|
@ -267,7 +273,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "round", "line-join": "round"},
|
||||
"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]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -283,7 +289,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "butt", "line-join": "miter"},
|
||||
"paint": {
|
||||
"line-color": "#efefef",
|
||||
"line-color": "rgba(219, 219, 219, 1)",
|
||||
"line-dasharray": [0.36, 0.18],
|
||||
"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]}
|
||||
}
|
||||
|
|
@ -304,7 +310,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "butt", "line-join": "miter"},
|
||||
"paint": {
|
||||
"line-color": "#fff",
|
||||
"line-color": "rgba(235, 235, 235, 1)",
|
||||
"line-dasharray": [0.28, 0.14],
|
||||
"line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]}
|
||||
}
|
||||
|
|
@ -321,7 +327,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "round", "line-join": "round"},
|
||||
"paint": {
|
||||
"line-color": "#fff",
|
||||
"line-color": "rgba(235, 235, 235, 1)",
|
||||
"line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -337,7 +343,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "round", "line-join": "round"},
|
||||
"paint": {
|
||||
"line-color": "#fff",
|
||||
"line-color": "rgba(235, 235, 235, 1)",
|
||||
"line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 20]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -353,7 +359,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "round", "line-join": "round"},
|
||||
"paint": {
|
||||
"line-color": "hsl(0, 0%, 100%)",
|
||||
"line-color": "rgba(235, 235, 235, 1)",
|
||||
"line-offset": 0,
|
||||
"line-width": {"base": 1.4, "stops": [[8, 1], [16, 10]]}
|
||||
}
|
||||
|
|
@ -370,7 +376,7 @@
|
|||
],
|
||||
"layout": {"visibility": "visible"},
|
||||
"paint": {
|
||||
"line-color": "hsl(34, 12%, 66%)",
|
||||
"line-color": "rgba(159, 150, 138, 1)",
|
||||
"line-opacity": {"base": 1, "stops": [[11, 0], [16, 1]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -382,7 +388,7 @@
|
|||
"filter": ["==", "class", "rail"],
|
||||
"layout": {"visibility": "visible"},
|
||||
"paint": {
|
||||
"line-color": "hsl(34, 12%, 66%)",
|
||||
"line-color": "rgba(159, 150, 138, 1)",
|
||||
"line-opacity": {"base": 1, "stops": [[11, 0], [16, 1]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -398,7 +404,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "butt", "line-join": "miter"},
|
||||
"paint": {
|
||||
"line-color": "#dedede",
|
||||
"line-color": "rgba(202, 202, 202, 1)",
|
||||
"line-gap-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]},
|
||||
"line-width": {"base": 1.6, "stops": [[12, 0.5], [20, 10]]}
|
||||
}
|
||||
|
|
@ -419,7 +425,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "butt", "line-join": "miter"},
|
||||
"paint": {
|
||||
"line-color": "#dedede",
|
||||
"line-color": "rgba(202, 202, 202, 1)",
|
||||
"line-gap-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]},
|
||||
"line-width": {"base": 1.6, "stops": [[12, 0.5], [20, 10]]}
|
||||
}
|
||||
|
|
@ -436,7 +442,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "round", "line-join": "round"},
|
||||
"paint": {
|
||||
"line-color": "#efefef",
|
||||
"line-color": "rgba(209, 209, 209, 1)",
|
||||
"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 30]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -456,7 +462,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "round", "line-join": "round"},
|
||||
"paint": {
|
||||
"line-color": "#fff",
|
||||
"line-color": "rgba(235, 235, 235, 1)",
|
||||
"line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 30]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -467,7 +473,10 @@
|
|||
"source-layer": "boundary",
|
||||
"filter": ["in", "admin_level", 4, 6, 8],
|
||||
"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",
|
||||
|
|
@ -483,7 +492,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "round", "line-join": "round"},
|
||||
"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]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -500,7 +509,7 @@
|
|||
],
|
||||
"layout": {"line-cap": "round", "line-join": "round"},
|
||||
"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]]}
|
||||
}
|
||||
},
|
||||
|
|
@ -517,11 +526,16 @@
|
|||
"text-letter-spacing": 0.1,
|
||||
"text-rotation-alignment": "map",
|
||||
"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": {
|
||||
"text-color": "#000",
|
||||
"text-halo-color": "hsl(0, 0%, 100%)",
|
||||
"text-halo-color": "rgba(235, 235, 235, 1)",
|
||||
"text-halo-width": 2
|
||||
}
|
||||
},
|
||||
|
|
@ -552,7 +566,7 @@
|
|||
"property": "render_min_height",
|
||||
"type": "identity"
|
||||
},
|
||||
"fill-extrusion-color": "hsl(39, 41%, 86%)",
|
||||
"fill-extrusion-color": "rgba(214, 204, 185, 1)",
|
||||
"fill-extrusion-height": {
|
||||
"property": "render_height",
|
||||
"type": "identity"
|
||||
|
|
@ -580,12 +594,13 @@
|
|||
"text-font": ["Klokantech Noto Sans Regular"],
|
||||
"text-max-width": 6,
|
||||
"text-size": {"stops": [[6, 10], [12, 14]]},
|
||||
"visibility": "visible"
|
||||
"visibility": "visible",
|
||||
"icon-keep-upright": false
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "hsl(0, 10%, 25%)",
|
||||
"text-color": "rgba(50, 37, 37, 1)",
|
||||
"text-halo-blur": 0,
|
||||
"text-halo-color": "hsl(0, 0%, 100%)",
|
||||
"text-halo-color": "rgba(235, 235, 235, 1)",
|
||||
"text-halo-width": 2
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue