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

function drawKmlPoints() {
  var kmlLayer = new M.layer.KML({
    'url': '',
    'name': '',
    'legend': ''
  });
  mapajs.addLayers(kmlLayer);
}

function drawLines() {
  var lines = new M.layer.GeoJSON({
    'source': '',
    'name': '',
    'legend': ''
  });
  mapajs.addLayers(lines);
}

function drawPolygons() {
  var polygons = new M.layer.GeoJSON({
    'source': '',
    'name': '',
    'legend': ''
  });
  mapajs.addLayers(polygons);
}

var mapajs = M.map("mapaContainer");