2 files changed, 93 insertions, 49 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 ]