JSFiddle - React, Tailwind, and code Playground

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="http://ggis.guadaltel.com/mapea4/assets/css/mapea.ol3.min.css">
<script src="http://ggis.guadaltel.com/mapea4/vendor/browser-polyfill.js"></script>
<script src="http://ggis.guadaltel.com/mapea4/js/mapea.ol3.min.js"></script>
<script src="http://ggis.guadaltel.com/mapea4/js/configuration.js"></script>
<script src="http://ggis.guadaltel.com/mapea4/plugins/geosearch/mapea.geosearch.ol3.min.js"></script>
<link rel="stylesheet" href="http://ggis.guadaltel.com/mapea4/plugins/geosearch/geosearch.min.css">
<!--Ejemplo OpenLayers: OSM + BBOX -->
<div id="mapeaContainer"></div>

CSS

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

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

JavaScript

// creates the map
var mapajs = M.map({
  container: "mapeaContainer",
  layers: [new M.layer.OSM()],
  projection: 'EPSG:3857*m',
  bbox: [-921524.8130060849,
    4256625.231144896, -138809.64336588, 4827762.706491733
  ]
});

// adds GeoBusquedas plugin
mapajs.addPlugin(new M.plugin.Geosearch());