1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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) ]
]
|
