-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
31 lines (28 loc) · 881 Bytes
/
index.html
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
<html>
<head>
<meta charset="UTF-8">
<title>Leaflet inegration with Elm's ports</title>
<link rel="stylesheet" href="elm-leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>
<body>
<div id="map"></div>
</body>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="build/elm-Leaflet.js"></script>
<script>
const app = Elm.App.fullscreen()
app.ports.portActiveTown.subscribe(({location}) => {
map.panTo(new L.LatLng(location.lat, location.lng))
})
app.ports.portPlaces.subscribe(places => {
places.map(({name, location}) =>
new L.marker([location.lat, location.lng])
.bindPopup(name)
.addTo(map)
)
})
const map = L.map('map').setView([43.610769, 3.876716], 13)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map)
</script>
</html>