OpenLayers facilita la incorporación de un mapa dinámico en cualquier página web. Puede mostrar mosaicos de mapas, datos vectoriales y marcadores cargados desde cualquier fuente. OpenLayers ha sido desarrollado para promover el uso de información geográfica de todo tipo.

OpenLayer es compatible con Proj4js (es una librería para transformar coordenadas de puntos de un sistema de coordenadas a otro).

¿Qué es OpenLayers?

Ventajas de usar OpenLayers

Entorno de Desarrollo

📘 Documentación

CDNViteWebPack
Ver CDN con la Versión actualOpenLayers + ViteOpenLayers + WebPack

Primer Mapa

Un ejemplo sencillo para crear un mapa sería el siguiente:

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

📘 Documentación   🚀 CodePen

Map

📘 Documentación

Map: Es el componente central de Openlayer ( ol / Map ), se representa en un contenedor (normalmente en un div). Para poder representar un mapa es necesario: