[TEST] Mapea 4 - atributos features v4

Programar un Popup propio con multiples pestañas

by SIGC GUADALTEL

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea.ol.min.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css">
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var mapajs = M.map({
  container: "map",
  wmcfiles: ["callejero"]
});

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


provincias.on(M.evt.SELECT_FEATURES, function(features, evt) {

  popup = new M.Popup();
  features.forEach(function(f) {
    // Creamos un objeto tab 
    var featureTabOpts = {
      icon: 'g-cartografia-pin',
      title: 'Información',
      // 'content' es codigo HTML
      content: "<b>Nombre</b>:&nbsp;" + f.getAttribute('nombre') +
        "<br>" +
        "<b>Url</b>:<a href='http://www.juntadeandalucia.es' target='_blank'>visitar página</a>"
    };
    // Creamos el Popup y le añadimos la pestaña
    popup.addTab(featureTabOpts);
  });

  const evtId = popup.once(M.evt.DESTROY, function() {
    popup.un(M.evt.DESTROY, evtId);
    mapajs.getFeatureHandler().unselectFeatures(features, provincias, evt);
  });

  // Finalmente se añade al mapa, especificando las Coordenadas
  mapajs.addPopup(popup, evt.coord);


});

mapajs.addLayers(provincias);