JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<!-- MAP GEOJSON -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" defer></script>

<style>
    .leaflet-popup-content {
        font-family: "Work Sans",sans-serif;
        line-height: 1.3;
    }
    #geoJsonMap h3 {
        margin: 0;
    }
</style>

<div id="geoJsonMap" style="width: 100%; height: 400px; margin-bottom: 2em;"></div>
<script src="https://apps.greenpeace.es/data-vis/world-map-geojson.js" type="text/javascript" defer></script>

<script>

    function onEachFeature(feature, layer) {
        if (feature.properties && feature.properties.popupContent) {
            layer.bindPopup(feature.properties.popupContent);
        }
    }

    document.addEventListener("DOMContentLoaded", function(){

        var containerEl = document.getElementById("geoJsonMap");
        var elwidth = containerEl.offsetWidth;
        var mapheight = elwidth >= 550 ? 550 : 300;
        var zoomvalue = elwidth >= 550 ? 1.5 : 1.5;

        document.getElementById("geoJsonMap").style.height = mapheight + "px";

        var osmap = L.map('geoJsonMap', {
            scrollWheelZoom: false
        }).setView([25.865427, 0], zoomvalue);

        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
            id: 'mapbox.light'
        }).addTo(osmap);

        L.geoJSON(geojsonFeature, {
            onEachFeature: onEachFeature,
            style: function(feature) {
                var s = {
                    "color" : feature.properties['fill'] ? feature.properties['fill'] : '#ffffff',
                    "fillOpacity" : feature.properties['fill-opacity'] ? feature.properties['fill-opacity'] : 0.3,
                    "weight" : feature.properties['stroke-width'] ?  feature.properties['stroke-width'] : 1
              ...