React studio and Leaflet Map

For people are asking maps in react studio,
insert an html component
and put this code inside html content
—i don’t know how to insert html code in post
add a < to each line

html>
head>
<link rel=stylesheet href=https://unpkg.com/leaflet@1.6.0/dist/leaflet.css integrity=sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ== crossorigin=/>
<script src=https://unpkg.com/leaflet@1.6.0/dist/leaflet.js integrity=sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew== crossorigin=>
/head>
body>
div id=mapida style=width: 600px; height: 400px;>
/body>
/html

html conte does not have " on it…

in any javascript code initialize mapida div with:

var html = document.documentElement;
var mezzi = [] ; //pp.props.appActions.dataSlots[‘ds_rowselected’]

var hh = (html.clientHeight - 70).toString() + ‘px’;

var element = document.getElementById('mapida');

// Height has to be set. You can do this in CSS too.
element.style = 'height:' + hh;
var mymap ;
let    redMarker= L.AwesomeMarkers.icon({
  icon: 'user',
  prefix: 'fa',
  markerColor: 'blue'
});

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    osm = L.tileLayer(osmUrl, {
      maxZoom: 18,
      attribution: osmAttrib
    });
mymap = L.map(element).setView([45.6960645,12.4706761], 18).addLayer(osm);
let marker1= L.marker( [45.6960645,12.4706761],{icon: redMarker}).addTo(mymap).bindPopup("<b>Paolo  Lops</b>").openPopup();

var markersb = [];
markersb.push(marker1)
for (var i = 0; i < mezzi.length; i++) {

	if (mezzi[i].Latitudine != "undefined") {


            let redMarkerq = L.AwesomeMarkers.icon({
              icon: 'bullseye',
              prefix: 'fa',
              markerColor: 'red'
            });
            let marker1= L.marker( [ parseFloat(mezzi[i].Latitudine), parseFloat(mezzi[i].Longitudine)],{icon: redMarkerq}).addTo(mymap).bindPopup(
            '<h3>' + mezzi[i].DescrizioneMacchina + '</h3>' 
            );
            markersb.push(marker1)
    }
}
var group = new L.featureGroup(markersb);
    mymap.fitBounds(group.getBounds());

:grinning:

1 Like

This is great Paolo. Thanks for sharing. Best regards and take care.

see the html code…

1 Like

Paolo,
I know this is old, but can explain where you placed the JS code to initialize the map? In the html component? I’ve tried countless ways and although the Leaflet component is present, I cannot get a map to show.

Thank you
Chris

Hi, If you can wait until 24 I will send you an example

@chrisGMX - via Embed Content. Not HTML component.

See this other thread --> Approach to integrate content in "public" folder Hope it helps

@Paolo_Lops - thanks for starting the original thread :grinning: I saw your original threads but ended up wandering down various paths on my own …

Thanks @Tom,

Still interested in seeing @Paolo_Lops’s sample.

Thanks

hi
this is the link with a small example

https://drive.google.com/file/d/1v1qrgA8Qcqnh9OK-Nm76fYfygiqjbQI7/view?usp=sharing
:stuck_out_tongue_winking_eye:

Thank you buddy! I appreciate.

Hi again,

Sorry if these questions seem pedestrian, still trying to master React Studio, when you say: “in any javascript code initialize mapida div with” Which JS are you referring to?

Like to do “var mymap = L.map(‘mapida’).setView([45.87426706392682, -74.17941689356532], 13);”

Where would you place that code?

Thanks in advance

i dont understand…