diff options
| -rw-r--r-- | examples/Example01.elm | 93 | ||||
| -rw-r--r-- | examples/Light.elm | 49 | ||||
| -rw-r--r-- | src/js/main.js | 2 |
3 files changed, 94 insertions, 50 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 ] diff --git a/src/js/main.js b/src/js/main.js index b1ec6fb..3d70e9b 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -13,7 +13,7 @@ function wrapElmApplication(elmApp, settings = {}) { ); if (options.token) { - mapboxgl.token = options.token; + mapboxgl.accessToken = options.token; } window.customElements.define( "elm-mapbox-map", |