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

<link rel=stylesheet href= integrity=sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ== crossorigin=/>
<script src= integrity=sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew== crossorigin=>
div id=mapida style=width: 600px; height: 400px;>

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. = 'height:' + hh;
var mymap ;
let    redMarker= L.AwesomeMarkers.icon({
  icon: 'user',
  prefix: 'fa',
  markerColor: 'blue'

var osmUrl = 'http://{s}{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="">OpenStreetMap</a> contributors',
    osm = L.tileLayer(osmUrl, {
      maxZoom: 18,
      attribution: osmAttrib
mymap =[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 = [];
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>' 
var group = new L.featureGroup(markersb);


1 Like

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

see the html code…

1 Like

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

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.


this is the link with a small example

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 =‘mapida’).setView([45.87426706392682, -74.17941689356532], 13);”

Where would you place that code?

Thanks in advance

i dont understand…