JSFiddle - React, Tailwind, and code Playground

by Scott

HTML

<script src="&lt;link data-require=&quot;[email protected]&quot; data-semver=&quot;1.0.3&quot; rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css&quot; /&gt;"></script>
<script src="&lt;script data-require=&quot;[email protected]&quot; data-semver=&quot;1.0.3&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;script data-require=&quot;[email protected]&quot; data-semver=&quot;3.1.1&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;"></script>
    <body>
    <div id="mapid"></div>
    <div id="graphdiv" style="width:300px; height:200px;"></div>    
    </body>

JavaScript

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 10,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);
	
	var marker = L.marker([51.5, -0.09]).addTo(mymap);
	var marker2 = L.marker([51.55, -0.04]).addTo(mymap);
	
//	marker.bindPopup((layer)=>{
	marker.bindPopup(function(layer){
		 var el = document.createElement('div');
		 el.classList.add("my-class");
	
			$.getJSON("./data.json",function(data){
			  el.innerHTML = '<h2>' + data.text + '</h2>';
			});
	
		 return el;
	 });
	 marker2.bindPopup(function(layer){
		 var el = document.createElement('div');
		 el.classList.add("my-class");
//			$.getJSON("./data.json",function(data){
//			  el.innerHTML = '<h2>' + data.text + '</h2>';
//			});
			$.e1.innerHTML = '<h2>' + "something else" + '</h2>';	
	
		 return el;
	 });