From 00600a345eb595e8dc18cf499fb6635a932a8cb7 Mon Sep 17 00:00:00 2001 From: Steve Purcell Date: Tue, 15 Jan 2019 23:27:30 +1300 Subject: Adds travis testing * Use "elm make" to test this * Add simple travis config * Update example in README from Example01.elm, so it is compilable --- README.md | 161 ++++++++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 116 insertions(+), 45 deletions(-) (limited to 'README.md') 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/) -- cgit v1.2.3