aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJakub Hampl <kopomir@gmail.com>2018-06-25 13:59:42 +0100
committerJakub Hampl <kopomir@gmail.com>2018-06-25 13:59:44 +0100
commit181401c4ffd06c127c57e27e2e88b05f7fdd1f88 (patch)
tree4c37265383c2c8eb19fad470ac71c9e04d256522
parent61477af04bafa8ba11a3d76ce5de3162e8d88255 (diff)
Fix issue with passing in token
-rw-r--r--examples/Example01.elm93
-rw-r--r--examples/Light.elm49
-rw-r--r--src/js/main.js2
3 files changed, 94 insertions, 50 deletions
diff --git a/examples/Example01.elm b/examples/Example01.elm
new file mode 100644
index 0000000..cac4bf9
--- /dev/null
+++ b/examples/Example01.elm
@@ -0,0 +1,93 @@
+module Example01 exposing (main)
+
+import Html exposing (div, text)
+import Html.Attributes exposing (style)
+import Json.Decode exposing (Value)
+import Json.Encode
+import MapCommands
+import Mapbox.Element exposing (..)
+import Mapbox.Expression as E exposing (false, float, int, str, true)
+import Mapbox.Layer as Layer
+import Mapbox.Source as Source
+import Mapbox.Style as Style exposing (Style(..))
+
+
+main =
+ Html.program
+ { init = init
+ , view = view
+ , update = update
+ , subscriptions = \m -> Sub.none
+ }
+
+
+init =
+ ( { position = ( 0, 0 ), selectedFeatures = [] }, Cmd.none )
+
+
+type Msg
+ = Hover EventData
+ | Click EventData
+
+
+mapPair f ( a, b ) =
+ ( f a, f b )
+
+
+update msg model =
+ case msg of
+ Hover { lngLat, renderedFeatures } ->
+ ( { model | position = lngLat, selectedFeatures = renderedFeatures }, Cmd.none )
+
+ Click { lngLat } ->
+ ( model, MapCommands.fitBounds [ MapCommands.linear True ] ( mapPair (\a -> a - 0.2) lngLat, mapPair (\a -> a + 0.2) lngLat ) )
+
+
+view model =
+ div [ style [ ( "width", "100vw" ), ( "height", "100vh" ) ] ]
+ [ css
+ , map
+ [ maxZoom 5
+ , onMouseMove Hover
+ , onClick Click
+ , id "my-map"
+ , model.selectedFeatures
+ |> List.map (\f -> ( f, [ ( "hover", Json.Encode.bool True ) ] ))
+ |> featureState
+ ]
+ (Style
+ { transition = Style.defaultTransition
+ , light = Style.defaultLight
+ , sources =
+ [ Source.vectorFromUrl "composite" "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7,astrosat.07pz1g3y" ]
+ , misc =
+ [ Style.name "light"
+ , Style.defaultCenter 20.39789404164037 43.22523201923144
+ , Style.defaultZoomLevel 1.5967483759772743
+ , Style.sprite "mapbox://sprites/astrosat/cjht22eqw0lfc2ro6z0qhlm29"
+ , Style.glyphs "mapbox://fonts/astrosat/{fontstack}/{range}.pbf"
+ ]
+ , layers =
+ [ Layer.background "background"
+ [ E.rgba 246 246 244 1 |> Layer.backgroundColor
+ ]
+ , Layer.fill "landcover"
+ "composite"
+ [ Layer.sourceLayer "landcover"
+ , E.any
+ [ E.getProperty (str "class") |> E.isEqual (str "wood")
+ , E.getProperty (str "class") |> E.isEqual (str "scrub")
+ , E.getProperty (str "class") |> E.isEqual (str "grass")
+ , E.getProperty (str "class") |> E.isEqual (str "crop")
+ ]
+ |> Layer.filter
+
+ -- , Layer.fillColor (E.rgba 227 227 227 1)
+ , Layer.fillColor (E.ifElse (E.coalesce [ (E.featureState (str "hover")), false ]) (E.rgba 20 227 227 1) (E.rgba 227 227 227 1))
+ , Layer.fillOpacity (float 0.6)
+ ]
+ ]
+ }
+ )
+ , div [ style [ ( "position", "absolute" ), ( "bottom", "20px" ), ( "left", "20px" ) ] ] [ text (toString model.position) ]
+ ]
diff --git a/examples/Light.elm b/examples/Light.elm
deleted file mode 100644
index a83308a..0000000
--- a/examples/Light.elm
+++ /dev/null
@@ -1,49 +0,0 @@
-module Light exposing (main)
-
-import Html exposing (text, pre)
-import Json.Encode
-import Mapbox.Expression exposing (..)
-import Mapbox.Layer as Layer
-import Mapbox.Source as Source
-import Mapbox.Style as Style
-
-
-style =
- Style.encode
- { transition = Style.defaultTransition
- , light = Style.defaultLight
- , sources =
- [ Source.vectorFromUrl "composite" "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7" ]
- , misc =
- [ Style.name "light"
- , Style.defaultCenter 20.39789404164037 43.22523201923144
- , Style.defaultZoomLevel 1.5967483759772743
- , Style.sprite "mapbox://sprites/seppotamminen/cjascxlb86kfe2rrvvtkd4ay1"
- , Style.glyphs "mapbox://fonts/seppotamminen/{fontstack}/{range}.pbf"
- ]
- , layers =
- [ Layer.background "background"
- [ getProperty (str "emotion")
- |> matchesStr (rgba 55 22 32 1) [ ( "funny", rgba 20 200 20 1 ), ( "angry", rgba 200 20 20 1 ) ]
- |> Layer.backgroundColor
- , zoom
- |> interpolate Linear
- [ ( 5, int 1 )
- , ( 10, int 5 )
- ]
- |> Layer.circleRadius
- , makeRGBColor
- -- red is higher when feature.properties.temperature is higher
- (getProperty (str "temperature"))
- -- green is always zero
- (int 0)
- -- blue is higher when feature.properties.temperature is lower
- (getProperty (str "temperature") |> minus (int 100))
- |> Layer.circleColor
- ]
- ]
- }
-
-
-main =
- pre [] [ text <| Json.Encode.encode 2 style ]
diff --git a/src/js/main.js b/src/js/main.js
index b1ec6fb..3d70e9b 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -13,7 +13,7 @@ function wrapElmApplication(elmApp, settings = {}) {
);
if (options.token) {
- mapboxgl.token = options.token;
+ mapboxgl.accessToken = options.token;
}
window.customElements.define(
"elm-mapbox-map",