├── style.css
├── README.md
├── index.html
└── app.js
/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | width: 100%;
3 | height: 100;
4 | }
5 |
6 | #map {
7 | width: 800px;
8 | height: 600px;
9 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Payload format as built is:
2 |
3 | ```json
4 | {
5 | "lat": 55.9,
6 | "lon": -4.3,
7 | "label": "hello" // Displayed when clicking the marker
8 | }
9 | ```
10 |
11 | The label is added unmodified to the marker. This is probably insecure! Make sure you trust or validate it.
12 |
13 | To test this, do something like:
14 |
15 | ```bash
16 | while true; do mosquitto_pub -h test.mosquitto.org -t 'mgdm/geo' -m '{"lat": 55.9,"lon": -4.3,"label":"hello"}'; sleep 2; done
17 | ```
18 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | mqttmap
7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
20 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const map = L.map("map", {
2 | center: [55.9, -4.3],
3 | zoom: 13
4 | });
5 |
6 | L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
7 | maxZoom: 19,
8 | attribution:
9 | '© OpenStreetMap contributors',
10 | }).addTo(map);
11 |
12 | const client = new Paho.MQTT.Client("test.mosquitto.org", 8080, "clientId");
13 | client.onMessageArrived = onMessage;
14 | client.onConnectionLost = onConnectionLost;
15 |
16 | function onConnect() {
17 | client.subscribe('mgdm/geo');
18 | };
19 |
20 | function onMessage(message) {
21 | console.log("Message received");
22 | const m = JSON.parse(message.payloadString);
23 | console.log(m);
24 |
25 | const marker = L.marker([m["lat"], m["lon"]]).addTo(map);
26 | marker.bindPopup(m["label"]); // This is probably a bit insecure! Make sure you trust or validate the source
27 | };
28 |
29 | function onConnectionLost(responseObject) {
30 | if (responseObject.errorCode !== 0) {
31 | console.log("onConnectionLost:" + responseObject.errorMessage);
32 | }
33 | }
34 |
35 | client.connect({
36 | onSuccess: onConnect
37 | });
38 |
--------------------------------------------------------------------------------