ol-ext

A large, community-maintained collection of controls, interactions, filters, and styles that extend OpenLayers with map UI and cartographic features it doesn't ship out of the box.

Library
npm
v4.0.38
1,354stars
BSD 3-Clause License

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum.How we score it →
71/100Good
Development Activity36
Maintenance56
Community92
Maturity60
Momentum40

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation.How we score it →
63/100Good
Architecture68
Code Quality35
Innovation58
Learning Curve90

ol-ext is a set of extensions for the OpenLayers mapping library, adding dozens of ready-made controls, interactions, filters, formats, and style renderers that OpenLayers core doesn’t include. Started in 2015 by Jean-Marc Viglino at IGN-France and now maintained by 120+ contributors, it covers everything from a drag-and-drop layer switcher and CSS/canvas popups to Font Awesome symbol renderers, animated clusters, statistical chart styles (pie/bar) for choropleth-style maps, a control-bar/toolbar system, legend generation, and geocoding search controls.

Each module is shipped as an independent ES6 class that subclasses the corresponding OpenLayers base class (ol/control/Control, ol/interaction/Interaction, ol/layer/Layer, etc.), so consumers import only the pieces they need — e.g. import LayerSwitcher from 'ol-ext/control/LayerSwitcher' — rather than pulling in the whole package. It ships both as ES modules for bundlers (webpack, Rollup, Parcel) and as a legacy global-script build for direct <script> tag use, with community-maintained TypeScript declarations available separately.

What You Get

  • A drag-and-drop layer switcher control with per-layer opacity, visibility, and reordering
  • CSS and canvas-based popup/overlay components for feature info windows
  • Font Awesome, Maki, and custom symbol renderers for point styling
  • Statistical chart styles (pie and bar) for rendering aggregated data directly on the map
  • Animated cluster and feature-animation effects (bounce, fade, shake, path animation)
  • A composable control-bar/toolbar system for grouping related map controls
  • Canvas image filters (blur, colorize, crop, fold, composite) applied directly to map layers
  • Search controls with built-in geocoder backends (BAN, Nominatim, Photon, and others)

Common Use Cases

  • Adding a professional layer-switcher UI to a multi-layer OpenLayers web map
  • Rendering statistical/choropleth data as pie or bar chart symbols on a map
  • Building custom popups and info overlays that follow map features
  • Animating clustered point features as users zoom and pan
  • Adding a search/geocoding control backed by a public geocoding API

Under The Hood

Architecture The codebase is organized as a flat, domain-partitioned collection under src/ (control, interaction, filter, format, layer, source, overlay, render, geom, legend, style, util) rather than a layered application — each class extends the matching OpenLayers base class (ol_control_Control, ol_interaction_Interaction, ol_layer_*, etc.) and follows OpenLayers’ own ol_<namespace>_<ClassName> naming convention, so the package reads as a large plugin surface consumed a-la-carte via per-file imports (e.g. ol-ext/control/LayerSwitcher) rather than a single entry point. There’s no internal dependency injection or shared orchestration layer; modules are largely independent of one another and only share OpenLayers’ own base classes and a small util/ helper layer, so a breaking change to an OpenLayers base class would ripple across many subclasses but sibling modules stay decoupled from each other.

Tech Stack Plain ES6 ("type": "module") with OpenLayers (ol) as a peer dependency (>= 5.3.0) — no application framework, no bundler dependency for consumers since it’s designed to be tree-shaken by whichever bundler (webpack, Rollup, Parcel) or Angular integration the consumer already uses. The project’s own build (producing the dist/ol-ext.js and dist/ol-ext.css bundles and the deprecated openlayers-ext global-script package) runs on Gulp (gulpfile.cjs/js) with gulp-concat, gulp-cssmin, gulp-minify, and gulp-autoprefixer; publishing to npm is automated via a GitHub Actions workflow triggered on version tags.

Code Quality There is no automated test suite — the only test-adjacent file is a manual example page (examples/layer/test.html), and the package.json test script points at a script that doesn’t exist in the repo. ESLint is configured (eslint:recommended) but most rules are downgraded to warnings (no-unused-vars, no-empty, no-redeclare, etc.) and the lint script itself swallows failures (eslint --fix src/ || exit 0); CI only runs an npm-publish job on release tags, with no lint or test gate. Naming is highly consistent across the whole codebase (mirroring OpenLayers’ own conventions), and public APIs are documented via JSDoc comments used to auto-generate the hosted API docs, but there is no TypeScript in the source itself (community-maintained @types declarations exist as a separate package).

What Makes It Unique What sets ol-ext apart from most third-party OpenLayers add-ons is sheer breadth and longevity rather than one singular technical innovation: a decade of continuous maintenance by 120+ contributors has produced one of the most comprehensive third-party extension sets for OpenLayers, spanning UI controls, canvas filters, statistical chart styling, animation, and geocoding search in a single, still-actively-published package. Its dual BSD/CeCILL-B licensing (the CeCILL-B French free-software license, with a BSD-compatible option offered for convenience) also reflects its origin at IGN-France, the French national mapping agency, which is unusual provenance among JavaScript mapping libraries.

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers

Search