JSFiddle - React, Tailwind, and code Playground

by mavent

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<p style="display:none;" id="leafletInfo">Leaflet result: <span id="leafletTime"></span> <span id="leafletMemoryInfo"></span></p>
<p style="display:none;" id="openlayersInfo">Openlayers result: <span id="openlayersTime"></span> <span id="openlayersMemoryInfo"></span</p>
<div id="map"></div>
<div id="map2"></div>

CSS

#map {
    height: 400px;
    width: 80%;
}
#map2 {
    height: 400px;
    width: 80%;
}

JavaScript

//runLeaflet();
//runOpenLayers();
$( document ).ready(function() {
    console.log( "ready!" );
    //runOpenLayers();
    runLeaflet();
    runOpenLayers();
});

function runLeaflet() {
  var timerStart = Date.now();
  var timerStop;
  var timerDelta;
  //var memoryInfo = window.performance.memory;
  var memoryUsedHesapSizeStart = window.performance.memory.usedJSHeapSize;
  //$('leafletMemoryInfo').text(memoryInfo);
  //console.log(window.performance.memory.usedJSHeapSize);

  // MAP
  var mymap = L.map('map').setView([20, 0], 3);
  
  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.addLayer(osm);


  // BIG JSON
  var bigJSON = new L.geoJson();
  bigJSON.addTo(mymap);

  $.getJSON({
      dataType: "json",
      //url: "data/countries.geojson", // big JSON file
      url: "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places.geojson",

      success: function(data) {
          var nb=1;
          for(var i=0; i<nb; i++) {
              //console.info("add n°" + i);
              $(data.features).each(function(key, data) {
                  bigJSON.addData(data);      
              });
          }

          console.info("Number of features loaded = " + bigJSON.getLayers().length);
          timerStop = Date.now();
          timerDelta = timerStop - timerStart;

					//memoryUsedHesapSizeDiff = window.performance.memory.usedJSHeapSize - memoryUsedHesapSizeStart
     			memoryUsedHesapSizeEnd = window.performance.memory.usedJSHeapSize
					memoryUsedHesapSizeDiff = memoryUsedHesapSizeEnd - memoryUsedHesapSizeStart
          //console.info("Start at " + timerStart);
          //console.info("Stopped at " + timerStop );
          console.info("Loading time = " + timerDelta );
         ...