Add basic Command module

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;
 }