v0.19 compatibility (#1)

3 files changed, 112 insertions, 61 deletions

diff --git a/examples/Example01.elm b/examples/Example01.elm
index 32f5bd6..91a5dee 100644
--- a/examples/Example01.elm
+++ b/examples/Example01.elm
@@ -1,9 +1,12 @@
 module Example01 exposing (main)
 
+import Browser
 import Html exposing (div, text)
 import Html.Attributes exposing (style)
+import Json.Decode
+import Json.Encode
 import LngLat exposing (LngLat)
-import MapCommands exposing (Response(..))
+import MapCommands
 import Mapbox.Cmd.Option as Opt
 import Mapbox.Element exposing (..)
 import Mapbox.Expression as E exposing (false, float, int, str, true)
@@ -13,7 +16,7 @@ import Mapbox.Style as Style exposing (Style(..))
 
 
 main =
-    Html.program
+    Browser.document
         { init = init
         , view = view
         , update = update
@@ -21,8 +24,8 @@ main =
         }
 
 
-init =
-    ( { position = LngLat 0 0 }, Cmd.none )
+init () =
+    ( { position = LngLat 0 0, features = [] }, Cmd.none )
 
 
 type Msg
@@ -32,55 +35,93 @@ type Msg
 
 update msg model =
     case msg of
-        Hover { lngLat } ->
+        Hover { lngLat, renderedFeatures } ->
             ( { model | position = lngLat }, Cmd.none )
 
-        Click { lngLat } ->
-            ( model, MapCommands.fitBounds [ Opt.linear True, Opt.maxZoom 10 ] ( LngLat.map (\a -> a - 0.2) lngLat, LngLat.map (\a -> a + 0.2) lngLat ) )
+        Click { lngLat, renderedFeatures } ->
+            ( { model | position = lngLat, features = renderedFeatures }, MapCommands.fitBounds [ Opt.linear True, Opt.maxZoom 10 ] ( LngLat.map (\a -> a - 0.2) lngLat, LngLat.map (\a -> a + 0.2) lngLat ) )
+
+
+geojson =
+    Json.Decode.decodeString Json.Decode.value """
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "id": 0,
+      "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 [])
 
 
 view model =
-    div [ style [ ( "width", "100vw" ), ( "height", "100vh" ) ] ]
+    { title = "Mapbox Example"
+    , body =
         [ css
-        , map
-            [ maxZoom 5
-            , onMouseMove Hover
-            , onClick Click
-            , id "my-map"
-            ]
-            (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 <| LngLat 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
+        , div [ style "width" "100vw", style "height" "100vh" ]
+            [ map
+                [ maxZoom 5
+                , onMouseMove Hover
+                , onClick Click
+                , id "my-map"
+                , eventFeaturesLayers [ "changes" ]
+                ]
+                (Style
+                    { transition = Style.defaultTransition
+                    , light = Style.defaultLight
+                    , sources =
+                        [ Source.vectorFromUrl "composite" "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7,astrosat.07pz1g3y"
+                        , Source.geoJSONFromValue "changes" [] geojson
+                        ]
+                    , misc =
+                        [ Style.name "light"
+                        , Style.defaultCenter <| LngLat 20.39789404164037 43.22523201923144
+                        , Style.defaultZoomLevel 1.5967483759772743
+                        , Style.sprite "mapbox://sprites/astrosat/cjht22eqw0lfc2ro6z0qhlm29"
+                        , Style.glyphs "mapbox://fonts/astrosat/{fontstack}/{range}.pbf"
                         ]
-                    , 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")
+                    , 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.fillOpacity (float 0.6)
+                            ]
+                        , Layer.fill "changes"
+                            "changes"
+                            [ Layer.fillOpacity (E.ifElse (E.toBool (E.featureState (str "hover"))) (float 1) (float 0.3))
                             ]
-                            |> 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) ]
+                    }
+                )
+            , div [ style "position" "absolute", style "bottom" "20px", style "left" "20px" ] [ text (LngLat.toString model.position) ]
+            ]
         ]
+    }
diff --git a/examples/elm-package.json b/examples/elm-package.json
deleted file mode 100644
index 00c0096..0000000
--- a/examples/elm-package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "version": "1.0.0",
-    "summary": "helpful summary of your project, less than 80 characters",
-    "repository": "https://github.com/user/project.git",
-    "license": "BSD3",
-    "source-directories": [
-        "../src", "."
-    ],
-    "exposed-modules": [],
-    "dependencies": {
-        "elm-lang/core": "5.1.1 <= v < 6.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0"
-    },
-    "elm-version": "0.18.0 <= v < 0.19.0"
-}
diff --git a/examples/elm.json b/examples/elm.json
new file mode 100644
index 0000000..2017dd4
--- /dev/null
+++ b/examples/elm.json
@@ -0,0 +1,25 @@
+{
+    "type": "application",
+    "source-directories": [
+        "../src",
+        "."
+    ],
+    "elm-version": "0.19.0",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.0",
+            "elm/core": "1.0.0",
+            "elm/html": "1.0.0",
+            "elm/json": "1.0.0"
+        },
+        "indirect": {
+            "elm/time": "1.0.0",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.0"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}
\ No newline at end of file