[Test] MVT 3857 mapbox

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="http://sigc.desarrollo.guadaltel.es/mapea6/assets/css/mapea-6.0.0.ol.min.css">
<script src="http://sigc.desarrollo.guadaltel.es/mapea6/js/mapea-6.0.0.ol.min.js"></script>
<script src="https://sigc-dev.desarrollo.guadaltel.es/mapea5/js/configuration-5.1.0.js"></script>
<div id="map"></div>

CSS

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

JavaScript

const mvt = new M.layer.MVT({
  url: 'https://d.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1Ijoic2lnY29ycG9yYXRpdm9qYSIsImEiOiJjaXczZ3hlc2YwMDBrMm9wYnRqd3gyMWQ0In0.wF12VawgDM31l5RcAGb6AA',
  //url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf',
  name: 'vectortile',
  projection: 'EPSG:3857',
});

const mapa = M.map({
  container: 'map',
  getfeatureinfo: 'plain',
  controls: ['mouse', 'layerswitcher','panzoombar','navtoolbar'],
  projection: 'EPSG:3857*m', //CASO EPSG:4326 'EPSG:4326*d',
  //layers: ['OSM'],
  layers:[mvt],
});

const provincias = new M.layer.GeoJSON({
  name: "Provincias",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tematicos:Provincias&maxFeatures=50&outputFormat=application/json",
  extract: true
});


// mapa.addLayers(provincias);
//mapa.addLayers(mvt);

// Para activar funcionalidad take me there
M.Popup.options.takeMeThere = true;

mvt.on(M.evt.SELECT_FEATURES, function(features){
	console.log('select: ', features[0].getAttributes());
})

// Para cambiar al modo con icono
// M.Popup.options.textMode = false;

// Para cambiar el texto
// M.Popup.options.msg = 'Take me there.'

/*
mvt.getFeatures().forEach(function(f){
  if(f.getAttribute('_name')=='Seville'){
    console.log('Sevilla: ', f);
  }
});
*/

// ESTILO OL

function createMapboxStreetsV6Style(e,t,o,a,r){var l=new t({color:""}),s=new o({color:"",width:1}),n=new e({fill:l}),i=new e({fill:l,stroke:s}),d=new e({stroke:s}),g=new e({text:new r({text:"",fill:l,stroke:s})}),c={};function b(t){var o=c[t];return o||(o=new e({image:new a({src:"https://unpkg.com/@mapbox/[email protected]/icons/"+t+"-15.svg",imgSize:[15,15],crossOrigin:"anonymous"})}),c[t]=o),o}var m=[];return function(e,t){var...