Skip to content

Latest commit

 

History

History
212 lines (166 loc) · 6.64 KB

README.md

File metadata and controls

212 lines (166 loc) · 6.64 KB
Raw

APICNIG 🔌 M.plugin.OverviewMap

Descripción

Plugin que muestra una previsualización de la zona donde está centrado el mapa. ⚠️ Si la anchura de pantalla es 768 pixeles o menor, el botón y panel del plugin estarán ocultos.

Dependencias

Para que el plugin funcione correctamente es necesario importar las siguientes dependencias en el documento html:

  • overviewmap.ol.min.js
  • overviewmap.ol.min.css
 <link href="https://componentes.cnig.es/api-core/plugins/overviewmap/overviewmap.ol.min.css" rel="stylesheet" />
 <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/overviewmap/overviewmap.ol.min.js"></script>

Uso del histórico de versiones

Existe un histórico de versiones de todos los plugins de API-CNIG en api-ign-legacy para hacer uso de versiones anteriores. Ejemplo:

 <link href="https://componentes.cnig.es/api-core/plugins/overviewmap/overviewmap-1.0.0.ol.min.css" rel="stylesheet" />
 <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/overviewmap/overviewmap-1.0.0.ol.min.js"></script>

Parámetros

El constructor se inicializa con dos objetos JSON. El primero contiene el atributo 'position' y el segundo los atributos 'collapsed' y 'collapsible', descritos a continuación:

  • position: Indica la posición donde se mostrará el plugin.
    • 'TL': (top left) - Arriba a la izquierda.
    • 'TR': (top right) - Arriba a la derecha.
    • 'BL': (bottom left) - Abajo a la izquierda.
    • 'BR': (bottom right) - Abajo a la derecha (por defecto).
  • collapsed: Indica si el plugin viene colapsado de entrada (true/false). Por defecto: true.
  • collapsible: Indica si el plugin puede abrirse y cerrarse (true) o si permanece siempre abierto (false). Por defecto: true.
  • tooltip. Tooltip que se muestra sobre el plugin (Se muestra al dejar el ratón encima del plugin como información). Por defecto: Mapa de situación.
  • fixed: Indica si el mapa del plugin permanece a un zoom fijo (true/false). Por defecto: false.
  • zoom: Indica el nivel del zoom al que permanecerá fijo el mapa del plugin. Por defecto: '' (cadena vacía).
  • baseLayer: URL de la capa base si se quiere prefijar una en el plugin overviewmap. Por defecto: WMTS*http://www.ign.es/wmts/ign-base?*IGNBaseTodo*GoogleMapsCompatible*Mapa IGN*false*image/jpeg*false*false*true

API-REST

URL_API?overviewmap=position*!collapsed*!collapsible*!tooltip*!fixed*!zoom*!baseLayer
Parámetros Opciones/Descripción Disponibilidad
position TR/TL/BR/BL Base64 ✔️ | Separador ✔️
collapsed true/false Base64 ✔️ | Separador ✔️
collapsible true/false Base64 ✔️ | Separador ✔️
tooltip Texto informativo Base64 ✔️ | Separador ✔️
fixed true/false Base64 ✔️ | Separador ✔️
zoom Nivel de zoom del mapa Base64 ✔️ | Separador ✔️
baseLayer URL de la capa base Base64 ✔️ | Separador ✔️

Ejemplos de uso API-REST

https://componentes.cnig.es/api-core?overviewmap=TR*!true*!true*!Mapa*!true*!5*!WMS*PNOA%202017*https://www.ign.es/wms/pnoa-historico?*PNOA2017*true*true

https://componentes.cnig.es/api-core?overviewmap=TR*!true*!true*!Mapa

Ejemplo de uso API-REST en base64

Para la codificación en base64 del objeto con los parámetros del plugin podemos hacer uso de la utilidad M.utils.encodeBase64. Ejemplo:

M.utils.encodeBase64(obj_params);

Ejemplo de constructor:

{
  position: "BR",
  fixed: true,
  zoom: 4,
  baseLayer: "WMTS*http://www.ign.es/wmts/ign-base?*IGNBaseTodo*GoogleMapsCompatible*Mapa IGN*false*image/jpeg*false*false*true",
  collapsed: false,
  collapsible: false,
  tooltip: "Mapa"
}
https://componentes.cnig.es/api-core?overviewmap=base64=eyJwb3NpdGlvbiI6IkJSIiwiZml4ZWQiOnRydWUsInpvb20iOjQsImJhc2VMYXllciI6IldNVFMqaHR0cDovL3d3dy5pZ24uZXMvd210cy9pZ24tYmFzZT8qSUdOQmFzZVRvZG8qR29vZ2xlTWFwc0NvbXBhdGlibGUqTWFwYSBJR04qZmFsc2UqaW1hZ2UvanBlZypmYWxzZSpmYWxzZSp0cnVlIiwiY29sbGFwc2VkIjpmYWxzZSwiY29sbGFwc2libGUiOmZhbHNlLCJ0b29sdGlwIjoiTWFwYSJ9

Ejemplo de uso

  const map = M.map({
    container: 'map'
  });

  const mp = new M.plugin.OverviewMap({
    position: 'BR',
    fixed: true,
    zoom: 4,
    //baseLayer: 'WMS*PNOA 2017*https://www.ign.es/wms/pnoa-historico?*PNOA2017*true*true', Ejemplo WMS
    baseLayer: 'WMTS*http://www.ign.es/wmts/ign-base?*IGNBaseTodo*GoogleMapsCompatible*Mapa IGN*false*image/jpeg*false*false*true', //Ejemplo WMTS
  }, {
    collapsed: false,
    collapsible: true,
  });

  map.addPlugin(mp);

👨‍💻 Desarrollo

Para el stack de desarrollo de este componente se ha utilizado

  • NodeJS Version: 14.16
  • NPM Version: 6.14.11
  • Entorno Windows.

📐 Configuración del stack de desarrollo / Work setup

🐑 Clonar el repositorio / Cloning repository

Para descargar el repositorio en otro equipo lo clonamos:

git clone [URL del repositorio]

1️⃣ Instalación de dependencias / Install Dependencies

npm i

2️⃣ Arranque del servidor de desarrollo / Run Application

npm run start

📂 Estructura del código / Code scaffolding

/
├── src 📦                  # Código fuente
├── task 📁                 # EndPoints
├── test 📁                 # Testing
├── webpack-config 📁       # Webpack configs
└── ...

📌 Metodologías y pautas de desarrollo / Methodologies and Guidelines

Metodologías y herramientas usadas en el proyecto para garantizar el Quality Assurance Code (QAC)

⛽️ Revisión e instalación de dependencias / Review and Update Dependencies

Para la revisión y actualización de las dependencias de los paquetes npm es necesario instalar de manera global el paquete/ módulo "npm-check-updates".

# Install and Run
$npm i -g npm-check-updates
$ncu