JSFiddle - React, Tailwind, and code Playground

by ThomasG77

HTML

<script src="https://thomasg77.github.io/smallworld.js/dist/smallworld.js"></script>
<div class="example__map">
	<div class="map js-marker-multi"></div>
</div>

CSS

.map {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  position: relative;
}

JavaScript

var data = {
"type": "FeatureCollection",
                                                                                
"features": [
{ "type": "Feature", "properties": { "featurecla": "Country", "scalerank": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -59.6, -80.0 ], [ -60.2, -81.0 ], [ -64.5, -80.9 ], [ -66.3, -80.3 ], [ -61.9, -80.4 ], [ -60.6, -79.6 ], [ -59.6, -80.0 ] ] ] } },
{ "type": "Feature", "properties": { "featurecla": "Country", "scalerank": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -159.2, -79.5 ], [ -161.1, -79.6 ], [ -163.7, -78.6 ], [ -161.2, -78.4 ], [ -159.2, -79.5 ] ] ] } },
{ "type": "Feature", "properties": { "featurecla": "Country", "scalerank": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -45.2, -78.0 ], [ -43.9, -78.5 ], [ -43.3, -80.0 ], [ -50.5, -81.0 ], [ -54.2, -80.6 ], [ -51.0, -79.6 ], [ -48.7, -78.0 ], [ -45.2, -78.0 ] ] ] } },
{ "type": "Feature", "properties": { "featurecla": "Country", "scalerank": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -121.2, -73.5 ], [ -119.9, -73.7 ], [ -118.7, -73.5 ], [ -120.2, -74.1 ], [ -122.6, -73.7 ], [ -121.2, -73.5 ] ] ] } },
{ "type": "Feature", "properties": { "featurecla": "Country", "scalerank": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -125.6, -73.5 ], [ -124.0, -73.9 ], [ -127.3, -73.5 ], [ -126.6, -73.2 ], [ -125.6, -73.5 ] ] ] } },
{ "type": "Feature", "properties": { "featurecla": "Country", "scalerank": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -99.0, -71.9 ], [ -96.8, -72.0 ], [ -96.2, -72.5 ], [ -100.8, -72.5 ], [ -102.3, -71.9 ], [ -99.0, -71.9 ] ] ] } },
{ "type": "Feature", "properties": { "featurecla": "Country", "scalerank": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -68.5, -71.0 ], [ -68.8, -72.2 ], [ -71.1, -72.5 ], [ -74.2, -72.4 ], [ -75.0, -71.7 ], [ -72.1, -71.2 ], [ -71.7, -69.5 ], [ -70.3, -68.9 ], [ -68.5, -71.0 ] ] ] } },
{ "type": "Feature", "properties":...