JSFiddle - React, Tailwind, and code Playground

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="http://ggiscloud.guadaltel.com/mapea/assets/css/mapea.ol3.min.css">
<script src="http://ggiscloud.guadaltel.com/mapea/vendor/browser-polyfill.js"></script>
<script src="http://ggiscloud.guadaltel.com/mapea/js/mapea.ol3.min.js"></script>
<script src="http://ggiscloud.guadaltel.com/mapea/js/configuration.js"></script>
<button onclick="drawKmlPoints();">
  DIBUJAR PUNTOS KML
</button>
<button onclick="drawLines();">
  DIBUJAR LINEAS GEOJSON
</button>
<button onclick="drawPolygons();">
  DIBUJAR POLYGONOS GEOJSON
</button>
<!-- contenedor de API JS -->
<div id="mapaContainer"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

div#mapaContainer {
  height: 100vh;
  width: 100vw;
}

JavaScript

window.drawKmlPoints = function() {
  var kmlLayer = new M.layer.KML({
    'url': 'http://mapea4-sigc.juntadeandalucia.es/files/kml/arbda_sing_se.kml',
    'name': 'puntoskml',
    'legend': 'Puntos KML'
  });
  mapajs.addLayers(kmlLayer);
};

window.drawLines = function() {
  var lines = new M.layer.GeoJSON({
    'source': {
      "crs": {
        "properties": {
          "name": "EPSG:4326"
        },
        "type": "name"
      },
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-5.933990478515625,
              37.5151724596446
            ],
            [-5.890045166015625,
              37.54348845864999
            ],
            [-5.907897949218749,
              37.56254125104276
            ],
            [-5.8687591552734375,
              37.567984011320256
            ],
            [-5.859832763671875,
              37.58920697640771
            ],
            [-5.821380615234375,
              37.58485404085001
            ],
            [-5.79254150390625,
              37.59029517052193
            ],
            [-5.7918548583984375,
              37.610967835536684
            ],
            [-5.769195556640625,
              37.622933594900864
            ],
            [-5.7437896728515625,
              37.61586315165877
            ],
            [-5.7163238525390625,
              37.63870369898346
            ],
            [-5.7108306884765625,
              37.62021427322739
            ],
            [-5.6874847412109375,
              37.62402129571883
            ],
            [-5.6710052490234375,
              37.618038744271985
            ]
          ]
        }
      }]
    },
    'name': 'lineas'
  });
  mapajs.addLayers(lines);
};

window.drawPolygons = function() {
  var polygons = new M.layer.GeoJSON({
    'source': {
      "crs": {
        "properties": {
         ...