From 181401c4ffd06c127c57e27e2e88b05f7fdd1f88 Mon Sep 17 00:00:00 2001
From: Jakub Hampl <kopomir@gmail.com>
Date: Mon, 25 Jun 2018 13:59:42 +0100
Subject: Fix issue with passing in token
---
examples/Example01.elm | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 93 insertions(+)
create mode 100644 examples/Example01.elm
(limited to 'examples/Example01.elm')
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) ]
+ ]
--
cgit v1.2.3