aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.travis.yml1
-rw-r--r--README.md161
-rw-r--r--package.json2
3 files changed, 118 insertions, 46 deletions
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..587bd3e
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1 @@
+language: node_js
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/)
diff --git a/package.json b/package.json
index 4083dac..69085e7 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
- "test": "node test/test.js",
+ "test": "elm make --output=/dev/null src/**/*.elm && cd examples && elm make --output=/dev/null ./*.elm",
"pretest": "npm run build",
"generate": "curl https://raw.githubusercontent.com/mapbox/mapbox-gl-js/master/src/style-spec/reference/v8.json | node generate-elm.js > src/Mapbox/Layer.elm"
},
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 13:57:48 +0000