- Clonar el repositorio en tu ordenador
$ git clone https://github.com/VirginiaGomezR/OpenLayersViewer.git
- Instalar dependencias
$ npm install
- Arrancar en modo desarrollo:
$ npm start
Visor que muestra una capa base (OpenStreetMap) y una capa vectorial (GeoJSON) con información de los paises del mundo. Con el botón podemos cambiar el estilo de la capa vectorial. A través del evento hover del ratón se visualiza el nombre del país y el continente al que pertenece. Los cambios de estilo son almacenados en la cache del navegador.
Para dibujar el mapa he elegido la librería de webmapping Openlayers ya que es la que mejor conocía. Instalé ol package para optimizar el desarrollo, siguiendo las recomendaciones de la documentación de Openlayers. El diseño está basado en visores sencillos como el de la Comunidad de Madrid.
- Cambio de estilo capa vectorial
- Visualización de información con evento hover
- Guardar configuración
Un botón nos permite cambiar el color del relleno y trazado de la capa vectorial. Se han definido dos estilos diferentes (Estilo A y Estilo B).
Al pasar el ratón por la capa vectorial se visualiza el nombre del país y el continente mediante un popup. La fuente de información procede de un archivo GeoJSON que hemos importado. Si pasamos el cursor fuera de la capa vectorial (océano) este popup desaparece ya que no hay información.
Se recoge y guarda la acción del usuario por medio de getlocalStorage y setlocalStorage respectivamente.
Desarrollo y diseño: Virginia Gómez Rodríguez