diff options
-rw-r--r-- | src/Mapbox/Cmd.elm | 58 | ||||
-rw-r--r-- | src/js/main.js | 20 |
2 files changed, 76 insertions, 2 deletions
diff --git a/src/Mapbox/Cmd.elm b/src/Mapbox/Cmd.elm new file mode 100644 index 0000000..510c627 --- /dev/null +++ b/src/Mapbox/Cmd.elm @@ -0,0 +1,58 @@ +module Mapbox.Cmd exposing (..) + +{-| This module has a bunch of essentially imperative commands for your map. + +However, since a published library can't have ports in it, you will need to do some setup. The easiest way to do this is to copy paste the following code into your app: + + import Json.Decode exposing (Value) + import Mapbox.Cmd as Cmd + + port elmMapboxOutgoing : Value -> Cmd msg + + port elmMapboxIncoming : (Cmd.Response -> msg) -> Sub msg + + mapId = + {- this is whatever the `id` attribute on your map is -} + "my-map" + + flyTo = + Cmd.flyTo elmMapboxOutgoing mapId + +-} + +import Json.Encode as Encode exposing (Value) +import Mapbox.Element exposing (LngLat, Viewport) + + +type alias Outgoing msg = + Value -> Cmd msg + + +type alias Id = + String + + +encodePair encoder ( a, b ) = + Encode.list [ encoder a, encoder b ] + + +fitBounds : Outgoing msg -> Id -> ( LngLat, LngLat ) -> Cmd msg +fitBounds prt id bounds = + prt <| + Encode.object + [ ( "command", Encode.string "fitBounds" ) + , ( "target", Encode.string id ) + , ( "bounds", encodePair (encodePair Encode.float) bounds ) + ] + + + +-- +-- +-- flyTo : Outgoing msg -> Id -> Viewport -> { curve : Float } -> Cmd msg +-- flyTo prt id desiredViewport options = +-- prt <| +-- Encode.object +-- [ ( "command", Encode.string "flyTo" ) +-- , ( "target", Encode.string id ) +-- ] diff --git a/src/js/main.js b/src/js/main.js index 4f561fc..0d8b307 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,6 +1,9 @@ import mapboxgl from "mapbox-gl"; -function wrapElmApplication(elmApp) { +function wrapElmApplication(elmApp, options = {}) { + if (options.token) { + mapboxgl.token = options.token; + } window.customElements.define( "elm-mapbox-map", class MapboxMap extends window.HTMLElement { @@ -203,7 +206,9 @@ function wrapElmApplication(elmApp) { } connectedCallback() { - mapboxgl.accessToken = this.token; + if(this.token) { + mapboxgl.accessToken = this.token; + } this.style.display = "block"; this.style.width = "100%"; this.style.height = "100%"; @@ -216,6 +221,17 @@ function wrapElmApplication(elmApp) { } } ); + + if (elmApp.ports && elmApp.ports.elmMapboxOutgoing) { + elmApp.ports.elmMapboxOutgoing.subscribe(event => { + var target = document.getElementById(event.target); + switch(event.command) { + case "fitBounds": + return target.map.fitBounds(event.bounds); + } + }) + } + return elmApp; } |