tutorial Panel de un único control
Para entender esta sección, primero hay que saber Cómo crear un control. Una vez se tiene el conocimiento sobre los controles, se va a explicar cómo crear un panel de un único control a través del siguiente ejemplo:
1./ Se añade el CSS necesario para asignar el estilo al panel
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.m-herramienta-container {
top: 20px;
left: 600px;
}
.buttonHerramienta {
border: 2px solid #FFF !important;
border-radius: 50% !important;
background-color: #71A7D3 !important;
}
.buttonHerramienta:before {
/* icono a usar */
content: "🖭";
font-size: 22px;
font-family: none;
color: #FFF !important;
}
.buttonHerramienta.activated {
border: 2px solid #71A7D3 !important;
border-radius: 50% !important;
background-color: #ffffff !important;
}
.buttonHerramienta.activated:before {
background-color: #ffffff !important;
color: #71A7D3 !important;
}
</style>
2./ Se crea un objeto panel y se añade al mapa
const mapajs = M.map({
container: 'mapjs', //id del contenedor del mapa
});
const panelExtra = new M.ui.Panel('toolsExtra', {
"className": 'm-herramienta',
"collapsedButtonClass": 'm-tools',
"position": M.ui.position.TL
});
mapajs.addPanels([panelExtra]);
3./ Se añade el contenido al panel, que en este caso es un único botón
document.querySelector('.m-herramienta .m-panel-controls').innerHTML +=
`
<div class="m-control m-herramienta-container">
<button id="m-herramienta-button" class="buttonHerramienta" title="Herramienta"></button>
</div>
`
4./ Se crea el control
const control1 = new M.Control(new M.impl.Control(), 'ControlPrueba');
// Con esta línea, se comparte con el objeto window la variable control1
window.control1 = control1;
5./ Se añade la funcionalidad al control creado
control1.createView = (map) => {
const contenedor = document.createElement('div');
console.log(control1)
return contenedor;
}
control1.getActivationButton = (html) => {
return html.querySelector('#m-herramienta-button');
}
control1.activate = () => {
M.toast.success('Activado');
console.log('Activado');
document.querySelector('.buttonHerramienta').classList.add("activated");
}
control1.deactivate = () => {
M.toast.info('Desactivado');
console.log('Desactivado');
document.querySelector('.buttonHerramienta').classList.remove("activated");
}
control1.manageActivation(document.querySelector('.m-herramienta-container'));
1.INICIO
1.1. Componentes de la API-CNIG
1.2. Documentación y Puntos de acceso
1.3. Primeros pasos
1.4. Diagrama API CNIG
2.1. Capas
■ 2.1.1. Fuentes
• 2.1.1.1. Capas vectoriales
+ Vector
+ WFS
+ GeoJSON
+ KML
+ MVT
+ OGCAPIFeatures
+ MBTilesVector
+ GenericVector
• 2.1.1.2. Capas ráster
+ WMS
+ WMTS
+ TMS
+ XYZ
+ OSM
+ MBTiles
+ GenericRaster
• 2.1.1.3. Capas rápidas
■ 2.1.2. Simbolización
• 2.1.2.1. Genérica
+ Puntos
+ Líneas
+ Polígonos
• 2.1.2.2. Básica
+ Puntos
+ Líneas
+ Polígonos
• 2.1.2.3. Avanzada
+ Coropletas
+ Proporcional
+ Categorías
+ Estadísticos
+ Mapas de Calor
+ Cluster
+ Línea de flujo
+ Composición
2.4. Paneles
■ Creación de panel desde cero sin controles
■ Tutorial Panel de un único control
5. API REST
5.1. Parametrización API-REST
5.2. Base de Datos API-REST
5.3. API REST Actions
5.4. Servicio de correos electrónicos
5.5. Capas rápidas
6. PARAMETRIZACIÓN VISUALIZADORES
9. GUÍA DE DESARROLLO
> Guía de desarrollo de plugins
> Guía de desarrollo de visualizadores con React
> Guía de desarrollo de componentes
> Guía para el desarrollo de API-CNIG
> Compilación proyecto API-CNIG