aboutsummaryrefslogtreecommitdiffstats
path: root/src/js/main.js
diff options
context:
space:
mode:
authorJakub Hampl <kopomir@gmail.com>2018-06-21 13:25:42 +0100
committerJakub Hampl <kopomir@gmail.com>2018-06-21 13:25:42 +0100
commitebed6c06da9efa5b21a45432dfab7f2611b3882a (patch)
treecbbd11d499e58974cf9108230b8fefa55e9f2eab /src/js/main.js
parent02fe0daffa6581904031f4912be676eae35c6382 (diff)
Flesh out the imperative API
Diffstat (limited to 'src/js/main.js')
-rw-r--r--src/js/main.js90
1 files changed, 83 insertions, 7 deletions
diff --git a/src/js/main.js b/src/js/main.js
index 0d8b307..d105d3e 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,6 +1,17 @@
import mapboxgl from "mapbox-gl";
-function wrapElmApplication(elmApp, options = {}) {
+function wrapElmApplication(elmApp, settings = {}) {
+ const options = Object.assign(
+ {
+ outgoingPort: "elmMapboxOutgoing",
+ incomingPort: "elmMapboxIncoming",
+ easingFunctions: {
+ linear: t => t
+ }
+ },
+ settings
+ );
+
if (options.token) {
mapboxgl.token = options.token;
}
@@ -206,7 +217,7 @@ function wrapElmApplication(elmApp, options = {}) {
}
connectedCallback() {
- if(this.token) {
+ if (this.token) {
mapboxgl.accessToken = this.token;
}
this.style.display = "block";
@@ -223,16 +234,81 @@ function wrapElmApplication(elmApp, options = {}) {
);
if (elmApp.ports && elmApp.ports.elmMapboxOutgoing) {
- elmApp.ports.elmMapboxOutgoing.subscribe(event => {
- var target = document.getElementById(event.target);
- switch(event.command) {
+ function processOptions(opts) {
+ if (opts.easing) {
+ return Object.assign({}, opts, {easing: options.easingFunctions[opts.easing]});
+ }
+ return opts;
+ }
+
+ elmApp.ports[options.outgoingPort].subscribe(event => {
+ var map = document.getElementById(event.target).map;
+ switch (event.command) {
+ case "resize":
+ return map.resize();
+
case "fitBounds":
- return target.map.fitBounds(event.bounds);
+ return map.fitBounds(event.bounds, processOptions(event.options));
+
+ case "panBy":
+ return map.panBy(event.offset, processOptions(event.options));
+
+ case "panTo":
+ return map.panTo(event.location, processOptions(event.options));
+
+ case "zoomTo":
+ return map.zoomTo(event.zoom, processOptions(event.options));
+
+ case "zoomIn":
+ return map.zoomIn(processOptions(event.options));
+
+ case "zoomOut":
+ return map.zoomOut(processOptions(event.options));
+
+ case "rotateTo":
+ return map.rotateTo(event.bearing, processOptions(event.options));
+
+ case "jumpTo":
+ return map.jumpTo(processOptions(event.options));
+
+ case "easeTo":
+ return map.easeTo(processOptions(event.options));
+
+ case "flyTo":
+ return map.flyTo(processOptions(event.options));
+
+ case "stop":
+ return map.stop();
+
+ case "setRTLTextPlugin":
+ return map.setRTLTextPlugin(event.url);
+
+ case "getBounds":
+ return elmApp.ports[options.incomingPort].send({
+ type: "getBounds",
+ id: event.requestId,
+ bounds: map.getBounds().toArray()
+ });
+
+ case "queryRenderedFeatures":
+ return elmApp.ports[options.incomingPort].send({
+ type: "queryRenderedFeatures",
+ id: event.requestId,
+ features:
+ event.query === "viewport"
+ ? map.queryRenderedFeatures(processOptions(event.options))
+ : map.queryRenderedFeatures(
+ event.query,
+ processOptions(event.options)
+ )
+ });
}
- })
+ });
}
return elmApp;
}
+wrapElmApplication.supported = mapboxgl.supported;
+
export default wrapElmApplication;