aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/Mapbox/Cmd.elm58
-rw-r--r--src/js/main.js20
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;
}