Utilidades

Diálogos
Permite crear diálogos modales de tres tipos: informativos, de error o de éxito de operación:

M.dialog.info('Mensaje informativo'); // color azul
M.dialog.error('Mensaje de error'); // color rojo
M.dialog.success('Mensaje de éxito'); // color verde

Cada tipo de diálogo tiene asociado un color diferente, y se cierran cuando el usuario pincha el botón de aceptar.

---

Popups
Los popups representan bocadillos, asociados a unas coordenadas, que ofrecen información al usuario, por ejemplo cuando se pincha en un punto del mapa donde existe información vectorial. Hasta la v6.2.0 de Mapea, solo podía existir un Popup a la vez, a partir de dicha versión pueden existir múltiples Popups simultáneos.

El objeto Popup puede gestionarse de la siguiente manera:

// Acceso, si existen varios devuelve solo el primero
var popup = mapajs.getPopup();
// Eliminación de todos los popups
mapajs.removePopup();

// A partir de la v6.2.0
let popups = mapajs.getPopups(); // Array
// Eliminar un Popup específico
mapajs.removePopup(miPopup);

El constructor acepta los siguientes parámetros:

• panMapIfOutOfView: Opcional - booleano que indica si queremos que la vista cambie automáticamente para incluir al popup en caso de que este se encuentre fuera de la misma (por defecto true), o no (false).

Necesitamos una pestaña con el contenido, y unas coordenadas para añadirlo al mapa:

// Creamos un objeto tab 
  var featureTabOpts = {
    'icon': 'g-cartografia-pin',
    'title': 'Título de la pestaña',
    'content': 'Código html que se quiere mostrar en la pestaña'
  };
  // 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.addPopup(popup, [240829,4143088]);
  
  // v6.2.0+ pueden añadirse varios a la vez
  // Un booleano indica si borrar antes las que ya existan
  mapajs.addPopup(popup1, [235007, 4141876], true);
  mapajs.addPopup([popup1, popup2], [
     [314528.6120, 4089539.2733],
     [315628.6120, 4099639.2733]
   ], false);
 };

Un popup puede tener tantas pestañas como se desee.

v5.1.0+ Se puede además configurar Mapea para que los popups muestren un enlace "llévame allí" que abra la navegación google maps a las coordenadas seleccionadas. Para activar dicha acción:

M.Popup.options.takeMeThere = true;

v6.6.0+ Se puede definir el html que debe mostrarse en el contenido del popup mediante su atributo 'template', así como en tiempo de construcción:

const template = `
<div><b>My custom popup</b></div>
<div class="m-geojson-content">
    {{#each features}}
    <div id="{{id}}" class="result">
        {{#each attributes}}
        <ul>
            <li class="key">{{key}}</li>
            <ul>
                <li class="value">{{{value}}}</li>
            </ul>
        </ul>
        {{/each}}
    </div>
    <div class="m-separator"></div>
    {{/each}}
 </div>
`
let 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,
  template: template,
});

doc API: M.Popup

---

Remote

Mapea incluye un mecanismo para realizar peticiones AJAX, haciendo uso de proxy si este está configurado, evitando de esta forma tener que escribir todo el código para hacer la petición o tener que hacer uso de más librerías que facilitan esta tarea.

//Creamos el mapa
var mapajs = M.map({
  container: "map",
  wmcfiles: ["cdau"]
});

mapajs.getMapImpl().on('click',function(e){

// Hacemos una peticón GET con M.remote
  M.remote.get("http://ovc.catastro.meh.es/ovcservweb/OVCSWLocalizacionRC/OVCCoordenadas.asmx/Consulta_RCCOOR",
{'SRS':mapajs.getProjection().code,
'Coordenada_X':e.coordinate[0],
'Coordenada_Y':e.coordinate[1]}).then(function(res){
  	console.log(res.text);
  });

// Una peticion POST
  let url = 'http://www.ieca.junta-andalucia.es/geoserver-ieca/topp/wfs?';
  let request = '<wfs:GetFeature service="WFS"  version="1.0.0"' +
    '  outputFormat="json"' +
    '  xmlns:topp="http://www.openplans.org/topp"' +
    ' xmlns:wfs="http://www.opengis.net/wfs"' +
    '  xmlns:ogc="http://www.opengis.net/ogc"' +
    ' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
    '  xsi:schemaLocation="http://www.opengis.net/wfs' +
    '  http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd">' +
    '<wfs:Query typeName="topp:andprov">' +
    '</wfs:Query>' +
    '</wfs:GetFeature>';

  M.remote.post(url, request).then(res => console.log(JSON.parse(res.text)))
});

Ejemplo de uso

---

M.utils
La clase M.utils contiene múltiples funciones de utilidad, como las siguientes:

getOpacityFromRgba y getRgba
getOpacityFromRgba obtiene la transparencia de un valor rgba. Esto facilita su aplicación como opacidad en la simbología de Mapea, que sigue el estándar SLD, en escenarios donde se use un componente que trabaje en rgba. El proceso inverso lo realiza la función getRgba:

let opacity = M.utils.getOpacityFromRgba("rgba(255,0,0,0.5)"); //0.5
let rgba = M.utils.getRgba("#FF0000",0.5); //rgba(255,0,0,0.5)

beautifyString
Una operación muy frecuente a realizar en los visores de mapas es el formateo de campo o atributos de las capas para hacerlos más legibles en operaciones como identify. La función M.utils.beautifyString ofrece precisamente eso, aplicando las siguientes operaciones:

1. Pasar a minúsculas.
2. Eliminar espacios en blanco.
3. Pasar primer caracter a mayúsculas.
4. Reemplazar '_' por espacios en blanco.
5. Reducir el número de espacios seguidos.
6. Pasar a camel case.
7. Pasar a minúsculas algunas palabras conocidas.