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 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 = Browser.document { init = init , view = view , update = update , subscriptions = \m -> Sub.none } init () = ( { position = LngLat 0 0, features = [] }, Cmd.none ) type Msg = Hover EventData | Click EventData update msg model = case msg of 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 []) hoveredFeatures : List Json.Encode.Value -> MapboxAttr msg hoveredFeatures = List.map (\feat -> ( feat, [ ( "hover", Json.Encode.bool True ) ] )) >> featureState view model = { title = "Mapbox Example" , body = [ css , 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" , Source.geoJSONFromValue "changes" [] geojson ] , misc = [ Style.name "light" , Style.defaultCenter <| LngLat 20.39789404164037 43.22523201923144 , Style.defaultZoomLevel 1.5967483759772743 , Style.sprite "mapbox://sprites/mapbox/streets-v7" , Style.glyphs "mapbox://fonts/mapbox/{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)) ] ] } ) , div [ style "position" "absolute", style "bottom" "20px", style "left" "20px" ] [ text (LngLat.toString model.position) ] ] ] }