JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<div id="map6" style="width: 100%; height: 550px; margin-bottom: 2em;"></div>
<p><small>© 2018 Greenpeace</small></p>

CSS

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: #fff;
}

.leaflet-popup-content-wrapper {
  color: #212529;
  font-family: "Work Sans", sans-serif;
}

.leaflet-popup-content p {
  margin: 5px 0 5px 0;
}

.nombre_central {
  font-weight: 700;
}

.importe_pago {
  color: red;
}

JavaScript

/* global L, document */

/*
 * ATENCIÓN: Este mapa usa funcionalidades de ECMAScript 6
 * Debes convertir a ES2015 en https://babeljs.io/en/repl
 * O no funcionará en Internet Explorer
 */


    var containerEl = document.getElementById("map6");
    var elwidth = containerEl.offsetWidth;
    var mapheight = elwidth >= 550 ? 550 : 300;
    var zoomvalue = elwidth >= 550 ? 6 : 5;

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

    var osmap = L.map('map6', {
        scrollWheelZoom: false
    }).setView([40.1, -3], zoomvalue);

    L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/base/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Diseño por <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Datos del mapa &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        id: 'mapbox.light'
    }).addTo(osmap);

    // EDP
    var edpEspana = L.icon({
        iconUrl: 'https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/edp.png',
        iconAnchor: [10, 45],
        popupAnchor: [5, -50]
    });

    // Iberdrola
    var iberdrola = L.icon({
        iconUrl: 'https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/iberdrola.png',
        iconAnchor: [10, 45],
        popupAnchor: [0, -45]
    });

    // Viesgo
    var viesgo = L.icon({
        iconUrl: 'https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/viesgo.png',
        iconAnchor: [10, 45],
        popupAnchor: [5, -50]
    });

    // Iberdrola
    var endesa = L.icon({
        iconUrl: 'https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/endesa.png',
        iconAnchor: [10, 45],
        popupAnchor: [0, -45]
    });

    // Fenosa
    var fenosa = L.icon({
        iconUrl: 'https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/fenosa.png',
        iconAnchor: [10, 45],
        popupAnchor: [0, -45]
    });

  ...