Merge branch 'master' of https://github.com/andre-dietrich/elm-mapbox

15 files changed, 2640 insertions, 2196 deletions

diff --git a/README.md b/README.md
index bd08c04..3f31f30 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,50 @@
+
+> This is only a fork of the great elm-mapbox library from Jakub Hampl with some
+> quick fixes, that I needed for my project. Please use the original version from
+> https://github.com/gampleman/elm-mapbox
+>
+> I will remove the project when this functionality will be available in the
+> original project.
+
+__Changes:__
+
+* Use the patch after running `npm i` in order to remove some errors
+  (at least on my system) with TouchEvents and not ready loaded maps
+
+  `patch -N node_modules/elm-mapbox/dist/elm-mapbox.umd.js < elm-mapbox.umd.js.patch`
+
+* This version contains some decoders for `StyleDef`, which are nice to
+  use, if you want to load your maps from MapBox-Studio and add some custom
+  layers in your code ... see for example examples/Example04
+
+* Or, as in my case, you can also use the great style generator to generate your
+  `StyleDef`, which in my case caused some errors and remove the layers by a
+  simple json-parser. Simply copy your original json definition into a string ...
+
+  ``` elm
+  Style
+    { transition = Style.defaultTransition
+    , light = Style.defaultLight
+    , layers =
+        """
+        [{"id": "background","type": "background","layout": {"visibility": "visi
+        ble"},"paint": {"background-color": "#fff", "background-opacity": 1},"in
+        teractive": true},{"id": "waterway","type": "line","metadata": {"mapbox:
+        group": "1452116608071.19"},"source": "mapbox://mapbox.mapbox-streets-v6
+        ","source-layer": "waterway","layout": {"visibility": "visible","line-ca
+        p": "round","line-join": "round"},"paint": {"line-width": 2,"line-color"
+        : "#62b0f0","line-blur": 0,"line-opacity": 0.7},"interactive": true},{"i
+        d": "water","type": "fill","metadata": {"mapbox:group": "14521166080 ...
+        """
+         |> Layer.jsonList
+    , ...
+  ```
+
+* If you want to achieve the same, but only for one layer, then use `Layer.json`...
+
+
+
+
 # elm-mapbox
 
 Great looking and performant maps in Elm using MapboxGl. Discuss in #maps on the Elm Slack.
diff --git a/elm-mapbox.umd.js.patch b/elm-mapbox.umd.js.patch
new file mode 100644
index 0000000..1a9748c
--- /dev/null
+++ b/elm-mapbox.umd.js.patch
@@ -0,0 +1,75 @@
+--- node_modules/elm-mapbox/dist/elm-mapbox.umd.js	1985-10-26 09:15:00.000000000 +0100
++++ elm-mapbox.umd.js	2019-09-12 18:24:24.087505291 +0200
+@@ -77,9 +77,16 @@
+ 	      get mapboxStyle() {
+ 	        return this._style;
+ 	      }
+-	      set mapboxStyle(value) {
+-	        if (this._map) this._map.setStyle(value);
+-	        this._style = value;
++	      set mapboxStyle(value)
++	        if (this._map) {
++            // This is a simple check to prevent mapbox from
++            // setting the style over and over agian, otherwise
++            // it may cause errors by using events ...
++            if (JSON.stringify(this._style) != JSON.stringify(value)) {
++              this._map.setStyle(value);
++            }
++          }
++          this._style = value;
+ 	      }
+ 
+ 	      get minZoom() {
+@@ -229,7 +236,8 @@
+ 	            };
+ 	          } else if (["touchend", "touchmove", "touchcancel"].includes(type)) {
+ 	            wrapped = e => {
+-	              e.features = this._map.queryRenderedFeatures([e.point], {
++                // removed the arrays, caused errors with using touch-events
++	              e.features = this._map.queryRenderedFeatures(e.point, {
+ 	                layers: this.eventFeaturesLayers,
+ 	                filter: this.eventFeaturesFilter
+ 	              });
+@@ -304,14 +312,18 @@
+ 	        );
+ 	        this._eventRegistrationQueue = {};
+ 	        options.onMount(this._map, this);
+-	        if (commandRegistry[this.id]) {
+-	          this._map.on("load", () => {
+-	            var cmd;
+-	            while ((cmd = commandRegistry[this.id].shift())) {
+-	              cmd(this._map);
+-	            }
+-	          });
+-	        }
++          if (commandRegistry[this.id]) {
++            function onStyleData(){
++              if(map.isStyleLoaded()) {
++                var cmd;
++                while ((cmd = commandRegistry[this.id].shift())) {
++                  cmd(this._map);
++                }
++                map.off('data', onStyleData)
++              }
++            };
++            this._map.on("data", onStyleData);
++          }
+ 	        return this._map;
+ 	      }
+ 
+@@ -415,6 +427,15 @@
+ 	              bounds: map.getBounds().toArray()
+ 	            });
+ 
++            // use it to get the center and the current zoom-level of the map
++            case "getCenter":
++              return elmApp.ports[options.incomingPort].send({
++                type: "getCenter",
++                id: event.requestId,
++                center: map.getCenter().toArray(),
++                zoom: map.getZoom()
++              });
++
+ 	          case "queryRenderedFeatures":
+ 	            return elmApp.ports[options.incomingPort].send({
+ 	              type: "queryRenderedFeatures",
diff --git a/elm.json b/elm.json
index 77eb739..0a27d62 100644
--- a/elm.json
+++ b/elm.json
@@ -1,9 +1,9 @@
 {
     "type": "package",
-    "name": "gampleman/elm-mapbox",
-    "summary": "An advanced mapping library",
+    "name": "andre-dietrich/elm-mapbox",
+    "summary": "Fork form gampleman/elm-mapbox (4.1.0) ... An advanced mapping library",
     "license": "MIT",
-    "version": "4.1.0",
+    "version": "1.1.1",
     "exposed-modules": [
         "Mapbox.Element",
         "Mapbox.Cmd.Template",
@@ -21,4 +21,4 @@
         "elm/json": "1.0.0 <= v < 2.0.0"
     },
     "test-dependencies": {}
-}
\ No newline at end of file
+}
diff --git a/examples/Example01.elm b/examples/Example01.elm
index 9401a99..07ac833 100644
--- a/examples/Example01.elm
+++ b/examples/Example01.elm
@@ -151,7 +151,6 @@ view model =
                         ]
                     }
                 )
-            , div [ style "position" "absolute", style "bottom" "20px", style "left" "20px" ] [ text (LngLat.toString model.position) ]
             ]
         ]
     }
diff --git a/examples/Example03.elm b/examples/Example03.elm
new file mode 100644
index 0000000..ddd1d02
--- /dev/null
+++ b/examples/Example03.elm
@@ -0,0 +1,151 @@
+module Example03 exposing (main)
+
+import Browser
+import Html exposing (div, text)
+import Html.Attributes exposing (style)
+import Html.Lazy exposing (lazy)
+import Json.Decode
+import Json.Encode
+import LngLat exposing (LngLat)
+import Map
+import MapCommands
+import Mapbox.Cmd.Option as Opt
+import Mapbox.Element exposing (..)
+import Mapbox.Expression as E exposing (false, float, int, str, true)
+import Mapbox.Layer as Layer
+import Mapbox.Source as Source
+import Mapbox.Style as Style exposing (Style(..))
+
+
+main =
+    Browser.document
+        { init = init
+        , view = view
+        , update = update
+        , subscriptions = subscriptions
+        }
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.batch
+        [ Commands.elmMapboxIncoming MapCenter
+        ]
+
+
+type alias Model =
+    { position : LngLat
+    , zoom : Float
+    , features : List Json.Encode.Value
+    }
+
+
+init : () -> ( Model, Cmd Msg )
+init () =
+    ( { position = LngLat 0 0, zoom = 13.8, features = [] }, Cmd.none )
+
+
+type Msg
+    = Hover EventData
+    | Click EventData
+    | MapCenter Json.Encode.Value
+
+
+update msg model =
+    case msg of
+        Hover { lngLat, renderedFeatures } ->
+            ( { model | position = lngLat, features = renderedFeatures }, Cmd.none )
+
+        Click { lngLat, renderedFeatures } ->
+            ( { model | position = lngLat, features = renderedFeatures }, Commands.fitBounds "my-map" [ Opt.linear True, Opt.maxZoom 10 ] ( LngLat.map (\a -> a - 0.2) lngLat, LngLat.map (\a -> a + 0.2) lngLat ) )
+
+        MapCenter e ->
+            ( model, Cmd.none )
+
+
+geojson : Json.Encode.Value
+geojson =
+    Json.Decode.decodeString Json.Decode.value """
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "id": 1,
+      "properties": {
+        "name": "Bermuda Triangle",
+        "area": 1150180
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [-64.73, 32.31],
+            [-80.19, 25.76],
+            [-66.09, 18.43],
+            [-64.73, 32.31]
+          ]
+        ]
+      }
+    }
+  ]
+}
+""" |> Result.withDefault (Json.Encode.object [])
+
+
+hoveredFeatures : List Json.Encode.Value -> MapboxAttr msg
+hoveredFeatures =
+    List.map (\feat -> ( feat, [ ( "hover", Json.Encode.bool True ) ] ))
+        >> featureState
+
+
+showMap features =
+    map
+        [ maxZoom 150
+        , onMouseMove Hover
+        , onClick Click
+        , id "my-map"
+        , eventFeaturesLayers [ "changes" ]
+        , hoveredFeatures features
+        ]
+        (Style
+            { transition = Style.defaultTransition
+            , light = Style.defaultLight
+            , layers =
+                (Map.layers
+                    |> Layer.jsonList
+                )
+                    ++ [ Layer.fill "changes"
+                            "changes"
+                            [ Layer.fillOpacity (E.ifElse (E.toBool (E.featureState (str "hover"))) (float 0.9) (float 0.1))
+                            ]
+                       ]
+            , sources =
+                [ Source.vectorFromUrl "mapbox://mapbox.mapbox-streets-v6" "mapbox://mapbox.mapbox-streets-v6"
+                , Source.vectorFromUrl "mapbox://mapbox.mapbox-terrain-v2" "mapbox://mapbox.mapbox-terrain-v2"
+                , Source.vectorFromUrl "mapbox://mslee.0fc2f90a" "mapbox://mslee.0fc2f90a"
+                , Source.geoJSONFromValue "changes" [] geojson
+                ]
+            , misc =
+                [ Style.sprite "mapbox://sprites/engiadina/ck0dvc9zq0g2v1cmw9xg18pu7/0y2vnk8n60t1vz01wcpm3bpqa"
+                , Style.glyphs "mapbox://fonts/engiadina/{fontstack}/{range}.pbf"
+                , Style.name "Winter"
+                , Style.defaultCenter <| LngLat 20.39789404164037 43.22523201923144
+                , Style.defaultZoomLevel 13
+                , Style.defaultBearing 0
+                , Style.defaultPitch 0
+                ]
+            }
+        )
+
+
+view model =
+    { title = "Mapbox Example"
+    , body =
+        [ css
+        , div [ style "width" "100vw", style "height" "100vh" ]
+            [ lazy showMap model.features
+            , div [ style "position" "absolute", style "bottom" "20px", style "left" "20px" ] [ text (LngLat.toString model.position) ]
+            ]
+        ]
+    }
diff --git a/examples/Example04.elm b/examples/Example04.elm
new file mode 100644
index 0000000..eb7b650
--- /dev/null
+++ b/examples/Example04.elm
@@ -0,0 +1,180 @@
+port module Example04 exposing (main)
+
+import Browser
+import Html exposing (div, text)
+import Html.Attributes exposing (style)
+import Html.Lazy exposing (lazy2)
+import Http
+import Json.Decode
+import Json.Encode
+import LngLat exposing (LngLat)
+import Map
+import MapCommands
+import Mapbox.Cmd.Option as Opt
+import Mapbox.Element exposing (..)
+import Mapbox.Expression as E exposing (false, float, int, str, true)
+import Mapbox.Layer as Layer
+import Mapbox.Source as Source
+import Mapbox.Style as Style exposing (Style(..), StyleDef)
+
+
+port elmMapboxIncoming : (Json.Encode.Value -> msg) -> Sub msg
+
+
+main =
+    Browser.document
+        { init = init
+        , view = view
+        , update = update
+        , subscriptions = subscriptions
+        }
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    elmMapboxIncoming MapCenter
+
+
+type alias Model =
+    { position : LngLat
+    , zoom : Float
+    , features : List Json.Encode.Value
+    , jsonMap : Maybe StyleDef
+    }
+
+
+init : () -> ( Model, Cmd Msg )
+init () =
+    ( { position = LngLat 0 0
+      , zoom = 13.8
+      , features = []
+      , jsonMap = Nothing
+      }
+    , fetchStyle "mapbox://styles/yourstile/ck0dvc9zq0g2v1cmw9xg18pu7" "pk.eyJ1Ijoi..."
+    )
+
+
+type Msg
+    = Hover EventData
+    | Click EventData
+    | MapCenter Json.Encode.Value
+    | LoadedStyle (Result Http.Error String)
+
+
+fetchStyle styleUrl token =
+    String.replace "mapbox://styles/" "https://api.mapbox.com/styles/v1/" styleUrl
+        ++ "?access_token="
+        ++ token
+        |> Http.getString
+        |> Http.send LoadedStyle
+
+
+update msg model =
+    case msg of
+        Hover { lngLat, renderedFeatures } ->
+            ( { model | position = lngLat, features = renderedFeatures }, Cmd.none )
+
+        Click { lngLat, renderedFeatures } ->
+            ( { model | position = lngLat, features = renderedFeatures }, MapCommands.fitBounds [ Opt.linear True, Opt.maxZoom 10 ] ( LngLat.map (\a -> a - 0.2) lngLat, LngLat.map (\a -> a + 0.2) lngLat ) )
+
+        MapCenter e ->
+            ( model, Cmd.none )
+
+        LoadedStyle (Ok style) ->
+            ( { model
+                | jsonMap =
+                    case
+                        ( Json.Decode.decodeString Style.decode style
+                        , Json.Decode.decodeString Style.decodeMiscDef style
+                        )
+                    of
+                        ( Ok mapbox, Ok misc ) ->
+                            Just { mapbox | misc = Style.miscDefToList misc }
+
+                        _ ->
+                            Nothing
+              }
+            , Cmd.none
+            )
+
+        LoadedStyle (Err e) ->
+            ( model, Cmd.none )
+
+
+geojson : Json.Encode.Value
+geojson =
+    Json.Decode.decodeString Json.Decode.value """
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "id": 1,
+      "properties": {
+        "name": "Bermuda Triangle",
+        "area": 1150180
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [-64.73, 32.31],
+            [-80.19, 25.76],
+            [-66.09, 18.43],
+            [-64.73, 32.31]
+          ]
+        ]
+      }
+    }
+  ]
+}
+""" |> Result.withDefault (Json.Encode.object [])
+
+
+hoveredFeatures : List Json.Encode.Value -> MapboxAttr msg
+hoveredFeatures =
+    List.map (\feat -> ( feat, [ ( "hover", Json.Encode.bool True ) ] ))
+        >> featureState
+
+
+showMap mapbox features =
+    case mapbox of
+        Just style ->
+            map
+                [ maxZoom 150
+                , onMouseMove Hover
+                , onClick Click
+                , id "my-map"
+                , eventFeaturesLayers [ "changes" ]
+                , hoveredFeatures features
+                ]
+                (Style
+                    { style
+                        | layers =
+                            style.layers
+                                ++ [ Layer.fill "changes"
+                                        "changes"
+                                        [ Layer.fillOpacity (E.ifElse (E.toBool (E.featureState (str "hover"))) (float 0.9) (float 0.1))
+                                        ]
+                                   ]
+                        , sources =
+                            style.sources
+                                ++ [ Source.geoJSONFromValue "changes" [] geojson
+                                   ]
+                    }
+                )
+
+        Nothing ->
+            Html.text "Nothing"
+
+
+view model =
+    { title = "Mapbox Example"
+    , body =
+        [ css
+        , div [ style "width" "100vw", style "height" "100vh" ]
+            [ lazy2 showMap model.jsonMap model.features
+            , div [ style "position" "absolute", style "bottom" "20px", style "left" "20px" ] [ text (LngLat.toString model.position) ]
+            ]
+        ]
+    }
diff --git a/examples/Map.elm b/examples/Map.elm
new file mode 100644
index 0000000..e8d13d5
--- /dev/null
+++ b/examples/Map.elm
@@ -0,0 +1,8 @@
+module Map exposing (layers)
+
+
+layers : String
+layers =
+    """
+[{"id": "background","type": "background","layout": {"visibility": "visible"},"paint": {"background-color": "#fff", "background-opacity": 1},"interactive": true},{"id": "waterway","type": "line","metadata": {"mapbox:group": "1452116608071.19"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "waterway","layout": {"visibility": "visible","line-cap": "round","line-join": "round"},"paint": {"line-width": 2,"line-color": "#62b0f0","line-blur": 0,"line-opacity": 0.7},"interactive": true},{"id": "water","type": "fill","metadata": {"mapbox:group": "1452116608071.19"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "water","layout": {"visibility": "visible"},"paint": {"fill-color": "#62b0f0","fill-opacity": 0.35,"fill-outline-color": "#62b0f0"},"interactive": true},{"id": "water outline","type": "line","metadata": {"mapbox:group": "1452116608071.19"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "water","layout": {},"paint": {"line-color": "#62b0f0", "line-width": 2, "line-blur": 1},"interactive": true},{"id": "water copy","type": "fill","metadata": {"mapbox:group": "1452116608071.19"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "water","layout": {"visibility": "visible"},"paint": {"fill-opacity": 0.35, "fill-color": "#fff"},"interactive": true},{"id": "snow copy","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "landcover","filter": ["==", "class", "snow"],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(255,255,255,1)"},"interactive": true},{"id": "snowline copy","type": "line","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "landcover","filter": ["==", "class", "snow"],"layout": {"line-join": "round","line-cap": "round","visibility": "visible"},"paint": {"line-color": "#fff", "line-blur": 2},"interactive": true},{"id": "shadow 67 copy 2","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all", ["==", "class", "shadow"], ["==", "level", 67]],"layout": {"visibility": "visible"},"paint": {"fill-color": "#62b0f0", "fill-opacity": 0.1},"interactive": true},{"id": "shadow 56 copy 2","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all", ["==", "class", "shadow"], ["==", "level", 56]],"layout": {"visibility": "visible"},"paint": {"fill-opacity": 0.2, "fill-color": "#62b0f0"},"interactive": true},{"id": "shadow 78 copy 1","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all", ["==", "class", "shadow"], ["==", "level", 78]],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(128,128,128,1)","fill-opacity": 0.2,"fill-pattern": "paleblue-lines-32"},"interactive": true},{"id": "shadow 78 copy 2","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all", ["==", "class", "shadow"], ["==", "level", 78]],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(255,255,255,1)","fill-opacity": 0.8,"fill-pattern": "paleblue-lines-32"},"interactive": true},{"id": "shadow 78 (texture) copy","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all", ["==", "class", "shadow"], ["==", "level", 78]],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(128,128,128,1)","fill-pattern": "paleblue-lines-32","fill-translate": [3, 5],"fill-opacity": 0.15},"interactive": true},{"id": "highlight 89 copy 2","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "landuse","filter": ["in", "class", "grass", "park", "wood"],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(167,36,237,1)","fill-pattern": "paleblue-lines-32","fill-opacity": 0.25},"interactive": true},{"id": "shadow 67 copy 1","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all", ["==", "class", "shadow"], ["==", "level", 67]],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(128,128,128,1)","fill-opacity": 0.3,"fill-pattern": "paleblue-lines-32"},"interactive": true},{"id": "shadow 56 copy 1","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all", ["==", "class", "shadow"], ["==", "level", 56]],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(128,128,128,1)","fill-pattern": "paleblue-lines-32","fill-opacity": 0.2},"interactive": true},{"id": "highlight 94 copy","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all",["==", "class", "highlight"],["==", "level", 94]],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(252,252,252,1)", "fill-opacity": 1},"interactive": true},{"id": "highlight 89 copy","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "landuse","filter": ["in", "class", "grass", "park", "wood"],"layout": {"visibility": "visible"},"paint": {"fill-color": "#fff", "fill-opacity": 0.5},"interactive": true},{"id": "highlight 89 copy 1","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all",["==", "class", "highlight"],["==", "level", 89]],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(167,36,237,1)","fill-pattern": "paleblue-lines-32"},"interactive": true},{"id": "shadow 78 (dotted) copy","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "hillshade","filter": ["all", ["==", "class", "shadow"], ["==", "level", 78]],"layout": {"visibility": "visible"},"paint": {"fill-color": "rgba(128,128,128,1)","fill-pattern": "13dot-blk16","fill-opacity": {"base": 1, "stops": [[14, 0], [18, 0.75]]},"fill-antialias": true,"fill-translate": [3, 5]},"interactive": true},{"id": "glacier bg","type": "fill","metadata": {"mapbox:group": "1452119469254.5605"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "landuse","filter": ["==", "type", "glacier"],"layout": {"visibility": "visible"},"paint": {"fill-color": "#fff","fill-opacity": {"base": 1,"stops": [[0, 1], [14, 0.5], [22, 0.3]]},"fill-outline-color": "#fff"},"interactive": true},{"id": "glacier outline","type": "line","metadata": {"mapbox:group": "1452119469254.5605"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "landuse","filter": ["==", "type", "glacier"],"layout": {"visibility": "visible"},"paint": {"line-color": "#62b0f0","line-width": {"base": 1, "stops": [[9, 0.5], [14, 1.5]]},"line-blur": 0.5,"line-dasharray": {"base": 1,"stops": [[0, [2, 1]], [14, [2, 4]]]}},"interactive": true},{"id": "glacier pattern - blue","type": "fill","metadata": {"mapbox:group": "1452119469254.5605"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "landuse","filter": ["==", "type", "glacier"],"layout": {"visibility": "visible"},"paint": {"fill-opacity": 0.6,"fill-pattern": "blue-widept-pattern","fill-translate-anchor": "map"},"interactive": true},{"id": "glacier pattern - blk","type": "fill","metadata": {"mapbox:group": "1452119469254.5605"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "landuse","filter": ["==", "type", "glacier"],"layout": {"visibility": "visible"},"paint": {"fill-opacity": 0.25,"fill-pattern": "blk-widept-pattern","fill-translate-anchor": "map","fill-translate": [0, 0]},"interactive": true},{"id": "contours","type": "line","metadata": {"mapbox:group": "1452037801360.402"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "contour","layout": {"visibility": "visible"},"paint": {"line-color": "#62b0f0","line-opacity": {"base": 1, "stops": [[9, 0.4], [13, 1]]},"line-width": {"base": 1, "stops": [[9, 0.25], [14, 0.75]]}},"interactive": true},{"id": "index contour ","type": "line","metadata": {"mapbox:group": "1452037801360.402"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "contour","filter": ["in", "index", 10, 5],"layout": {"visibility": "visible"},"paint": {"line-color": "#62b0f0","line-opacity": {"base": 1, "stops": [[9, 0.4], [18, 1]]},"line-width": {"base": 1, "stops": [[9, 1], [14, 2.5]]}},"interactive": true},{"id": "contour elevation","type": "symbol","metadata": {"mapbox:group": "1452037801360.402"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "contour","filter": ["in", "index", 10, 5],"layout": {"text-field": "{ele}","symbol-placement": "line","text-rotation-alignment": "map","text-font": ["Tisa Offc Pro Medium","Arial Unicode MS Regular"],"text-size": {"base": 1, "stops": [[9, 9], [14, 12]]}},"paint": {"text-color": "#62b0f0","text-halo-color": "rgba(255,255,255,0.8)","text-halo-width": 2},"interactive": true},{"id": "road minor case","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road","filter": ["all",["!in", "type", "aerialway", "piste"],["in","class","motorway_link","path","service","street","street_limited"]],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-color": "rgba(219,219,217,1)","line-width": {"base": 1.55, "stops": [[4, 0.05], [20, 4]]},"line-gap-width": {"base": 1.44, "stops": [[4, 0.5], [20, 20]]}},"interactive": true},{"id": "road minor","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road","filter": ["all",["!in", "type", "aerialway", "piste"],["in","class","motorway_link","path","service","street","street_limited"]],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 20]]},"line-color": "#fff"},"interactive": true},{"id": "tunnel minor case","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "tunnel","filter": ["in","class","motorway_link","path","service","street","street_limited"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-color": "rgba(219,219,217,1)","line-width": {"base": 1.55, "stops": [[4, 0.05], [20, 4]]},"line-gap-width": {"base": 1.44, "stops": [[4, 0.5], [20, 20]]},"line-dasharray": [2, 2.5]},"interactive": true},{"id": "tunnel minor","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "tunnel","filter": ["in","class","motorway_link","path","service","street","street_limited"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 20]]},"line-color": "#fff","line-opacity": 0.6},"interactive": true},{"id": "bridge minor case","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "bridge","filter": ["in","class","motorway_link","path","service","street","street_limited"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-color": "rgba(219,219,217,1)","line-width": {"base": 1.55, "stops": [[4, 0.05], [20, 4]]},"line-gap-width": {"base": 1.44, "stops": [[4, 0.5], [20, 20]]}},"interactive": true},{"id": "bridge minor","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "bridge","filter": ["in","class","motorway_link","path","service","street","street_limited"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-width": {"base": 1.55, "stops": [[4, 0.25], [20, 20]]},"line-color": "#fff"},"interactive": true},{"id": "tunnel major case","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "tunnel","filter": ["in","class","main","major_rail","motorway","motorway_link"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-gap-width": {"base": 1.4, "stops": [[6, 0.5], [20, 25]]},"line-color": "rgba(219,219,217,1)","line-width": {"base": 1.4, "stops": [[6, 1], [22, 2]]},"line-dasharray": [2, 2.5]},"interactive": true},{"id": "tunnel major","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "tunnel","filter": ["in","class","main","major_rail","motorway","motorway_link"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-color": "#fff","line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 25]]},"line-opacity": 0.6},"interactive": true},{"id": "bridge major case","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "bridge","filter": ["in","class","main","major_rail","motorway","motorway_link"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-gap-width": {"base": 1.4, "stops": [[6, 0.5], [20, 25]]},"line-color": "rgba(219,219,217,1)","line-width": {"base": 1.4, "stops": [[6, 1], [22, 2]]}},"interactive": true},{"id": "bridge major","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "bridge","filter": ["in","class","main","major_rail","motorway","motorway_link"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-color": "#fff","line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 25]]}},"interactive": true},{"id": "road major case","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road","filter": ["in","class","main","major_rail","motorway","motorway_link"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-gap-width": {"base": 1.4, "stops": [[6, 0.5], [20, 25]]},"line-color": "rgba(219,219,217,1)","line-width": {"base": 1.4, "stops": [[6, 1], [22, 2]]}},"interactive": true},{"id": "road major","type": "line","metadata": {"mapbox:group": "1452294613743.9702"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road","filter": ["in","class","main","major_rail","motorway","motorway_link"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-color": "#fff","line-width": {"base": 1.4, "stops": [[6, 0.5], [20, 25]]}},"interactive": true},{"id": "minor streets","type": "line","metadata": {"mapbox:group": "1452119539441.3816"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road","filter": ["all",["!in", "type", "aerialway", "cycleway", "footway", "piste"],["in", "class", "driveway", "path", "service", "street_limited"]],"layout": {"visibility": "visible"},"paint": {"line-color": "rgba(201,197,197,1)","line-opacity": 1,"line-width": 0.5},"interactive": true},{"id": "footway","type": "line","metadata": {"mapbox:group": "1452119539441.3816"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road","filter": ["all",["==", "class", "path"],["==", "type", "footway"]],"layout": {"visibility": "visible"},"paint": {"line-color": "rgba(143,140,140,1)","line-dasharray": [5, 2]},"interactive": true},{"id": "cycleway","type": "line","metadata": {"mapbox:group": "1452119539441.3816"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road","filter": ["all",["==", "class", "path"],["==", "type", "cycleway"]],"layout": {"visibility": "visible"},"paint": {"line-color": "rgba(97,151,201,1)","line-dasharray": [5, 3],"line-opacity": 1},"interactive": true},{"id": "piste","type": "line","metadata": {"mapbox:group": "1452119539441.3816"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road","filter": ["all", ["==", "class", "path"], ["==", "type", "piste"]],"layout": {"visibility": "visible"},"paint": {"line-color": "rgba(107,105,105,1)","line-width": {"base": 1, "stops": [[15, 1.5], [18, 3]]}},"interactive": true},{"id": "chair_lift","type": "line","metadata": {"mapbox:group": "1452119539441.3816"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "bridge","filter": ["all",["==", "class", "aerialway"],["in", "type", "cable_car", "chair_lift", "drag_lift"]],"layout": {"visibility": "visible"},"paint": {"line-color": {"base": 1,"stops": [[11, "rgba(163,163,163,1)"],[15, "rgba(171,169,169,1)"]]},"line-dasharray": [1, 0],"line-width": {"base": 1, "stops": [[11, 0.75], [16, 1.5]]}},"interactive": true},{"id": "chair_lift ticks","type": "line","metadata": {"mapbox:group": "1452119539441.3816"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "bridge","filter": ["all",["==", "class", "aerialway"],["in", "type", "cable_car", "chair_lift", "drag_lift"]],"layout": {"visibility": "visible","line-cap": "square","line-join": "bevel"},"paint": {"line-color": {"base": 1,"stops": [[11, "rgba(163,163,163,1)"],[15, "rgba(171,169,169,1)"]]},"line-dasharray": {"base": 1,"stops": [[11, [0.1, 2]], [17, [0.25, 4]], [22, [0.5, 6]]]},"line-translate-anchor": "viewport","line-width": {"base": 1, "stops": [[11, 4], [17, 8], [22, 12]]}},"interactive": true},{"id": "gondola","type": "line","metadata": {"mapbox:group": "1452119539441.3816"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "bridge","filter": ["==", "type", "gondola"],"layout": {"visibility": "visible"},"paint": {"line-color": {"base": 1,"stops": [[11, "rgba(163,163,163,1)"],[15, "rgba(171,169,169,1)"]]},"line-dasharray": [1, 0],"line-width": {"base": 1, "stops": [[11, 0.75], [18, 1.25]]}},"interactive": true},{"id": "gondola dots","type": "line","metadata": {"mapbox:group": "1452119539441.3816"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "bridge","filter": ["==", "type", "gondola"],"layout": {"visibility": "visible","line-cap": "butt","line-join": "round"},"paint": {"line-color": {"base": 1,"stops": [[11, "rgba(163,163,163,1)"],[15, "rgba(171,169,169,1)"]]},"line-dasharray": {"base": 1,"stops": [[11, [0.75, 1]], [17, [1, 2.5]]]},"line-width": {"base": 1, "stops": [[11, 2], [17, 3]]}},"interactive": true},{"id": "building","type": "line","metadata": {"mapbox:group": "1452123103210.5454"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "building","layout": {},"paint": {"line-color": {"base": 1,"stops": [[14, "rgba(10,10,10,1)"],[22, "rgba(120,120,120,1)"]]},"line-blur": 0.5,"line-opacity": {"base": 1,"stops": [[14, 0.05], [18, 0.5], [22, 1]]}},"interactive": true},{"id": "building copy","type": "fill","metadata": {"mapbox:group": "1452123103210.5454"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "building","layout": {},"paint": {"fill-pattern": "thin-diagonal-lines-blk32","fill-opacity": {"base": 1, "stops": [[14, 0.4], [18, 0.6]]}},"interactive": true},{"id": "boundaries","type": "line","metadata": {"mapbox:group": "1452377264560.7012"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "admin","filter": ["==", "maritime", 0],"layout": {"visibility": "visible", "line-join": "bevel"},"paint": {"line-color": "rgba(120,119,119,1)","line-dasharray": {"base": 1,"stops": [[0, [3, 2]], [8, [2, 1]], [14, [3, 4]]]},"line-width": {"base": 1,"stops": [[0, 0.25], [4, 1], [8, 2], [14, 5]]},"line-opacity": {"base": 1, "stops": [[0, 0.3], [6, 1]]}},"interactive": true},{"id": "maritime","type": "line","metadata": {"mapbox:group": "1452377264560.7012"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "admin","filter": ["==", "maritime", 1],"layout": {"visibility": "none"},"paint": {"line-color": "rgba(120,119,119,1)","line-dasharray": [1, 0],"line-width": {"base": 1,"stops": [[0, 0.5], [8, 1], [14, 2], [22, 4]]},"line-opacity": {"base": 1, "stops": [[0, 0.3], [6, 1]]}},"interactive": true},{"id": "maritime copy","type": "line","metadata": {"mapbox:group": "1452377264560.7012"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "admin","filter": ["==", "maritime", 1],"layout": {"visibility": "visible"},"paint": {"line-color": "rgba(129,176,214,1)","line-dasharray": [1, 0],"line-width": {"base": 1,"stops": [[0, 0.25], [4, 1], [8, 2.5], [14, 4], [22, 8]]},"line-opacity": {"base": 1, "stops": [[0, 0.3], [6, 1]]}},"interactive": true},{"id": "maritime copy 1","type": "line","metadata": {"mapbox:group": "1452377264560.7012"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "admin","filter": ["==", "maritime", 1],"layout": {"visibility": "visible"},"paint": {"line-color": "rgba(129,176,214,1)","line-dasharray": [1, 0],"line-width": {"base": 1,"stops": [[4, 1], [8, 2.5], [14, 4], [22, 8]]},"line-opacity": {"base": 1, "stops": [[0, 0.3], [6, 1]]},"line-blur": 4},"interactive": true},{"id": "POI labels","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "poi_label","filter": ["in","type","Alpine Hut","Attraction","Bed And Breakfast","Biergarten","Golf Course","Hotel","Yes"],"layout": {"visibility": "visible","text-field": "{name_en}","text-size": {"base": 1, "stops": [[15, 10], [18, 12]]},"text-font": ["Tisa Offc Pro Bold", "Arial Unicode MS Regular"]},"paint": {"text-opacity": 0.75,"text-color": "rgba(15,15,15,1)","text-halo-color": "rgba(255,255,255,1)","text-halo-blur": 0,"text-halo-width": 1.5},"interactive": true},{"id": "path label","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road_label","filter": ["==", "class", "path"],"layout": {"text-size": {"base": 1.4, "stops": [[14, 9.5], [22, 14]]},"text-max-angle": 45,"text-transform": "uppercase","text-font": ["Noto Sans CJK KR Medium","Arial Unicode MS Regular"],"symbol-placement": "line","visibility": "visible","text-offset": [0, -0.1],"text-rotation-alignment": "map","text-anchor": "center","text-field": "{name}"},"paint": {"text-color": "rgba(48,47,47,1)","text-halo-color": "rgba(252,252,252,1)","text-halo-width": 21},"interactive": true},{"id": "chairlift aerialway label","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road_label","filter": ["==", "class", "aerialway"],"layout": {"text-size": {"base": 1, "stops": [[15, 10], [22, 14]]},"text-max-angle": 0,"text-font": ["Noto Sans CJK KR DemiLight","Arial Unicode MS Regular"],"symbol-placement": "line","visibility": "visible","text-offset": {"base": 1,"stops": [[15, [0, 1.5]], [20, [0, 2.5]]]},"text-rotation-alignment": "map","text-anchor": "bottom","text-field": "{name}"},"paint": {"text-halo-color": "#fff","text-color": "rgba(69,68,68,1)","text-translate": {"base": 1,"stops": [[14, [15, 0]], [22, [40, 0]]]},"text-halo-width": 2,"text-halo-blur": 1},"interactive": true},{"id": "water-label","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "water_label","layout": {"text-size": {"base": 1,"stops": [[10, 9], [16, 14], [22, 20]]},"text-transform": "uppercase","text-font": ["Noto Sans CJK KR Medium","Arial Unicode MS Regular"],"symbol-placement": "point","visibility": "visible","text-rotation-alignment": "map","text-keep-upright": {"base": 1,"stops": [[0, true], [22, true]]},"text-field": "{name}","text-rotate": -45,"text-letter-spacing": {"base": 1,"stops": [[9, 0.5], [14, 1]]},"text-max-width": 20},"paint": {"text-color": "#62b0f0","text-halo-color": "rgba(252,252,252,0.8)","text-halo-width": {"base": 1, "stops": [[14, 1], [22, 2]]}},"interactive": true},{"id": "water-label (lg)","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "water_label","filter": [">=", "area", "258500"],"layout": {"text-size": {"base": 1,"stops": [[10, 10], [16, 16], [22, 22]]},"text-transform": "uppercase","text-font": ["Noto Sans CJK KR Medium","Arial Unicode MS Regular"],"symbol-placement": "point","visibility": "none","text-rotation-alignment": "map","text-keep-upright": {"base": 1,"stops": [[0, true], [22, true]]},"text-field": "{name}","text-rotate": -45,"text-letter-spacing": {"base": 1,"stops": [[9, 0.5], [14, 1]]},"text-max-width": 20},"paint": {"text-color": "#62b0f0","text-halo-color": "rgba(252,252,252,0.8)","text-halo-width": {"base": 1, "stops": [[14, 1], [22, 2]]}},"interactive": true},{"id": "waterway-label","type": "symbol","met