Add map to node-red

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>

<script>
    (function() {
        const cScope = this.scope;
        setTimeout(function () {
            
        	const map = L.map('mapid').setView([48.204550, 16.364333], 13);
            let marker;
            
        	L.tileLayer('https://{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png', {
        		maxZoom: 18,
                subdomains: ["maps1", "maps2", "maps3", "maps4"]
        	}).addTo(map);
        	
        	map.on('click', function(e) {
                cScope.send(e.latlng);
                if (marker) {
                    map.removeLayer(marker);
                };
                marker = L.circleMarker(e.latlng).addTo(map);
            });
            
            setTimeout(function () {
                map.invalidateSize();
            }, 100);
        }, 300);
    })();
</script>

<div id="mapid" style="width: 100%; height: 320px;"></div>

This is some sample ui template for node-red ui, hope this help

Happy Coding

Salam ngoprek

Advertisement