Adds travis testing

* Use "elm make" to test this

* Add simple travis config

* Update example in README from Example01.elm, so it is compilable

1 files changed, 116 insertions, 45 deletions

diff --git a/README.md b/README.md
index 1bed594..5a41b02 100644
--- a/README.md
+++ b/README.md
@@ -76,8 +76,11 @@ Then you can go all out!
 ```elm
 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
 import Mapbox.Cmd.Option as Opt
@@ -89,7 +92,7 @@ import Mapbox.Style as Style exposing (Style(..))
 
 
 main =
-    Html.program
+    Browser.document
         { init = init
         , view = view
         , update = update
@@ -97,8 +100,8 @@ main =
         }
 
 
-init =
-    ( { position = LngLat 0 0 }, Cmd.none )
+init () =
+    ( { position = LngLat 0 0, features = [] }, Cmd.none )
 
 
 type Msg
@@ -108,57 +111,125 @@ type Msg
 
 update msg model =
     case msg of
-        Hover { lngLat } ->
-            ( { model | position = lngLat }, Cmd.none )
+        Hover { lngLat, renderedFeatures } ->
+            ( { model | position = lngLat, features = renderedFeatures }, Cmd.none )
+
+        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": 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 [])
+
 
-        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 ) )
+hoveredFeatures : List Json.Encode.Value -> MapboxAttr msg
+hoveredFeatures =
+    List.map (\feat -> ( feat, [ ( "hover", Json.Encode.bool True ) ] ))
+        >> featureState
 
 
 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" ]
-                , 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" ]
+                , hoveredFeatures model.features
+                ]
+                (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
                         ]
-                    , 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")
+                    , 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
+                            ]
+                        , 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.symbol "place-city-lg-n"
+                            "composite"
+                            [ Layer.sourceLayer "place_label"
+                            , Layer.minzoom 1
+                            , Layer.maxzoom 14
+                            , Layer.filter <|
+                                E.all
+                                    [ E.getProperty (str "scalerank") |> E.greaterThan (int 2)
+                                    , E.getProperty (str "type") |> E.isEqual (str "city")
+                                    ]
+                            , Layer.textField <|
+                                E.format
+                                    [ E.getProperty (str "name_en")
+                                        |> E.formatted
+                                        |> E.fontScaledBy (float 1.2)
+                                    , E.formatted (str "\n")
+                                    , E.getProperty (str "name")
+                                        |> E.formatted
+                                        |> E.fontScaledBy (float 0.8)
+                                        |> E.withFont (E.strings [ "DIN Offc Pro Medium" ])
+                                    ]
+                            ]
+                        , Layer.fill "changes"
+                            "changes"
+                            [ Layer.fillOpacity (E.ifElse (E.toBool (E.featureState (str "hover"))) (float 0.9) (float 0.1))
                             ]
-                            |> Layer.filter
-
-                        , 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) ]
+            ]
         ]
+    }
 ```
 ### [Generating the Elm Style Code](https://code.gampleman.eu/elm-mapbox/style-generator/)