CP04-JuegoQuiz

Base para crear fiddles de mapea

by solcursomapea

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/vendor/browser-polyfill.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/configuration.js"></script>
<div id="map" class="container"></div>
<div id="pruebas" class="container">

  <P>Pincha en un municipio para que aparezca su nombre</P>

  <button type="button" onclick="resetea()">Comenzar de nuevo</button>

  <P>Pincha para diferenciar entre provincias</P>

  <button type="button" onclick="categoryStyle()">Por provincias</button>

</div>

CSS

<style rel="stylesheet">
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

JavaScript

// Mapea - Documentación clases
// http://mapea4-sigc.juntadeandalucia.es/doc/index.html

// Mapea - Primeros Pasos
// https://github.com/sigcorporativo-ja/Mapea4/wiki/Primeros-pasos

// EJEMPLO DE JUEGO DE GEOGRAFÍA - ADIVINA EL MUNICIPIO
// INTERACCIONAR CON EL MAPA

// EJ01 - Crear Mapa
// "controls": ["layerswitcher", "mouse", "scale",  "overviewmap", "panzoombar", "scaleline"],

var map = M.map({
  'container': 'map',
  "controls": ["layerswitcher", "mouse", "scale", "overviewmap", "panzoombar", "scaleline"],
});

// EJ02 - Cargar capa WFS - Municipios
// url: 
// "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
// namespace: "mapea",
// name: "da_municipio_pol",
// legend: "Municipios",
// getfeatureinfo: "plain",
// geometry: 'POLYGON',
// extract: true,
  
  
let layer = new M.layer.WFS({
  url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
  namespace: "mapea",
  name: "da_municipio_pol",
  legend: "Municipios - Plantilla Símbolo",
  getfeatureinfo: "plain",
  geometry: 'POLYGON',
  extract: true,
  //cql: "nom_provincia LIKE 'SEVILLA'"
});

map.addLayers([layer]);


// EJ03 - Definir simbología para la capa de municipios
// fill
// stroke
// Definir label con "?"

let municipiosStyle = new M.style.Polygon({
  fill: {
    color: 'green',
    opacity: 0.8
  },
  stroke: {
    color: 'black',
    width: 1
  },
  label: {
    text: '?',
    color: 'black',
    stroke: {
      'color': '#E5FFCC',
      'width': 3
    }
  }
});


// EJ04 - Controlar evento LOAD de la capa de polígonos
// Aplcar estilo a la capa.

layer.on(M.evt.LOAD, function() {
  layer.setStyle(municipiosStyle);

})

// EJ05 - Definir estilo para polígono seleccionado
// fill
// stroke
// Definir label con ""Nombre del municipio""

let seleccionado = new M.style.Polygon({
  fill: {
    color: 'yellow',
    opacity: 0.5
  },
  stroke: {
    color: 'black',
    width: 1
  },
  label: {
    text: function(feature) {
      return (feature.getAttribute('nombre'))
    },
   ...