Creación de panel desde cero sin controles
En esta página vamos a guiar paso por paso cómo crear un panel y añadir una funcionalidad (cómo crear una extensión personalizada). En resumen, lo que tendremos que hacer es añadir el CSS necesario para establecer el estilo del resto de extensiones que tiene la APICNIG, añadir la estructura genérica interna de las extensiones y añadir una funcionalidad a través de una función de javascript. Los pasos a seguir para al creación de un panel personalizado son los siguientes:
1./ Añadimos el código CSS que en la etiqueta < style > dentro del < head > . Esta parte le dará el mismo aspecto de estilo que el resto de extensiones de la API-CNIG:
.g-herramienta .m-tools:before {
content: "🖭"; /* icono a usar */
font-size: 22px;
font-family: none
}
div.opened {
background-color: #fff !important;
box-shadow: none !important;
}
div.opened>button {
color: #71a7d3 !important;
background-color: #fff !important;
}
.m-areas>div.m-area>div.m-panel.opened {
background-color: #ffffff00 !important;
}
div.m-panel-contenedor{
box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 -1px 0 rgba(0, 0, 0, .02)!important;
}
div.m-control.m-container {
position: inherit !important;
overflow: hidden;
background-color: white;
border-radius: 0;
padding: 0;
box-shadow: none;
display: table;
width: 100%;
}
.m-panel .title {
line-height: 40px;
color: #ffffff !important;
background-color: #71a7d3;
padding: 0px 18px;
}
.divContenido {
margin: 5px;
display: flex;
}
.buttonContenido {
cursor: pointer;
border: 2px solid #fff!important;
border-radius: 50%!important;
color: #364b5f!important;
background-color: #fff!important;
opacity: 1;
margin: 0;
transition: opacity .25s ease 0s;
background: none;
padding: 8px;
font-size: 24px;
}
2./ Creamos un objeto "panel" en < script > dentro del < body > , que nos servirá de base para crear la base de la extensión:
const panelExtra = new M.ui.Panel('toolsExtra', {
"collapsible": true,
"className": 'g-herramienta',
"collapsedButtonClass": 'm-tools',
"position": M.ui.position.TL
});
3./ Creamos dos objetos < div > que serán necesarios para seguir la estructura interna de un panel:
// contenedor
var contenedorPadre = document.createElement('div');
contenedorPadre.id = 'div-contenedorPadre'
contenedorPadre.className = 'm-panel-contenedor'
var contenedor = document.createElement('div');
contenedor.id = 'div-contenedor'
contenedor.className = 'm-control m-container'
4./ Creamos un objeto < div > que nos servirá como título del panel:
// título
var tituloContenedor = document.createElement('div');
tituloContenedor.className = 'divTitulo'
tituloContenedor.className = 'title'
tituloContenedor.id = "titleInfo"
tituloContenedor.role = "heading"
tituloContenedor.innerHTML = "Esto es un título";
5./ Creamos otro objeto < div > que almacenará las funcionalidades personalizadas:
// contenido
var contenido = document.createElement('div');
contenido.id = "contenidoDIV"
contenido.className = 'divContenido'
6./ Creamos un objeto < button > ,su función asociada y añadiremos el botón al div contenedor. Esta función asociada será la encargada de la lógica que se quiera implementar en el botón:
var botonDemo = document.createElement('button');
botonDemo.innerHTML = '🕬';
botonDemo.className = "buttonContenido"
botonDemo.title="Hola, esto es un botón que hace un aviso"
var botonDemoFunc = () => {
M.dialog.success('Le has dado al botón');
}
botonDemo.onclick = botonDemoFunc
contenido.appendChild(botonDemo)
7./ Añadimos cada < div > creado a su respectivo nodo:
// añadir a contenedor
contenedor.appendChild(tituloContenedor)
contenedor.appendChild(contenido)
contenedorPadre.appendChild(contenedor)
8./ Añadimos el panel al mapa, le añadimos el < div > contenedor con la estructura interna del panel y le añadimos unos títulos a sus componentes internos para habilitar la opción de "tooltip":
mapajs.addPanels([panelExtra]);
panelExtra.getControlsContainer().appendChild(contenedorPadre)
panelExtra._element.title="Esto es una extensión personalizada"
panelExtra._buttonPanel.title="Click aquí para cerrar"
Existe una forma de añadir el contenido al panel en un solo paso, directamente añadiendo el texto HTML de la siguiente manera, aunque no nos dará tanta flexibilidad como el procedimiento anterior:
// caso 2: añadirlo como innerHTML directamente
mapajs.addPanels([panelExtra]);
panelExtra.getControlsContainer().innerHTML+= `
<div id="div-contenedor" class="m-control m-container m-panel-controls">
<div class="divTitulo">
<p id="titleInfo" class="title" role="heading">Esto es un título</p>
</div>
<div id="contenidoDIV">
<button>botón</button>
</div>`
Una vez completados estos pasos, habremos creado una extensión nueva en cliente:
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