[Test] Mapea - Agua

by deivil79

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea-5.0.0.ol.min.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-5.0.0.ol.min.css">
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration-5.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div id="map"></div>
<div id="info">
  Información sobre el punto
</div>

CSS

#map {
  padding: 0;
  margin: 0;
  width: 65%;
  height: 65%;
}

JavaScript

var mapajs = M.map({
  container: "map",
  wmcfiles: ["mapa"],
  center: [305068, 4172868],
  zoom: 6,
});


//GeoJSON local
let layerAgua = new M.layer.GeoJSON({
  source: {
    "crs": {
      "properties": {
        "name": "EPSG:4326"
      },
      "type": "name"
    },
    "features": [{
      "properties": {
        "titulo": "Fuente de los  cristianos",
        "enlace": "<a href='http://www.iaph.es/ecija/contenidos/C10/imagenes/1001Fuentecristianos/masInfo.html'>Fuente de los  cristianos</a>"
      },
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-5.102548599243164, 37.53021667253897]
      }
   }, {
      "properties": {
        "titulo": "La Fuensanta",
        "enlace": "<a href='http://www.iaph.es/ecija/contenidos/C10/imagenes/1002LaFuensanta/masInfo.html'>La Fuensanta</a>"
      },
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-5.347761111111111, 37.84215833333334]
      }
    }],
    "type": "FeatureCollection"
  },
  name: 'prueba'
});

// estilo
let estilo_agua = new M.style.Point({
  fill: {
    color: '#63b8ff',
  },
  stroke: {
    color: '#000000'
  }
});

// establecemos estilo
layerAgua.setStyle(estilo_agua);
// añadimos capa al mapa
mapajs.addLayers(layerAgua);

// Una funcion para que abra popup personalizado
function abrePopup(feature) {
  mapajs.removePopup();
  var featureTabOpts = {
    'icon': 'g-cartografia-pin',
    'content': feature.getAttribute('enlace')
  };
  // Creamos el Popup y le añadimos la pestaña
  popup = new M.Popup();
  popup.addTab(featureTabOpts);
  // Finalmente se añade al mapa, especificando las Coordenadas
  mapajs.setCenter(feature.getGeometry().coordinates);
  mapajs.addPopup(popup, feature.getGeometry().coordinates);
}

// Una funcion para seleccionar un elemento
function seleccionar(titulo) {
  layerAgua.getFeatures().forEach(function(feature) {
    if (feature.getAttribute('titulo') == titulo)...