[Ej] Mapea - Ahambra3-OSM

by Francisco

HTML

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

CSS

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

JavaScript

var mapajs = M.map({
  container: "map",
  // Opcion1: Satelite
  //wmcfile: ["satelite","hibrido"],
  layers:["OSM"],
  controls: ["mouse","panzoombar"],
  center: [-399399, 4463723],
  zoom: 15,
  projection: "EPSG:3857*d"
});

// El estilo que se desee para los puntos, ests
// es solo un ejemplo
let estilo = new M.style.Point({
  radius: 5,
  fill: {
    color: 'orange',
    opacity: '0.7'
  },
  stroke: {
    color: 'red',
    width: 1
  },
  icon: {
    src: 'https://mapea4-sigc.juntadeandalucia.es/assets/img/m-pin-24-sel.svg',
    rotation: 0,
    scale: 1,
    opacity: 1,
    anchor: [0.5, 1],
    rotate: false,
  }
});

// Los puntos de interes
// Desactivamos el bocadillo al pinchar sobre un elemento, ya que
// vamos a gestionar el click nosotros. Para ello, "extract" vale false.
let puntosInteres = new M.layer.GeoJSON({
  source: {
    "features": [
      // Primer punto de interes
      // Puede tener todas las propiedades
      // que se desee
      {
        "properties": {
          "Dirección: ": "Calle Real de la Alhambra, s/n, 18009 Granada",
           "nombre":"Primer punto",
          "url":"URL del primer punto",
          "Coordenadas: ": "-3.587692, 37.175766",
        },
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-3.587692, 37.175766]
        }
      },
      // Segundo punto de interes
      {
        "properties": {
          "Coordenadas:": "-3.5877, 37.17",
          "nombre":"Segundo punto",
          "url":"URL del segundo punto"
        },
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-3.5877964657265693, 37.17699473716339]
        }
      }
    ],
    "type": "FeatureCollection"
  },
  name: 'Puntos de Interés',
  extract: false
})

// Asignamos estilo y añadimos capa
puntosInteres.setStyle(estilo);
mapajs.addLayers(puntosInteres);

// Recogemos los eventos de clic en los elementos de la capa, y mostramos por consola...