Leaflet widget for node-red-dashboard

README.md

Some hack for a leaflet node-red-dashboard widget using a dashboard template node. Returns the clicked coordinates to node-red. Modify the leaflet settings in the template node (like setting the initial lat/lng, tilelayer etc.).

flow.json

[{"id":"c9a1f450.18e888","type":"ui_template","z":"cdf34740.849558","group":"92ff1a59.c34d18","name":"Leaflet","order":0,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css\" />\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js\"></script>\n\n<script>\n    (function() {\n        const cScope = this.scope;\n        setTimeout(function () {\n            \n        \tconst map = L.map('mapid').setView([48.204550, 16.364333], 13);\n            let marker;\n            \n        \tL.tileLayer('https://{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png', {\n        \t\tmaxZoom: 18,\n                subdomains: [\"maps1\", \"maps2\", \"maps3\", \"maps4\"]\n        \t}).addTo(map);\n        \t\n        \tmap.on('click', function(e) {\n                cScope.send(e.latlng);\n                if (marker) {\n                    map.removeLayer(marker);\n                };\n                marker = L.circleMarker(e.latlng).addTo(map);\n            });\n            \n            setTimeout(function () {\n                map.invalidateSize();\n            }, 100);\n        }, 300);\n    })();\n</script>\n\n<div id=\"mapid\" style=\"width: 100%; height: 400px;\"></div>","storeOutMessages":true,"fwdInMessages":true,"x":63,"y":40,"wires":[["9f95ce34.4eeb2"]]},{"id":"9f95ce34.4eeb2","type":"debug","z":"cdf34740.849558","name":"","active":true,"console":"false","complete":"true","x":210,"y":40,"wires":[]},{"id":"92ff1a59.c34d18","type":"ui_group","z":"","name":"Leaflet","tab":"7052e48d.7f05ec","disp":true,"width":"8"},{"id":"7052e48d.7f05ec","type":"ui_tab","z":"cdf34740.849558","name":"Home","icon":"dashboard","order":"1"}]