From cc6d143dd8124e13059c26125e70237795e9a9a4 Mon Sep 17 00:00:00 2001 From: Jakub Hampl Date: Fri, 13 Jul 2018 15:20:50 +0100 Subject: Clean up various messes --- README.md | 92 ++++++++++++++++++++++++++++++++------------------------------- 1 file changed, 47 insertions(+), 45 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index a9c6b95..b50830c 100644 --- a/README.md +++ b/README.md @@ -46,13 +46,14 @@ module Example01 exposing (main) import Html exposing (div, text) import Html.Attributes exposing (style) -import Json.Decode exposing (Value) +import LngLat exposing (LngLat) +import MapCommands +import Mapbox.Cmd.Option as Opt 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(..)) -import MapCommands main = @@ -65,7 +66,7 @@ main = init = - ( { position = ( 0, 0 ) }, Cmd.none ) + ( { position = LngLat 0 0 }, Cmd.none ) type Msg @@ -73,55 +74,57 @@ type Msg | Click EventData -mapPair f ( a, b ) = - ( f a, f b ) - - update msg model = case msg of Hover { lngLat } -> ( { model | position = lngLat }, Cmd.none ) Click { lngLat } -> - ( model, MapCommands.fitBounds [] ( mapPair (\a -> a - 0.2) lngLat, mapPair (\a -> a + 0.2) lngLat ) ) - -style = - 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 20.39789404164037 43.22523201923144 - , Style.defaultZoomLevel 1.5967483759772743 - , Style.sprite "mapbox://sprites/user/cjht22eqw0lfc2ro6z0qhlm29" - , Style.glyphs "mapbox://fonts/user/{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) - ] - ] - } + ( model, MapCommands.fitBounds [ Opt.linear True, Opt.maxZoom 10 ] ( LngLat.map (\a -> a - 0.2) lngLat, LngLat.map (\a -> a + 0.2) lngLat ) ) + view model = div [ style [ ( "width", "100vw" ), ( "height", "100vh" ) ] ] [ css - , map [ onMouseMove Hover, onClick Click, id MapCommands.id ] style + , 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 + ] + , 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.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) ] ] ``` @@ -149,9 +152,8 @@ var app = elmMapbox(Elm.MyApp.fullscreen({ The `elmMapbox` function accepts an options object that takes the following options: - `token`: the Mapbox token. If you don't pass it here, you will need to use the `token` Elm attribute. - - `outgoingPort`: the name of the outgoing port. Default: `elmMapboxOutgoing`. - - `incomingPort`: the name of the incoming port. Default `elmMapboxIncoming`. - - `easingFunctions`: an object whose values are easing functions (i.e. they take a number between 0..1 and return a number between 0..1). You can refer to these with the `easing` option in the Cmd module. + - `easingFunctions`: an object whose values are easing functions (i.e. they take a number between 0..1 and return a number between 0..1). You can refer to these with the `easing` option in the Cmd.Option module. + - `onMount` a callback that gives you access to the mapbox instance whenever a map gets instantiated. Mostly useful for registering plugins. ### License -- cgit v1.2.3