aboutsummaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
Diffstat (limited to 'examples')
-rw-r--r--examples/Example01.elm133
-rw-r--r--examples/elm-package.json15
-rw-r--r--examples/elm.json25
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