Skip to content

Commit 411f155

Browse files
rudirudi
committed
Add leaflet openstreetmap example
1 parent ced7ba6 commit 411f155

17 files changed

+29710
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
.DS_Store
22
gen/
3+
/collaboratory/examples/gis-modeling/MapObjects.jar
4+
/collaboratory/examples/single-watertank/Watertank.jar

‎collaboratory/examples/gis-modeling/Makefile

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
.PHONY: all
3+
all: help
4+
5+
.PHONY: compile-java
6+
compile-java: MapObjects.abs index.html ## Compile the model (Java backend)
7+
absc --java MapObjects.abs --modelapi-index-file index.html --modelapi-static-dir static -o MapObjects.jar
8+
9+
.PHONY: compile-erlang
10+
compile-erlang: MapObjects.abs index.html ## Compile the model (Erlang backend)
11+
absc --erlang MapObjects.abs --modelapi-index-file index.html --modelapi-static-dir static
12+
13+
14+
15+
.PHONY: run-java
16+
run-java: compile-java ## Execute the model (Java backend)
17+
java -jar MapObjects.jar -p 8080
18+
19+
.PHONY: run-erlang
20+
run-erlang: compile-erlang ## Execute the model (Erlang backend)
21+
gen/erl/run -p 8080
22+
23+
24+
.PHONY: help
25+
help: ## Display this message
26+
@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

‎collaboratory/examples/gis-modeling/MapObjects.abs

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
module MapObjects;
2+
3+
data MapData = MapData(Float lat, Float long, String description);
4+
5+
interface OMap {
6+
[HTTPCallable] Pair<Float, Float> getInitialCoordinates();
7+
[HTTPCallable] List<MapData> getMapObjects();
8+
}
9+
10+
class OMap implements OMap {
11+
Pair<Float, Float> getInitialCoordinates() {
12+
return Pair(59.90, 10.73);
13+
}
14+
List<MapData> getMapObjects() {
15+
return list[MapData(59.91115, 10.7357, "City Hall"),
16+
MapData(59.90758, 10.75197, "Opera House")];
17+
}
18+
}
19+
20+
{
21+
[HTTPName: "map"] OMap m = new OMap();
22+
}
23+
24+
25+
// Local Variables:
26+
// abs-local-port: 8080
27+
// abs-modelapi-index-file: "index.html"
28+
// abs-java-output-jar-file: "MapObjects.jar"
29+
// abs-modelapi-static-dir: "static"
30+
// End:

‎collaboratory/examples/gis-modeling/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
This directory contains an example on how to display geo-located ABS
3+
objects or data structures on a map via the model api.
4+
5+
Library documentation: https://leafletjs.com/index.html
6+
7+
Run `make run-java` or `make run-erlang` in this directory, then open
8+
http://localhost:8080

‎collaboratory/examples/gis-modeling/index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<html>
2+
<head>
3+
<title>Leaflet on OpenStreetMap</title>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="/static/leaflet/leaflet.css" />
7+
<script src="/static/leaflet/leaflet.js"></script>
8+
</head>
9+
<body>
10+
<div id="mapid" style="width: 100%; height: 100%;"></div>
11+
<script>
12+
'use strict';
13+
function createMap() {
14+
Promise.all([fetch("/call/map/getInitialCoordinates"), fetch("/call/map/getMapObjects")])
15+
.then((values) => values.map(p => p.json())).then((p) => Promise.all(p))
16+
.then(([coords, objects]) => {
17+
var mymap = L.map('mapid').setView([coords.result.fst, coords.result.snd], 13);
18+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
19+
maxZoom: 19,
20+
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
21+
}).addTo(mymap);
22+
L.control.scale().addTo(mymap);
23+
24+
objects.result.forEach(item =>
25+
L.marker([item.lat, item.long])
26+
.addTo(mymap)
27+
.bindPopup(item.description));
28+
var popup = L.popup();
29+
function onMapClick(e) {
30+
popup.setLatLng(e.latlng)
31+
.setContent("You clicked the map at " + e.latlng.toString())
32+
.openOn(mymap);
33+
}
34+
mymap.on('click', onMapClick);
35+
});
36+
}
37+
38+
document.addEventListener("DOMContentLoaded", function () {
39+
createMap();
40+
});
41+
</script>
42+
</body>
43+
</html>

‎collaboratory/examples/gis-modeling/static/leaflet/images/layers-2x.png

1.23 KB
Loading

‎collaboratory/examples/gis-modeling/static/leaflet/images/layers.png

696 Bytes
Loading

‎collaboratory/examples/gis-modeling/static/leaflet/images/marker-icon-2x.png

2.41 KB
Loading

‎collaboratory/examples/gis-modeling/static/leaflet/images/marker-icon.png

1.43 KB
Loading

‎collaboratory/examples/gis-modeling/static/leaflet/images/marker-shadow.png

618 Bytes
Loading

0 commit comments

Comments
 (0)