JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.0/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="mapid" style="width: 600px; height: 400px;"></div>

JavaScript

var map = L.map('mapid').setView([0, 0], 1);

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

var features = []

Papa.parse('https://raw.githubusercontent.com/albertyw/avenews/master/old/data/average-latitude-longitude-countries.csv', {
		download: true,
		header:true,
		dynamicTyping: true,
		complete: function(results) {
      for (i = 0; i < 16; i++){  // I take only the 15 first for the example
        // Looping on the data and pushing a turf.point for each row
    		features.push(turf.point([results.data[i].Longitude, results.data[i].Latitude]))
      }
      var fc = turf.featureCollection(features)
      var pointLayer = L.geoJSON(fc).addTo(map);
      var voronoiPolygons = turf.voronoi(fc);
      var voronoiLayer = L.geoJSON(voronoiPolygons).addTo(map);
		}
	});