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

9 files changed, 2353 insertions, 2182 deletions

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","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/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/elm.json b/examples/elm.json
index 2017dd4..ffff9fc 100644
--- a/examples/elm.json
+++ b/examples/elm.json
@@ -4,12 +4,13 @@
         "../src",
         "."
     ],
-    "elm-version": "0.19.0",
+    "elm-version": "0.19.1",
     "dependencies": {
         "direct": {
             "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": {
@@ -22,4 +23,4 @@
         "direct": {},
         "indirect": {}
     }
-}
\ No newline at end of file
+}
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);
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",