aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorJakub Hampl <kopomir@gmail.com>2018-06-19 16:39:32 +0100
committerJakub Hampl <kopomir@gmail.com>2018-06-19 16:39:32 +0100
commit0a9c6ce16ae78e89d8853fc1bb07549494592158 (patch)
tree02d7f4abaf7058d43feb4286e5f9380e4fd86ac4 /src
parent33692211beb4705ad79a1cc90c28f864a28686ba (diff)
Adds a custom element for mapbox integration
Diffstat (limited to 'src')
-rw-r--r--src/Mapbox/Element.elm106
-rw-r--r--src/Mapbox/Layer.elm2
-rw-r--r--src/js/main.js92
3 files changed, 199 insertions, 1 deletions
diff --git a/src/Mapbox/Element.elm b/src/Mapbox/Element.elm
new file mode 100644
index 0000000..4ca28cc
--- /dev/null
+++ b/src/Mapbox/Element.elm
@@ -0,0 +1,106 @@
+module Mapbox.Element exposing (..)
+
+import Html exposing (Attribute, Html, node)
+import Html.Attributes exposing (property, attribute)
+import Json.Encode as Encode
+import Mapbox.Style exposing (Style)
+
+
+type MapboxAttr msg
+ = MapboxAttr (Attribute msg)
+
+
+type Control msg
+ = Control (Html msg)
+
+
+type Position
+ = TopLeft
+ | BottomLeft
+ | TopRight
+ | BottomRight
+
+
+map : List (MapboxAttr msg) -> List (Control msg) -> Html msg
+map attrs children =
+ let
+ props =
+ (List.map (\(MapboxAttr attr) -> attr) attrs)
+ in
+ node "elm-mapbox-map" props []
+
+
+css : Html msg
+css =
+ node "link" [ attribute "href" "https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css", attribute "rel" "stylesheet" ] []
+
+
+style : Style -> MapboxAttr msg
+style =
+ Mapbox.Style.encode >> property "mapboxStyle" >> MapboxAttr
+
+
+minZoom : Float -> MapboxAttr msg
+minZoom =
+ Encode.float >> property "minZoom" >> MapboxAttr
+
+
+maxZoom : Float -> MapboxAttr msg
+maxZoom =
+ Encode.float >> property "maxZoom" >> MapboxAttr
+
+
+token : String -> MapboxAttr msg
+token =
+ Encode.string >> property "token" >> MapboxAttr
+
+
+id : String -> MapboxAttr msg
+id =
+ attribute "id" >> MapboxAttr
+
+
+type alias LngLat =
+ ( Float, Float )
+
+
+{-| sw: lnglat, ne: lnglat
+-}
+maxBounds : ( LngLat, LngLat ) -> MapboxAttr msg
+maxBounds =
+ encodePair (encodePair Encode.float) >> property "maxBounds" >> MapboxAttr
+
+
+renderWorldCopies : Bool -> MapboxAttr msg
+renderWorldCopies =
+ Encode.bool >> property "renderWorldCopies" >> MapboxAttr
+
+
+encodePair encoder ( a, b ) =
+ Encode.list [ encoder a, encoder b ]
+
+
+encodePosition pos =
+ case pos of
+ TopLeft ->
+ Encode.string "top-left"
+
+ BottomLeft ->
+ Encode.string "bottom-left"
+
+ TopRight ->
+ Encode.string "top-right"
+
+ BottomRight ->
+ Encode.string "bottom-right"
+
+
+
+--- Controlled mode
+
+
+{-| Note: this property will only take effect when the map is created.
+-}
+controlled : MapboxAttr msg
+controlled =
+ property "interactive" (Encode.bool False) |> MapboxAttr
diff --git a/src/Mapbox/Layer.elm b/src/Mapbox/Layer.elm
index 8d97965..ad60292 100644
--- a/src/Mapbox/Layer.elm
+++ b/src/Mapbox/Layer.elm
@@ -285,7 +285,7 @@ encode (Layer value) =
value
-layerImpl tipe source id attrs =
+layerImpl tipe id source attrs =
[ ( "type", Encode.string tipe )
, ( "id", Encode.string id )
, ( "source", Encode.string source )
diff --git a/src/js/main.js b/src/js/main.js
new file mode 100644
index 0000000..c2b3120
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,92 @@
+import mapboxgl from "mapbox-gl";
+
+function wrapElmApplication(elmApp) {
+ window.customElements.define(
+ "elm-mapbox-map",
+ class MapboxMap extends window.HTMLElement {
+ constructor() {
+ super();
+ this._refreshExpiredTiles = true;
+ this._renderWorldCopies = true;
+ this.interactive = true;
+ }
+
+ get mapboxStyle() {
+ return this._style;
+ }
+ set mapboxStyle(value) {
+ if (this._map) this._map.setStyle(value);
+ this._style = value;
+ }
+
+ get minZoom() {
+ return this._minZoom;
+ }
+ set minZoom(value) {
+ if (this._map) this._map.setMinZoom(value);
+ this._minZoom = value;
+ }
+
+ get maxZoom() {
+ return this._maxZoom;
+ }
+ set maxZoom(value) {
+ if (this._map) this._map.setMaxZoom(value);
+ this._maxZoom = value;
+ }
+
+ get map() {
+ return this._map;
+ }
+
+ get maxBounds() {
+ return this._maxBounds;
+ }
+ set maxBounds(value) {
+ if (this._map) this._map.setBounds(value);
+ this._maxBounds = value;
+ }
+
+ get renderWorldCopies() {
+ return this._renderWorldCopies;
+ }
+ set renderWorldCopies(value) {
+ if (this._map) this._map.setRenderWorldCopies(value);
+ this._renderWorldCopies = value;
+ }
+
+ connectedCallback() {
+ mapboxgl.accessToken = this.token;
+ this.style.display = "block";
+ this.style.width = "100%";
+ this.style.height = "100%";
+ this._map = new mapboxgl.Map({
+ container: this,
+ style: this._style,
+ minZoom: this._minZoom || 0,
+ maxZoom: this._maxZoom || 22,
+ interactive: this.interactive,
+ attributionControl: false,
+ logoPosition: this.logoPosition || "bottom-left",
+ refreshExpiredTiles: this._refreshExpiredTiles,
+ maxBounds: this._maxBounds,
+ center: this.center,
+ // zoom: this.zoom,
+ // bearing: this.bearing,
+ // pitch: this.pitch,
+ renderWorldCopies: this._renderWorldCopies
+ // maxTileCacheSize: this._maxTileCacheSize,
+ // localIdeographFamily: this._localIdeographFamily
+ });
+ }
+
+ disconnectedCallback() {
+ this._map.remove();
+ delete this._map;
+ }
+ }
+ );
+ return elmApp;
+}
+
+export default wrapElmApplication;