aboutsummaryrefslogtreecommitdiffstats
path: root/examples/Example03.elm
diff options
context:
space:
mode:
authorAndré Dietrich <andre.dietrich@ovgu.de>2019-09-12 18:40:51 +0200
committerAndré Dietrich <andre.dietrich@ovgu.de>2019-09-12 18:40:51 +0200
commite2c5a97654e05d6136c88e85cda23ea79c2a25af (patch)
tree91ed0d7c98d0cbf4cc268f20a203e84f4f09eae7 /examples/Example03.elm
parent1317c6de361af9d1f84abd9f0dba0408c5ef1831 (diff)
added some examples that show how a style can be loaded either from a string, only layers (Example03) or how to grab a style by using its url and than adding additional layers
Diffstat (limited to 'examples/Example03.elm')
-rw-r--r--examples/Example03.elm151
1 files changed, 151 insertions, 0 deletions
diff --git a/examples/Example03.elm b/examples/Example03.elm
new file mode 100644
index 0000000..ddd1d02
--- /dev/null
+++ b/examples/Example03.elm
@@ -0,0 +1,151 @@
+module Example03 exposing (main)
+
+import Browser
+import Html exposing (div, text)
+import Html.Attributes exposing (style)
+import Html.Lazy exposing (lazy)
+import Json.Decode
+import Json.Encode
+import LngLat exposing (LngLat)
+import Map
+import MapCommands
+import Mapbox.Cmd.Option as Opt
+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 =
+ Browser.document
+ { init = init
+ , view = view
+ , update = update
+ , subscriptions = subscriptions
+ }
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+ Sub.batch
+ [ Commands.elmMapboxIncoming MapCenter
+ ]
+
+
+type alias Model =
+ { position : LngLat
+ , zoom : Float
+ , features : List Json.Encode.Value
+ }
+
+
+init : () -> ( Model, Cmd Msg )
+init () =
+ ( { position = LngLat 0 0, zoom = 13.8, features = [] }, Cmd.none )
+
+
+type Msg
+ = Hover EventData
+ | Click EventData
+ | MapCenter Json.Encode.Value
+
+
+update msg model =
+ case msg of
+ Hover { lngLat, renderedFeatures } ->
+ ( { model | position = lngLat, features = renderedFeatures }, Cmd.none )
+
+ Click { lngLat, renderedFeatures } ->
+ ( { model | position = lngLat, features = renderedFeatures }, Commands.fitBounds "my-map" [ Opt.linear True, Opt.maxZoom 10 ] ( LngLat.map (\a -> a - 0.2) lngLat, LngLat.map (\a -> a + 0.2) lngLat ) )
+
+ MapCenter e ->
+ ( model, Cmd.none )
+
+
+geojson : Json.Encode.Value
+geojson =
+ Json.Decode.decodeString Json.Decode.value """
+{
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "id": 1,
+ "properties": {
+ "name": "Bermuda Triangle",
+ "area": 1150180
+ },
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [-64.73, 32.31],
+ [-80.19, 25.76],
+ [-66.09, 18.43],
+ [-64.73, 32.31]
+ ]
+ ]
+ }
+ }
+ ]
+}
+""" |> Result.withDefault (Json.Encode.object [])
+
+
+hoveredFeatures : List Json.Encode.Value -> MapboxAttr msg
+hoveredFeatures =
+ List.map (\feat -> ( feat, [ ( "hover", Json.Encode.bool True ) ] ))
+ >> featureState
+
+
+showMap features =
+ map
+ [ maxZoom 150
+ , onMouseMove Hover
+ , onClick Click
+ , id "my-map"
+ , eventFeaturesLayers [ "changes" ]
+ , hoveredFeatures features
+ ]
+ (Style
+ { transition = Style.defaultTransition
+ , light = Style.defaultLight
+ , layers =
+ (Map.layers
+ |> Layer.jsonList
+ )
+ ++ [ Layer.fill "changes"
+ "changes"
+ [ Layer.fillOpacity (E.ifElse (E.toBool (E.featureState (str "hover"))) (float 0.9) (float 0.1))
+ ]
+ ]
+ , sources =
+ [ Source.vectorFromUrl "mapbox://mapbox.mapbox-streets-v6" "mapbox://mapbox.mapbox-streets-v6"
+ , Source.vectorFromUrl "mapbox://mapbox.mapbox-terrain-v2" "mapbox://mapbox.mapbox-terrain-v2"
+ , Source.vectorFromUrl "mapbox://mslee.0fc2f90a" "mapbox://mslee.0fc2f90a"
+ , Source.geoJSONFromValue "changes" [] geojson
+ ]
+ , misc =
+ [ Style.sprite "mapbox://sprites/engiadina/ck0dvc9zq0g2v1cmw9xg18pu7/0y2vnk8n60t1vz01wcpm3bpqa"
+ , Style.glyphs "mapbox://fonts/engiadina/{fontstack}/{range}.pbf"
+ , Style.name "Winter"
+ , Style.defaultCenter <| LngLat 20.39789404164037 43.22523201923144
+ , Style.defaultZoomLevel 13
+ , Style.defaultBearing 0
+ , Style.defaultPitch 0
+ ]
+ }
+ )
+
+
+view model =
+ { title = "Mapbox Example"
+ , body =
+ [ css
+ , div [ style "width" "100vw", style "height" "100vh" ]
+ [ lazy showMap model.features
+ , div [ style "position" "absolute", style "bottom" "20px", style "left" "20px" ] [ text (LngLat.toString model.position) ]
+ ]
+ ]
+ }