From 164bda0c7782d9995fb4bbf990b06ce4e9038457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= Date: Thu, 12 Sep 2019 18:36:44 +0200 Subject: added patchfile to remove some errors in the npm package --- elm-mapbox.umd.js.patch | 75 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 elm-mapbox.umd.js.patch 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", -- cgit v1.2.3 From 1317c6de361af9d1f84abd9f0dba0408c5ef1831 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= Date: Thu, 12 Sep 2019 18:38:20 +0200 Subject: added special functions for decoding StyleDefinitions --- src/Mapbox/Layer.elm | 45 +++++++++++++++++++++++--- src/Mapbox/Source.elm | 18 +++++++++-- src/Mapbox/Style.elm | 89 +++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 143 insertions(+), 9 deletions(-) diff --git a/src/Mapbox/Layer.elm b/src/Mapbox/Layer.elm index dea484c..8d9cb63 100644 --- a/src/Mapbox/Layer.elm +++ b/src/Mapbox/Layer.elm @@ -1,6 +1,6 @@ module Mapbox.Layer exposing ( Layer, SourceId, encode - , background, fill, symbol, line, raster, circle, fillExtrusion, heatmap, hillshade + , background, fill, json, jsonList, symbol, line, raster, circle, fillExtrusion, heatmap, hillshade , Background, Fill, Symbol, Line, Raster, Circle, FillExtrusion, Heatmap, Hillshade , LayerAttr , metadata, sourceLayer, minzoom, maxzoom, filter, visible @@ -13,6 +13,7 @@ module Mapbox.Layer exposing , rasterBrightnessMax, rasterBrightnessMin, rasterContrast, rasterFadeDuration, rasterHueRotate, rasterOpacity, rasterResampling, rasterSaturation , hillshadeAccentColor, hillshadeExaggeration, hillshadeHighlightColor, hillshadeIlluminationAnchor, hillshadeIlluminationDirection, hillshadeShadowColor , backgroundColor, backgroundOpacity, backgroundPattern + , decode ) {-| Layers specify what is actually rendered on the map and are rendered in order. @@ -46,8 +47,8 @@ Paint properties are applied later in the rendering process. Changes to a paint ### Layer Types -@docs background, fill, symbol, line, raster, circle, fillExtrusion, heatmap, hillshade -@docs Background, Fill, Symbol, Line, Raster, Circle, FillExtrusion, Heatmap, Hillshade +@docs background, fill, json, jsonList, symbol, line, raster, circle, fillExtrusion, heatmap, hillshade +@docs Background, Fill, Json, Symbol, Line, Raster, Circle, FillExtrusion, Heatmap, Hillshade ### General Attributes @@ -100,10 +101,16 @@ Paint properties are applied later in the rendering process. Changes to a paint @docs backgroundColor, backgroundOpacity, backgroundPattern + +### List Decoder + +@docs decode + -} import Array exposing (Array) import Internal exposing (Supported) +import Json.Decode as Decode exposing (Decoder) import Json.Encode as Encode exposing (Value) import Mapbox.Expression as Expression exposing (CameraExpression, Color, DataExpression, Expression, FormattedText) @@ -165,6 +172,11 @@ type Hillshade = HillshadeLayer +{-| -} +type Json + = JsonLayer + + {-| Turns a layer into JSON -} encode : Layer -> Value @@ -173,8 +185,8 @@ encode (Layer value) = layerImpl tipe id source attrs = - [ ( "type", Encode.string tipe ) - , ( "id", Encode.string id ) + [ ( "id", Encode.string id ) + , ( "type", Encode.string tipe ) , ( "source", Encode.string source ) ] ++ encodeAttrs attrs @@ -271,6 +283,29 @@ hillshade = layerImpl "hillshade" +{-| Directly aass a json value layer +-} +json : Value -> Layer +json = + Layer + + +{-| Directly aass a json value layer +-} +jsonList : String -> List Layer +jsonList = + Decode.decodeString (Decode.list Decode.value) + >> Result.withDefault [] + >> List.map json + + +{-| Directly aass a json value layer +-} +decode : Decoder (List Layer) +decode = + Decode.list (Decode.value |> Decode.map json) + + {-| -} type LayerAttr tipe = Top String Value diff --git a/src/Mapbox/Source.elm b/src/Mapbox/Source.elm index 68d1862..5ca38ea 100644 --- a/src/Mapbox/Source.elm +++ b/src/Mapbox/Source.elm @@ -1,6 +1,6 @@ module Mapbox.Source exposing ( Source, SourceOption - , Id, Url + , Id, Url, decode , vector, vectorFromUrl, VectorSource , raster, tileSize, rasterFromUrl, RasterSource , rasterDEMMapbox, rasterDEMTerrarium @@ -17,7 +17,7 @@ module Mapbox.Source exposing @docs Source, SourceOption -@docs Id, Url +@docs Id, Url, decode ### Vector @@ -58,7 +58,9 @@ Tiled sources can also take the following attributes: -} +import Dict import Internal +import Json.Decode as Decode exposing (Decoder) import Json.Encode exposing (Value) import LngLat exposing (LngLat) import Mapbox.Expression as Expression exposing (DataExpression, Expression) @@ -122,6 +124,18 @@ encode (Source _ value) = value +{-| -} +decode : Decoder (List Source) +decode = + Decode.dict Decode.value + |> Decode.map (Dict.toList >> List.map tupleToSource) + + +tupleToSource : ( String, Value ) -> Source +tupleToSource ( id, value ) = + Source id value + + {-| -} getId : Source -> String getId (Source k _) = diff --git a/src/Mapbox/Style.elm b/src/Mapbox/Style.elm index c33de45..20a91c1 100644 --- a/src/Mapbox/Style.elm +++ b/src/Mapbox/Style.elm @@ -1,5 +1,5 @@ module Mapbox.Style exposing - ( Style(..), encode, StyleDef + ( Style(..), encode, StyleDef, decode, MiscDef, decodeMiscDef, miscDefToList , Light, defaultLight , Transition, defaultTransition , MiscAttr, sprite, glyphs, name, defaultCenter, defaultZoomLevel, defaultBearing, defaultPitch, metadata @@ -8,7 +8,7 @@ module Mapbox.Style exposing {-| A Mapbox style is a document that defines the visual appearance of a map: what data to draw, the order to draw it in, and how to style the data when drawing it. A style document is a JSON object with specific root level and nested properties. This specification defines and describes these properties. -@docs Style, encode, StyleDef +@docs Style, encode, StyleDef, decode, MiscDef, decodeMiscDef, miscDefToList ### Light @@ -35,7 +35,9 @@ You can also use one of these predefined styles. -} import Array exposing (Array) +import Dict import Internal exposing (Supported) +import Json.Decode as Decode exposing (Decoder) import Json.Encode as Encode exposing (Value) import LngLat exposing (LngLat) import Mapbox.Expression exposing (CameraExpression, Color, Expression, float, floats, rgba, viewport) @@ -154,6 +156,18 @@ type alias StyleDef = } +type alias MiscDef = + { sprite : Maybe MiscAttr + , glyphs : Maybe MiscAttr + , name : Maybe MiscAttr + , center : Maybe MiscAttr + , zoom : Maybe MiscAttr + , bearing : Maybe MiscAttr + , pitch : Maybe MiscAttr + , meta : Maybe MiscAttr + } + + {-| -} type MiscAttr = MiscAttr String Value @@ -285,3 +299,74 @@ defaultTransition = { duration = 300 , delay = 0 } + + +{-| -} +decode : Decoder StyleDef +decode = + Decode.map5 StyleDef + (Decode.maybe decTransition + |> Decode.map (Maybe.withDefault defaultTransition) + ) + (Decode.succeed defaultLight) + (Decode.field "layers" Mapbox.Layer.decode) + (Decode.field "sources" Mapbox.Source.decode) + (Decode.succeed []) + + +decTransition : Decoder Transition +decTransition = + Decode.map2 Transition + (Decode.field "duration" Decode.int) + (Decode.field "delay" Decode.int) + + +maybeDecode : String -> Decoder a -> (a -> b) -> Decoder (Maybe b) +maybeDecode id dec fn = + Decode.field id (dec |> Decode.map fn) + |> Decode.maybe + + +{-| -} +decodeMiscDef : Decoder MiscDef +decodeMiscDef = + Decode.map8 MiscDef + (maybeDecode "sprite" Decode.string sprite) + (maybeDecode "glyphs" Decode.string glyphs) + (maybeDecode "name" Decode.string name) + (maybeDecode "center" + (Decode.float + |> Decode.list + |> Decode.andThen + (\list -> + case list of + [ lng, lat ] -> + Decode.succeed <| LngLat lng lat + + _ -> + Decode.fail "not a valid position" + ) + ) + defaultCenter + ) + (maybeDecode "zoom" Decode.float defaultZoomLevel) + (maybeDecode "pitch" Decode.float defaultPitch) + (maybeDecode "bearing" Decode.float defaultBearing) + (maybeDecode "metadata" (Decode.dict Decode.value) (Dict.toList >> metadata)) + + +maybeSingleton : Maybe MiscAttr -> List MiscAttr +maybeSingleton = + Maybe.map List.singleton >> Maybe.withDefault [] + + +{-| -} +miscDefToList : MiscDef -> List MiscAttr +miscDefToList miscDef = + maybeSingleton miscDef.sprite + ++ maybeSingleton miscDef.glyphs + ++ maybeSingleton miscDef.name + ++ maybeSingleton miscDef.center + ++ maybeSingleton miscDef.zoom + ++ maybeSingleton miscDef.bearing + ++ maybeSingleton miscDef.pitch -- cgit v1.2.3 From e2c5a97654e05d6136c88e85cda23ea79c2a25af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= Date: Thu, 12 Sep 2019 18:40:51 +0200 Subject: added some examples that show how a style can be loaded either from a string, only layers (Example03) or how to grab a style by using its url and than adding additional layers --- examples/Example03.elm | 151 +++++++++++++++++++++++++++++++++++++++++ examples/Example04.elm | 180 +++++++++++++++++++++++++++++++++++++++++++++++++ examples/Map.elm | 8 +++ examples/elm.json | 1 + 4 files changed, 340 insertions(+) create mode 100644 examples/Example03.elm create mode 100644 examples/Example04.elm create mode 100644 examples/Map.elm 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","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "waterway_label","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": "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": "glacier labels","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "poi_label","filter": ["==", "type", "Glacier"],"layout": {"text-size": {"base": 1,"stops": [[11, 16], [14, 26], [17, 46], [22, 60]]},"text-allow-overlap": false,"icon-offset": [-5, 3],"text-transform": "none","text-font": {"base": 1,"stops": [[12,["Olsen Offc Pro Italic","Arial Unicode MS Regular"]],[22,["Olsen Offc Pro Light Italic","Arial Unicode MS Regular"]]]},"visibility": "visible","icon-size": 1,"text-anchor": "bottom","text-field": "{name_en}","text-letter-spacing": {"base": 1,"stops": [[14, 0.05], [22, 0.5]]},"text-max-width": {"base": 1,"stops": [[10, 8], [17, 12], [22, 20]]}},"paint": {"text-opacity": 1,"text-translate": {"base": 1,"stops": [[10, [0, 10]], [22, [5, 0]]]},"icon-opacity": 0.7,"text-halo-color": "rgba(247,247,247,1)","text-color": "#62b0f0","text-halo-width": {"base": 1,"stops": [[14, 2], [18, 3], [22, 4]]}},"interactive": true},{"id": "peak labels elevation","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "poi_label","filter": ["==", "type", "Peak"],"layout": {"text-size": {"base": 1,"stops": [[7, 12], [17, 15], [22, 20]]},"text-allow-overlap": true,"icon-offset": {"base": 1,"stops": [[0, [-22, 0]], [22, [-26, 0]]]},"icon-image": "peak-x","symbol-avoid-edges": false,"text-font": ["Tisa Offc Pro Bold", "Arial Unicode MS Regular"],"icon-allow-overlap": true,"text-justify": "center","visibility": "visible","icon-size": {"base": 1, "stops": [[17, 0.75], [22, 1]]},"text-anchor": "center","text-field": "{ref}","text-letter-spacing": 0.05},"paint": {"text-opacity": 0.75,"text-translate": [8, 0],"text-halo-color": "rgba(252,252,252,1)","text-halo-width": 1,"text-color": "#000","icon-opacity": {"base": 1, "stops": [[0, 0.7], [22, 1]]}},"interactive": true},{"id": "peak labels","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "poi_label","filter": ["==", "type", "Peak"],"layout": {"text-size": {"base": 1,"stops": [[10, 13], [17, 18], [22, 30]]},"text-allow-overlap": false,"icon-offset": {"base": 1,"stops": [[9, [-8, -6]], [22, [-8, 3]]]},"text-transform": "uppercase","text-font": ["Tisa Offc Pro Bold", "Arial Unicode MS Regular"],"text-justify": "center","visibility": "visible","icon-size": {"base": 1, "stops": [[14, 0.75], [22, 1]]},"text-anchor": "bottom","text-field": "{name_en}"},"paint": {"text-opacity": 0.75,"text-translate": [5, -10],"icon-opacity": 0.7,"text-halo-color": "rgba(252,252,252,1)","text-halo-width": 1},"interactive": true},{"id": "road-label","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "road_label","filter": ["!in", "class", "aerialway", "path"],"layout": {"text-size": {"base": 1.4,"stops": [[6, 7], [14, 9], [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(122,118,118,1)","text-halo-color": "rgba(252,252,252,1)","text-halo-width": 21},"interactive": true},{"id": "place-label","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "place_label","filter": ["all",["<", "localrank", 14],["in","type","city","hamlet","neighbourhood","suburb","town","village"]],"layout": {"visibility": "visible","text-field": "{name_en}","text-font": ["Tisa Offc Pro Medium","Arial Unicode MS Regular"],"text-size": {"base": 1,"stops": [[10, 10], [17, 16], [22, 35]]},"text-letter-spacing": 0.025,"text-transform": "uppercase","text-offset": [0, 0]},"paint": {"text-color": "rgba(48,48,48,1)","text-halo-width": 3,"text-halo-color": "rgba(252,252,252,1)"},"interactive": true},{"id": "country-label","type": "symbol","metadata": {"mapbox:group": "1452214567277.007"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "country_label","layout": {"visibility": "visible","text-field": "{name_en}","text-font": ["Tisa Offc Pro Extrabold","Arial Unicode MS Regular"],"text-size": {"base": 1,"stops": [[10, 12], [17, 18], [22, 45]]},"text-letter-spacing": 0.025,"text-transform": "uppercase"},"paint": {"text-color": "rgba(48,48,48,1)","text-halo-color": "rgba(252,252,252,1)","text-halo-width": 3},"interactive": true},{"id": "ne-10m-graticules-5","type": "line","metadata": {"mapbox:group": "1452377121122.9236"},"source": "mapbox://mslee.0fc2f90a","source-layer": "ne_10m_graticules_5","layout": {"visibility": "none"},"paint": {"line-opacity": {"base": 1, "stops": [[3, 0], [6, 1]]},"line-width": 1.5,"line-color": "rgba(84,82,82,1)"},"interactive": true},{"id": "ne-10m-graticules-1","type": "line","metadata": {"mapbox:group": "1452377121122.9236"},"source": "mapbox://mslee.0fc2f90a","source-layer": "ne_10m_graticules_1","layout": {"visibility": "none"},"paint": {"line-width": 0.25,"line-opacity": {"base": 1, "stops": [[5, 0], [8, 1]]},"line-color": "rgba(84,82,82,1)"},"interactive": true},{"id": "ne-10m-graticules-10","type": "line","metadata": {"mapbox:group": "1452377121122.9236"},"source": "mapbox://mslee.0fc2f90a","source-layer": "ne_10m_graticules_10","layout": {"visibility": "none"},"paint": {"line-width": {"base": 1, "stops": [[2, 0.75], [6, 3]]},"line-opacity": {"base": 1, "stops": [[2, 0], [5, 0.6]]},"line-color": "rgba(84,82,82,1)"},"interactive": true}] +""" diff --git a/examples/elm.json b/examples/elm.json index 2017dd4..44742fd 100644 --- a/examples/elm.json +++ b/examples/elm.json @@ -10,6 +10,7 @@ "elm/browser": "1.0.0", "elm/core": "1.0.0", "elm/html": "1.0.0", + "elm/http": "1.0.0", "elm/json": "1.0.0" }, "indirect": { -- cgit v1.2.3 From a312ae381ff9bbaa5c7c4b5633b9bc513b40096f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= Date: Thu, 12 Sep 2019 18:41:26 +0200 Subject: start using example 04 --- examples/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/examples/index.js b/examples/index.js index c1efd55..b76d28f 100644 --- a/examples/index.js +++ b/examples/index.js @@ -1,9 +1,11 @@ import { registerCustomElement, registerPorts } from "elm-mapbox"; import "mapbox-gl/dist/mapbox-gl.css"; -import { Elm } from "./Example02.elm"; +import { Elm } from "./Example04.elm"; + +const token = "pk.eyJ1IjoiZW..."; -const token = process.env.MAPBOX_TOKEN; registerCustomElement({token}); -var app = Elm.Example02.init({node: document.body}); -// registerPorts(app); +var app = Elm.Example04.init({node: document.body}); + +registerPorts(app); -- cgit v1.2.3 From 82548a513a9ba05fd97ff605c577b85c11f71615 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= Date: Thu, 12 Sep 2019 18:59:17 +0200 Subject: updated README with information about changes ... --- README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/README.md b/README.md index bd08c04..d46df72 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,43 @@ + +> 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": "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"} ... + """ + |> 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. -- cgit v1.2.3 From 6a3495171159e93c8cd6836f1824b8273161b833 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= Date: Thu, 12 Sep 2019 19:07:48 +0200 Subject: updated readme --- README.md | 11 +- examples/Example01.elm | 1 - examples/MapCommands.elm | 6 +- examples/package-lock.json | 4277 +++++++++++++++++++++----------------------- examples/package.json | 7 +- 5 files changed, 2069 insertions(+), 2233 deletions(-) diff --git a/README.md b/README.md index d46df72..3f31f30 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ > https://github.com/gampleman/elm-mapbox > > I will remove the project when this functionality will be available in the -> original project. +> original project. __Changes:__ @@ -27,7 +27,14 @@ __Changes:__ , light = Style.defaultLight , 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"} ... + [{"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 , ... 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/MapCommands.elm b/examples/MapCommands.elm index 1730ee1..f8b21f2 100644 --- a/examples/MapCommands.elm +++ b/examples/MapCommands.elm @@ -1,4 +1,8 @@ -port module MapCommands exposing (easeTo, fitBounds, flyTo, id, jumpTo, panBy, panTo, resize, rotateTo, stop, zoomIn, zoomOut, zoomTo) +port module MapCommands exposing + ( id + , panBy, panTo, zoomTo, zoomIn, zoomOut, rotateTo, jumpTo, easeTo, flyTo, fitBounds, stop + , resize + ) {-| Tell your map to do something! Most of these Commands tell your map to (with or without animation) to show a different location. You can use the options from `Mapbox.Cmd.Option` to configure these. diff --git a/examples/package-lock.json b/examples/package-lock.json index ef900be..44c240a 100644 --- a/examples/package-lock.json +++ b/examples/package-lock.json @@ -14,22 +14,22 @@ } }, "@babel/core": { - "version": "7.2.2", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.2.2.tgz", - "integrity": "sha512-59vB0RWt09cAct5EIe58+NzGP4TFSD3Bz//2/ELy3ZeTeKF6VTD1AXlH8BGGbCX0PuobZBsIzO7IAI9PH67eKw==", + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.3.4.tgz", + "integrity": "sha512-jRsuseXBo9pN197KnDwhhaaBzyZr2oIcLHHTt2oDdQrej5Qp57dCCJafWx5ivU8/alEYDpssYqv1MUqcxwQlrA==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", - "@babel/generator": "^7.2.2", + "@babel/generator": "^7.3.4", "@babel/helpers": "^7.2.0", - "@babel/parser": "^7.2.2", + "@babel/parser": "^7.3.4", "@babel/template": "^7.2.2", - "@babel/traverse": "^7.2.2", - "@babel/types": "^7.2.2", + "@babel/traverse": "^7.3.4", + "@babel/types": "^7.3.4", "convert-source-map": "^1.1.0", "debug": "^4.1.0", "json5": "^2.1.0", - "lodash": "^4.17.10", + "lodash": "^4.17.11", "resolve": "^1.3.2", "semver": "^5.4.1", "source-map": "^0.5.0" @@ -53,14 +53,14 @@ } }, "@babel/generator": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.3.2.tgz", - "integrity": "sha512-f3QCuPppXxtZOEm5GWPra/uYUjmNQlu9pbAD8D/9jze4pTY83rTtB1igTBSwvkeNlC5gR24zFFkz+2WHLFQhqQ==", + "version": "7.3.4", + "resolved": "ht