Create Interactive Maps with Angular and OpenLayers

Angular, OpenLayers, TypeScript, GIS, WebGIS

Angular applications often need map views for operational dashboards, asset tracking, geospatial forms, field workflows and analytical tools. OpenLayers is a strong mapping engine for these use cases, but raw OpenLayers setup code can become an imperative island inside an Angular application.

ng-openlayers is an Angular library that makes OpenLayers maps declarative. Instead of creating every map, layer, source and interaction manually in component code, the application can describe map structure with Angular components and templates.

Why a Declarative Angular Wrapper Helps

A map usually has a clear hierarchy: map, view, layers, sources, features, styles, controls, interactions and overlays. That hierarchy maps naturally to Angular component composition. With ng-openlayers, map configuration stays visible in the template and still exposes the underlying OpenLayers instances for advanced use cases.

  • Layers, sources and styles are part of the Angular template.
  • Inputs configure OpenLayers options with typed Angular bindings.
  • Outputs expose map, view, interaction and feature events.
  • The app can still access underlying OpenLayers instances when needed.

Install ng-openlayers

npm install ng-openlayers ol proj4

Add the OpenLayers stylesheet to your Angular application styles:

node_modules/ol/ol.css

Minimal Angular Map Example

The following example creates an OpenStreetMap tile layer with an Angular template-driven map structure. 

<aol-map [width]="'100%'" [height]="'500px'">
  <aol-view [zoom]="12">
    <aol-coordinate [x]="19.94498" [y]="50.06465" [srid]="'EPSG:4326'"></aol-coordinate>
  </aol-view>

  <aol-layer-tile>
    <aol-source-osm></aol-source-osm>
  </aol-layer-tile>

  <aol-interaction-default></aol-interaction-default>
  <aol-control-defaults></aol-control-defaults>
</aol-map>

What You Can Build

The demo includes examples for markers, GeoJSON, vector layers, draw and modify interactions, select and snap interactions, overlays, WMS, ArcGIS image sources, static images, tile JSON, clusters, graticules, measurements and style composition.

Canonical Article

This own-domain page is now the canonical version of my earlier Angular and OpenLayers tutorial.