[TEST] MBtiles url

by SIGC GUADALTEL

HTML

<script src="https://hcsigc.int.i-administracion.junta-andalucia.es/mapea/js/mapea-6.0.0.ol.min.js"></script>
<link rel="stylesheet" href="https://hcsigc.int.i-administracion.junta-andalucia.es/mapea/assets/css/mapea-6.0.0.ol.min.css">
<script src="https://hcsigc.int.i-administracion.junta-andalucia.es/mapea/js/configuration-6.0.0.js"></script>
<script src="https://hcsigc.int.i-administracion.junta-andalucia.es/mapea/extensions/mapea-mbtiles/mapea-mbtiles-1.0.0.ol.min.js"></script>
<input type="file" id="file-input" />
<button id="load-button">Cargar Mbtiles</button>
URL:
<input style="width: 450px;" type="text" id="url" value="">
<div id="map"></div>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

const mapajs = M.map({
  container: 'map',
  controls: ['layerswitcher'],
  projection: 'EPSG:3857*m',
  layers: ['OSM'],
});

// descarga mbtile:

// https://github.com/klokantech/vector-tiles-sample/releases/download/v1.0/countries-raster.mbtiles

// https://github.com/klokantech/vector-tiles-sample/releases/download/v1.0/countries.mbtiles



M.config.MBTILES_SQL_WASM_URL = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/'
function load() {
  const input = document.querySelector('#file-input');
  if (input.files.length > 0) {
    const file = input.files[0];
    //const mbtiles = new M.layer.MBTilesVector({
   const mbtiles = new M.layer.MBTiles({
      name: file.name,
      legend: file.name,
      source: file,
    });
    mapajs.addLayers(mbtiles);
  } else if (document.getElementById("url").value != "") {
    let url = document.getElementById("url").value;
    M.remote.get(url)
      .then(function(response) {
        console.log('fichero leido');
        const file = input.files[0];
        const mbtiles = new M.layer.MBTiles({
          name: file.name,
          legend: file.name,
          source: file,
        });
        mapajs.addLayers(mbtiles);
      });
  } else {
    M.dialog.info('No hay dato que visualizar.')
  }
}

document.body.onload = () => document.querySelector('#load-button').addEventListener('click', load);