Skip to content

Latest commit

 

History

History
291 lines (245 loc) · 9.22 KB

README.md

File metadata and controls

291 lines (245 loc) · 9.22 KB
Raw

APICNIG 🔌 M.plugin.ShareMap

Descripción

Plugin que permite copiar la url del mapa actual visualizado. Exporta la información de todas las capas cargadas en el mapa.

Dependencias

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

  • sharemap.ol.min.js
  • sharemap.ol.min.css
 <link href="https://componentes.cnig.es/api-core/plugins/sharemap/sharemap.ol.min.css" rel="stylesheet" />
 <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/sharemap/sharemap.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/sharemap/sharemap-1.0.0.ol.min.css" rel="stylesheet" />
 <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/sharemap/sharemap-1.0.0.ol.min.js"></script>

Parámetros

El constructor se inicializa con un JSON con los siguientes atributos:

  • 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).
  • tooltip: Texto para el mensaje cuando se copia la cadena (por defecto '¡Copiado!').
  • baseUrl: Url sobre la que está montada la instancia. Por defecto: https://componentes.cnig.es/api-core/
  • minimize: Genera URL minificada. (por defecto: false).
  • title: Título para la cabecera de la ventana (por defecto: 'Compartir Mapa').
  • btn: Título para el botón Aceptar (por defecto: 'OK').
  • copyBtn: Título para el botón copiar (por defecto: 'Copiar').
  • overwriteStyles: Parámetro para sobreescribir los estilos. Si su valor es true, se aplicarán los estilos del parámetro styles. Si su valor es false, se aplicarán los estilos por defecto. Valor por defecto del parámetro: false. Colores por defecto:
    • primaryColor: '#71a7d3'
    • secondaryColor: '#ffffff'
  • styles: Estilo a aplicar para sobreescribir. (por defecto: {}).
    • Ejemplo:
styles: {
  primaryColor: 'yellow',
  secondaryColor: 'green'
}
  • text: Texto del segundo título. (por defecto: 'HTML embebido').
  • copyBtnHtml: Título para el segundo botón. (por defecto: 'Copiar').
  • urlAPI: URL API o URL Visor (API verdadero o predeterminado, visor falso). Por defecto: false.
  • shareLayer: Define si se comparten todas las capas o ninguna, valor de tipo Boolean. Para que tenga efecto filterLayers, shareLayer debe estar como false o no definido. Por defecto: false.
  • filterLayers: Selecciona la capa a compartir por el nombre, valor de tipo Array.
    • Por defecto: [ ].
    • Array<String>: Los valores serán los nombres de la capa.

API-REST

URL_API?sharemap=position*tooltip*baseUrl*minimize*title*btn*copyBtn*text*copyBtnHtml*urlAPI*shareLayer
Parámetros Opciones/Descripción Disponibilidad
position TR/TL/BR/BL Base64 ✔️ | Separador ✔️
tooltip Texto para el mensaje cuando se copia la cadena Base64 ✔️ | Separador ✔️
baseUrl URL instancia de mapea Base64 ✔️ | Separador ✔️
minimize true/false Base64 ✔️ | Separador ✔️
title Título para la cabecera de la ventana Base64 ✔️ | Separador ✔️
btn Título para el botón Aceptar Base64 ✔️ | Separador ✔️
copyBtn Título para el botón copiar Base64 ✔️ | Separador ✔️
overwriteStyles true/false Base64 ✔️ | Separador ❌
styles Estilos para color primario y secundario Base64 ✔️ | Separador ❌
text Texto del segundo título Base64 ✔️ | Separador ✔️
copyBtnHtml Título para el segundo botón Base64 ✔️ | Separador ✔️
urlAPI true/false Base64 ✔️ | Separador ✔️
shareLayer true/false Base64 ✔️ | Separador ✔️
filterLayers Array con los nombres de las capas Base64 ✔️ | Separador ❌

Ejemplos de uso API-REST

https://componentes.cnig.es/api-core/?sharemap=TR*Copiado%20al%20portapapeles*https://componentes.cnig.es/api-core/*true*Compartir%20mapa%20title*OK*copyBtn*Compartir%20mapa%20text*copyBtnHtml*false*true

https://componentes.cnig.es/api-core/?sharemap=TL

Ejemplos 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 compartiendo todas las capas

Ejemplo de constructor del plugin:

{
  baseUrl: "https://componentes.cnig.es/api-core/",
  position: "TR",
  tooltip: "Copiado al portapapeles",
  minimize: true,
  title: "Compartir mapa title",
  btn: "OK",
  copyBtn: "copyBtn",
  text: "Compartir mapa text",
  copyBtnHtml: "copyBtnHtml",
  urlAPI: false,
  shareLayer: true,
}
https://componentes.cnig.es/api-core/?sharemap=base64=eyJiYXNlVXJsIjoiaHR0cHM6Ly9jb21wb25lbnRlcy5jbmlnLmVzL2FwaS1jb3JlLyIsInBvc2l0aW9uIjoiVFIiLCJ0b29sdGlwIjoiQ29waWFkbyBhbCBwb3J0YXBhcGVsZXMiLCJtaW5pbWl6ZSI6dHJ1ZSwidGl0bGUiOiJDb21wYXJ0aXIgbWFwYSB0aXRsZSIsImJ0biI6Ik9LIiwiY29weUJ0biI6ImNvcHlCdG4iLCJ0ZXh0IjoiQ29tcGFydGlyIG1hcGEgdGV4dCIsImNvcHlCdG5IdG1sIjoiY29weUJ0bkh0bWwiLCJ1cmxBUEkiOmZhbHNlLCJzaGFyZUxheWVyIjp0cnVlfQ==

Ejemplo filtrando las capas

En este ejemplo, le pasamos por url dos capas y especificamos en el parámetro filterLayers el nombre de la capa que queremos compartir (shareLayer tiene que estar como false o no definido).

Ejemplo de constructor del plugin:

{
  position: "TL",
  shareLayer: false,
  filterLayers: ["OI.OrthoimageCoverage"],
}

(*) En este ejemplo, le pasamos por url dos capas y especificamos en el parámetro filterLayers el nombre de la capa que queremos compartir.

https://componentes.cnig.es/api-core/?sharemap=base64=eyJwb3NpdGlvbiI6IlRMIiwic2hhcmVMYXllciI6ZmFsc2UsImZpbHRlckxheWVycyI6WyJPSS5PcnRob2ltYWdlQ292ZXJhZ2UiXX0=&layers=WMTS*http://www.ign.es/wmts/pnoa-ma?*OI.OrthoimageCoverage*GoogleMapsCompatible*imagen*true*image/jpeg*true*true*true,WMS*Unidad%20administrativa*http://www.ign.es/wms-inspire/unidades-administrativas?*AU.AdministrativeUnit*true*true**1.3.0*true*true*true

Ejemplo de uso

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

const mp = new ShareMap({
  baseUrl: 'https://componentes.cnig.es/api-core/',
  position: 'TR',
  tooltip: '¡Copiado!',
  minimize: true,
  title: 'Compartir mapa',
  btn: 'OK',
  copyBtn: 'Copiar',
  text: 'Compartir mapa',
  copyBtnHtml: 'Copiar',
  urlAPI: false,
  shareLayer: true,
  filterLayers: ['cosas1_poligono'],
  overwriteStyles: false,
  styles: {
    secondaryColor: '#272727',
  },
});

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