DEV Community: Florent Gravin

Adding SonarQube to an AI-Assisted Development Workflow

Florent Gravin — Mon, 02 Mar 2026 11:11:40 +0000

We use AI agents as coding assistants (here Claude Code) in our daily work. Not in a "vibe coding" way where you throw a prompt and hope for the best. We practice spec-driven development: detailed specifications, structured plans, context engineering through CLAUDE.md files, custom instructions, and carefully scoped tasks. The goal is to give the AI enough context to produce good code from the start.

And it mostly works. The code we get is solid. But "mostly" isn't enough when you're shipping to production. Even with good context and clear specs, an AI assistant can still produce code with security issues, excessive complexity, or subtle smells that you'd catch in a thorough review — if you had the time.

So we added SonarQube to the loop, and we let the AI fix what Sonar finds.

The setup

If you want to rely on CI based Sonar scans and reports, you need to have non-free options :

Sonar cloud subscription

SonarQube sever, developer edition (the community edition does not help much).

We wanted something that runs locally, requires no manual steps, and integrates directly into the AI agent's workflow.

A local SonarQube instance via Docker Compose:

services:
  sonarqube:
    image: sonarqube:lts-community
    ports:
      - "9000:9000"
    volumes:
      - sonar_data:/opt/sonarqube/data

A scan script (scripts/sonar-scan.sh) that handles the full lifecycle:

checks that SonarQube is up
auto-provisions an auth token on first run
creates the project if needed
runs the scanner via Docker
waits for analysis to finish
fetches all issues
and writes them to a structured sonar-report.json file.

Each issue comes with a file path, line number, severity, rule ID, and a description. This structured output is what makes the automation possible — the AI agent can parse it and act on each issue directly.

A Claude Code slash command (.claude/commands/sonar.md) that ties it together. When you run /sonar, the agent:

Runs bash scripts/sonar-scan.sh
Reads the report — issues sorted by severity (BLOCKER, CRITICAL, MAJOR...)
For each issue: reads the file, understands the rule violation, applies a minimal fix
Skips generated code (API clients, etc.)
Runs npm run type-check to make sure fixes don't break anything
Re-scans. If new issues appeared, fixes those too.
Reports what it changed and how many iterations it took.

CI enforcement via GitHub Actions on every PR:

- name: SonarQube Scan
  uses: SonarSource/sonarqube-scan-action@v5
  env:
    SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
    SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}

- name: Quality Gate
  uses: SonarSource/sonarqube-quality-gate-action@v1

How the loop works in practice

We recently built a feature with several Lit web components, services, and types — version history with diffs, draft management, conflict resolution dialogs. The AI generated it from detailed specs. The code worked, tests passed, TypeScript was happy.

Then we ran /sonar. Sonar found things like:

Cognitive complexity too high in some diff rendering logic
Unused imports left over from refactoring iterations
Duplicated string literals across components
Missing type narrowing where null dereferences were possible
Missing ARIA attributes on interactive elements

None of these were show-stoppers. All of them were things you'd want fixed before merging. The agent resolved them in 2-3 scan cycles without intervention.

The point isn't that the AI wrote bad code. The point is that static analysis catches a class of issues that are easy to miss during generation — and the AI is perfectly capable of fixing them when told what's wrong.

Why Sonar and not just a linter

ESLint catches a lot, but SonarQube covers ground that linters don't:

Security vulnerability detection (injections, hardcoded secrets, insecure patterns)
Cross-file duplication detection
Cognitive complexity scoring
A quality gate — a binary pass/fail, not just a list of warnings

Combined with TypeScript's type checker and your test suite, you get three independent verification layers, each catching different categories of problems.

What this looks like day-to-day

Our workflow before a PR:

Write specs and plan the feature
AI implements it with full context (CLAUDE.md, specs, existing code)
Run /sonar — the agent scans, fixes, re-scans until clean
Verify that typecheck and tests still pass
Review the diff and open the PR

The Sonar step typically adds a few minutes. It's not something we run after every edit — just before we consider a feature done. Think of it as an automated pre-review pass.

Closing thoughts

If you use AI assistants for coding, you already have good reasons to invest in context engineering — giving the AI the right specs, the right constraints, the right examples. SonarQube is another form of that same idea: giving the AI structured feedback about what's not right, and letting it iterate.

The scan script, the slash command, and the CI workflow are all straightforward to set up. SonarQube Community Edition is free. The scripts are plain bash. This works with any AI coding tool that can run shell commands and read structured output.

The code is on GitHub if you want to look at the implementation.

Link to the repository

GeoNetwork-ui custom applications made easy

Florent Gravin — Thu, 05 Jun 2025 19:45:00 +0000

geonetwork-ui is a powerful framework designed to help you build modern, user-friendly, fast, and responsive interfaces for your GeoNetwork catalog.

You can use it in a variety of ways:

Use ready-made applications, such as the Datahub.
Embed the provided web components directly into your site.
Fork the repository to create your own application or customize the existing ones.
Use the GNUI library via CDN to interact with your GeoNetwork backend using JavaScript.
Build a custom application using the gnui npm package.

This last option offers the most flexibility and freedom, allowing you to build a custom catalog interface with minimal effort. The gnui library already includes all the logic required to interact with GeoNetwork, along with a rich set of ready-to-use components for your application.

Let’s see how you can quickly build a custom, working application that searches your catalog and displays the results! 🚀

Create your workspace

For this exercice, we will create a Nx workspace, which helps scaffolding all your Angular setup. geonetwork-ui itself is a monorepo powered by Nx.

npx create-nx-workspace@20.1 custom-app

and choose the following options

✔ Which stack do you want to use? · angular
✔ Integrated monorepo, or standalone project? · integrated
✔ Application name · dataportal
✔ Which bundler would you like to use? · esbuild
✔ Default stylesheet format · css
✔ Do you want to enable Server-Side Rendering (SSR) ? · No
✔ Test runner to use for end to end (E2E) tests · none
✔ Which CI provider would you like to use? · github

⚠️ Caution : the generated application in the monorepo is a standalone application, which is not compatible with geonetwork-ui package. So you have to delete the generated app and create a new app which is not standalone :

cd custom-app
rm -rf apps/
npx nx g @nx/angular:application \
  --bundler=esbuild \
  --directory=apps/dataportal \
  --routing=true \
  --standalone=false \
  --addTailwind=true \
  --inlineStyle=true \
  --skipTests=true \
  --ssr=false \
  --name=dataportal

Set up required dependencies

📦 GNUI package requires peer dependencies to work seamlessly. You have to install stuff like :

NgRx for the store management
Ngx-translate for translation
Angular Material for out of the box UI components
and obviously, load the GNUI npm package !

npx nx g ngrx-root-store --project=gps --addDevTools=true --minimal=true

npm install --save \
  @ngrx/component@18.0.2 \
  @angular/material@18.2.13 \
  @angular/material-moment-adapter@18.2.13 \
  @angular/cdk@18.2.13 \
  @ngx-translate/core@15.0.0 \
  @ngx-translate/http-loader@16.0.1 \
  @biesbjerg/ngx-translate-extract-marker@1.0.0 \
  @vendure/ngx-translate-extract@9.0.3

npm i geonetwork-ui

Set up your custom application

First, link the GNUI CSS at the top of apps/dataportal/src/styles.css

@import 'geonetwork-ui/style.css';

And load GNUI tailwind setup by modifying the apps/dataportal/tailwind.config.js file.

const baseConfig = require('../../node_modules/geonetwork-ui/tailwind.base.config');

module.exports = {
  presets: [baseConfig],
  content: [
    './node_modules/geonetwork-ui/**/*.mjs',
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
  ...
}

In index.html, load your desired google font, which will be used for any text or title in the GNUI components :

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Now, we need to correctly initiate GNUI Angular modules and services.
In app.module.ts

  imports: [
    BrowserModule,
    ...
    BrowserAnimationsModule,
    FeatureSearchModule,
    FeatureCatalogModule,
    TranslateModule.forRoot({
      ...TRANSLATE_DEFAULT_CONFIG,
      loader: {
        provide: TranslateLoader,
        useClass: EmbeddedTranslateLoader,
      },
    }),
  ],
...
  providers: [
    importProvidersFrom(FeatureAuthModule),
    provideGn4(),
    provideRepositoryUrl(() => 'https://geonetwork-ui.labs.camptocamp.com/geonetwork/srv/api'),
    Gn4PlatformService,
  ],
...
export class AppModule {
  constructor() {
    ThemeService.applyCssVariables(
      '#0c4a6e',
      '#0c4a6e',
      'rgb(85,85,85)',
      'white',
      'Noto Sans',
      'Noto Sans'
    )
  }
}

Create your own application now !

Now that everything is set up, you can start using GNUI components. You can take advantage of the library's presentation components, but more powerfully, you can use logic containers that interact with GNUI states (such as the search state!).

For that, you need to create a new component where you put your catalog interfaces, leveraging GNUI search components.

npx nx g @nx/angular:component \
   --changeDetection=OnPush \
   --standalone=true \
   --path=apps/dataportal/src/app/search/search \
   --inlineStyle=true \
   --inlineTemplate=true \
   --skipTests=true

In this component, inject the SearchFacade to setup the search state, and trigger a search on page loading to have first results.

export class SearchComponent implements OnInit {
  constructor(public searchFacade: SearchFacade) {}

  ngOnInit() {
    this.searchFacade.setResultsLayout('ROW');
    this.searchFacade.requestMoreResults();
  }
}

and put the search input, and the search results like this :

    <div class="flex flex-col gap-14">
    <header
      class="flex flex-col items-center justify-center 
             bg-gradient-to-r from-indigo-400 from-10% 
             via-sky-500 via-30% to-emerald-500 to-90%  
             h-96 gap-14"
    >
      <h1 class="text-title text-5xl font-bold uppercase">
        My Data Portal
      </h1>
      <gn-ui-fuzzy-search
        class="text-[18px] pointer-events-auto container-lg w-full "
        style="--gn-ui-text-input-padding: 1.1em"
        [autoFocus]="true"
      ></gn-ui-fuzzy-search>
    </header>
    <main >
      <gn-ui-results-list-container

        [metadataQualityDisplay]="false"
        showMore="button"
      ></gn-ui-results-list-container>
    </main>
    </div>

Final touch, you need to initialize a search state container in your app.component.html file and nest your search component inside it. All DOM elements under the gnUiSearchStateContainer directive will be linked to a specific search state.

<div class="" gnUiSearchStateContainer="mainSearch">
  <app-search></app-search>
</div>

That’s it! 🎉 You’ve now created a search state and connected two gnui components to it:

FuzzySearch – provides the search input.
ResultsListContainer – displays the search results.

This is a very basic setup, but you're fully ready to expand it the way you like : add routing, permalink-based searches, record detail pages, news feeds, search filters, maps, and much more.

Give it a try, and feel free to comment if you get stuck or want to share what you've built! 💫

Find a working exemple in my github repo.

Find a real world production ready custom application : the Métropole de Lille data platform.

Querying Overture Maps GeoParquet Directly in the Browser with DuckDB WASM

Florent Gravin — Fri, 16 May 2025 12:32:04 +0000

Overture Maps provides a rich, open and collaborative dataset of geospatial features that’s designed to power everything from routing to visualization. These datasets are distributed in GeoParquet format : cloud-native, efficient, columnar, and increasingly becoming a standard for geospatial data at scale.

But what if you could explore and query these massive datasets directly in your browser - without any server-side processing or backend setup? Thanks to DuckDB-WASM, you can.

Demo
Code

In this post, we’ll walk through how to:

Load an Overture Maps GeoParquet file into the browser
Query it using SQL, right from the front-end
Visualize features on a map

Let’s dive in. 🦆

Tools and Technologies

DuckDB-WASM: A full DuckDB engine compiled to WebAssembly, enabling in-browser analytics.
GeoParquet: Parquet format with additional metadata to support geometry and spatial operations.
Overture Maps: A collaborative open map dataset from companies like Meta, Microsoft, Amazon, and TomTom.
MapLibre GL JS: For rendering geospatial features.

Step 1: Load DuckDB WASM

Include DuckDB-WASM in your HTML or install it via npm:

npm install @duckdb/duckdb-wasm

And initialize it:

import * as duckdb from '@duckdb/duckdb-wasm'
import duckdb_wasm from '@duckdb/duckdb-wasm/dist/duckdb-mvp.wasm?url'
import mvp_worker from '@duckdb/duckdb-wasm/dist/duckdb-browser-mvp.worker.js?url'
import duckdb_wasm_next from '@duckdb/duckdb-wasm/dist/duckdb-eh.wasm?url'
import eh_worker from '@duckdb/duckdb-wasm/dist/duckdb-browser-eh.worker.js?url'

const MANUAL_BUNDLES = {
  mvp: {
    mainModule: duckdb_wasm,
    mainWorker: mvp_worker,
  },
  eh: {
    mainModule: duckdb_wasm_next,
    mainWorker: eh_worker,
  },
}

const bundle = await duckdb.selectBundle(MANUAL_BUNDLES)
const worker = new Worker(bundle.mainWorker)
const db = new duckdb.AsyncDuckDB(logger, worker)
await db.instantiate(bundle.mainModule, bundle.pthreadWorker)

Step 2: Fetch and Load the GeoParquet File

Disclaimer : As DuckDB WASM does not support HTTPFS extension you can't directly hint the official Overture Maps GeoParquet releases, which provide root level S3 file system entry.
You should extract a subset of the datasets and host them in your web application, you could use the Python CLI for that.

Then, load the spatial extension to process the GeoParquet, and init your DuckDB connection.

conn.query('INSTALL spatial;LOAD spatial;')
conn.query('INSTALL h3 FROM community;LOAD h3;')
const conn = await db.connect()

Step 3: Query Your Data

Run SQL queries directly in the browser:

const res = await conn.query(`
WITH areas AS (
  SELECT names.primary as name,
         geometry as area_geom
  FROM read_parquet('https://your.parquet.path/division_area.parquet', filename=true, hive_partitioning=1) 
  WHERE subtype = 'locality'
    AND region = 'US-UT'
),
schools AS (SELECT geometry as place_geom
  FROM read_parquet('https://your.parquet.path/places.parquet', filename=true, hive_partitioning=1) 
  WHERE categories.main = 'hotel'
)
SELECT name, ST_AsGeoJSON(area_geom) as geometry,
       CAST(count(place_geom) as INT) as count
FROM areas
       LEFT JOIN schools ON ST_Contains(area_geom, place_geom)
GROUP BY area_geom, name
`)

This query fetches Overture division areas of Utah, and performs a spatial aggregation, it counts every hotel within each locality.

Step 4: Visualize on a Map

Convert geometries to GeoJSON and render them:

const data = {
  type: 'FeatureCollection',
  features: res.toArray().map((d: DuckResponseObject) => {
    const { geometry, ...properties } = d
    return {
      type: 'Feature',
      geometry: JSON.parse(geometry) as Polygon,
      properties,
    }
  }),
}

map.addSource('places-area-sources', {
  type: 'geojson',
  data,
})

map.addLayer({
  id: 'places-area',
  type: 'fill',
  source: 'places-area-sources',
  paint: {
    'fill-color': ['interpolate', ['linear'], ['get', 'count'], ...colorGradient],
    'fill-outline-color': 'grey',
    'fill-opacity': 0.8,
  },
})

Where colorGradient is a computed classification depending on count distribution.

Et voila ! You have a beautiful choropleth map, from Overture Maps datasets, with no backend implied 👏

Openlayers in an Angular application - Basics

Florent Gravin — Mon, 22 Mar 2021 09:52:54 +0000

It's always exciting starting the development of a new web mapping application. You already think about the beautiful maps you want to render, the data you want to provide and all the tools which will make your map interactions unique.
Before landing to this perfect picture, you'll have to make important choices in term of architecture and technologies.

For the mapping library, Openlayers would make a great candidate cause it's very flexible and rich in terms of features. Then you need to consider using a framework or not, and if yes, what framework. There is no good or bad choices regarding the pairing with Openlayers, all would work either way.

This article provides a step by step guide walking through the creation of a web mapping application based on Angular and Openlayers. It is the first step of a serie of articles that will cover more and more complex usecases.

We'll see first all the required setup to make both library running together. We'll then add our first map and introduce what would be a correct way to design the architecture of some usefull geospatial Angular components like:

Map
Mouse position
Scale line

Setup

First you need to install Angular-cli



npm install -g @angular/cli

Then generate your Angular application (no strict typechecking, no routing, CSS)



ng new openlayers-angular
cd openlayers-angular

Install Openlayers



npm install --save ol

Add Openlayers CSS to the build process: open angular.json and jump into /projects/openlayers-angular/architect/build/options/styles properties to link the css



"styles": [
  "src/styles.css",
  "node_modules/ol/ol.css"
],

Add a map

The root component of your Angular application is app.component. Let's design the global layout of the application, with a header, a footer, a side bar and a panel to render the map.

Edit first the root styles.css, this CSS file is not attached to any component and there is no style encapsulation, all the rules defined here will be applied in the whole application. It is the right place to declare your CSS variables, import your fonts and add the rules for the root elements like body or html.



@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    font-family: 'Roboto';
    color: var(--text-color);
    margin: 0;
    --header-color: #D1DFB7;
    --sidebar-color: #FAE6BE;
    --text-color: black;
}

Create the layout in app.component.html



<header>
  <div class="title">Map Viewer - Openlayers & Angular</div>
</header>
<main>
  <div class="left-bar"></div>
  <div id="ol-map" class="map-container"></div>
</main>
<footer>
  Footer
</footer>

And the associated app.component.css



:host {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
header {
    background-color: var(--header-color);
    padding: 2em;
}
header .title {
    font-size: 28px;
}
main {
    display: flex;
    flex-grow: 1;
}
.left-bar {
    width: 20em;
    background-color: var(--sidebar-color);
}
.map-container {
    flex-grow: 1;
}
footer {
    background-color: var(--header-color);
    padding: 1em;
}

Now ceate a simple Openlayers map in the root component and attach it to the map container. Usually, you can define your Openlayers map in the ngOnInit() method, the component will be ready and Openlayers can correctly attach the map to the DOM. See the component lifecycle documentation for more information, ngAfterViewInit() might be a good candidate as well.



import { Component, OnInit } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {

  map: Map;

  ngOnInit(): void {
    this.map = new Map({
      view: new View({
        center: [0, 0],
        zoom: 1,
      }),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: 'ol-map'
    });
  }
}

Fair, we now have our Map and a decent layout to build your application uppon to. Let's dig a little bit more to do it the Angular way.

Create a Map component

Note that the map is displayed in the page because of 2 things: the target: 'ol-map' option in the map creation will refer to the element that has the corresponding id: <div id="ol-map" class="map-container"></div>.

Let's see how we could create a map component that manages it for us.

Create the map component



ng generate component components/Map --changeDetection=OnPush --style=css --inlineTemplate=true --inlineStyle=true

This component is designed to draw the map, not to create it, it is a dumb component, so we pass the map as an Input(). I mostly prefer the imperative approach: you have a component (here the root one) where you create the map by your own, and you pass it as an input to all sub components that needs it. The opposite approach (declarative) would provide a component that accepts the map configuration (extent, zoom, layers) as inputs and which would create the map and return it as an output. I see 2 benefit of the imperative approach:

you entirely control the creation of the map
the map is created and ready before sub components are initialized, in a synchronous way.

To render the map in the component, we inject the ElementRef in the constructor, which is a reference to the root element of the component itself. We can then pass the HTML native element where we want to render the map, with the setTarget(this.elementRef.nativeElement) function.

map.component.ts



import { Component, OnInit, ChangeDetectionStrategy, Input, ElementRef } from '@angular/core';
import Map from 'ol/Map';

@Component({
  selector: 'app-map',
  template: '',
  styles: [':host { width: 100%; height: 100%; display: block; }',
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MapComponent implements OnInit {
  @Input() map: Map;
  constructor(private elementRef: ElementRef) {
  }
  ngOnInit() {
    this.map.setTarget(this.elementRef.nativeElement);
  }
}

Note that the component should have a full width/height so the map can be renderer in the whole container. Angular component are not <div> so we must specify display:block if we want them to be displayed as so.

Now, let's import the map component from the root component:
app.component.ts



  <div class="map-container">
    <app-map [map]="map"></app-map>
  </div>

The result is visually exactly the same as before, but you delegate the map rendering to a dedicated component. You can use this component several times in your application and you'll never get any conflict about the map target element.

Let's go further and create components for other generic Openlayers artefacts, we have a map, now let's add a mouse position and a scale line to see what is the Angular way to deal with Openlayers controls.

Scale line component

The idea is to seggregate the concerns and not to put too much responsabilities in the root component. We don't want to manage everything related to our map view at the same place, but we want to delegate this work to components.

Create the scale line component



ng generate component components/Scaleline --changeDetection=OnPush --style=css --inlineTemplate=true --inlineStyle=true

The approach is globally the same as for the map component, this component will just be the host for an Openlayers artefact. The idea is that the control is created inside the component and nowhere else, so it is added to the map only if the component is present in the application template.



import { Component, OnInit, ChangeDetectionStrategy, Input, ElementRef } from '@angular/core';
import Map from 'ol/Map';
import ControlScaleLine from 'ol/control/ScaleLine';

@Component({
  selector: 'app-scaleline',
  template: ``,
  styles: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ScalelineComponent implements OnInit {
  @Input() map: Map;
  control: ControlScaleLine;

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    this.control = new ControlScaleLine({
      target: this.elementRef.nativeElement,
    });
    this.map.addControl(this.control);
  }
}
```
Note that the component only responsability is to created the control, to tell the control to render its content into the host, and to add the control in the map. You could use this approach to any Openlayers control and respect the responsabilty segregation concerns.

# Mouse position
The mouse position control is a little bit more complex cause it relies on a coordinate format function. It's a perfect opportunity to introduce Angular Services, the logic should not be encapsulated into a component but shared as a service. Let's create this service which responsability is to format the coordinates giving formatting options:

```
ng generate service services/CoordinateFormatter
```
The service will expose a method to format the coordinates, depending on a template and the amout of expected digits.

`coordinate-formatter.service.ts`
```ts
import { Injectable } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Injectable({
  providedIn: 'root',
})
export class CoordinateFormatterService {
  constructor(private decimalPipe: DecimalPipe) {
  }

  numberCoordinates(
    coordinates: number[],
    fractionDigits: number = 0,
    template?: string,
  ) {
    template = template || '{x} {y}';

    const x = coordinates[0];
    const y = coordinates[1];
    const digitsInfo = `1.${fractionDigits}-${fractionDigits}`;
    const sX = this.decimalPipe.transform(x, digitsInfo);
    const sY = this.decimalPipe.transform(y, digitsInfo);
    return template.replace('{x}', sX).replace('{y}', sY);
  }
}
```
Now create your Angular component for the mouse position control. The logic is the same as `ScaleLineComponent`, the addition here would be the usage of our new service.

Create the component
```
ng generate component components/MousePosition --changeDetection=OnPush --style=css --inlineTemplate=true --inlineStyle=true
```
Add the mouse position control, set its target as before, and bind it to the coordinate map service.

```ts
import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  Input,
  ElementRef,
} from '@angular/core';
import Map from 'ol/Map';
import ControlMousePosition from 'ol/control/MousePosition';
import { CoordinateFormatterService } from '../../services/coordinate-formatter.service';

@Component({
  selector: 'app-mouse-position',
  template: ``,
  styles: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MousePositionComponent implements OnInit {

  @Input() map: Map;
  @Input() positionTemplate: string;
  control: ControlMousePosition;

  constructor(
    private element: ElementRef,
    private coordinateFormatter: CoordinateFormatterService,
  ) {
  }

  ngOnInit() {
    this.control = new ControlMousePosition({
      className: 'mouseposition-control',
      coordinateFormat: (coordinates: number[]) => this.coordinateFormatter
        .numberCoordinates(coordinates, 4, this.positionTemplate),
      target: this.element.nativeElement,
      undefinedHTML: undefined,
    });
    this.map.addControl(this.control);
  }
}

The component logic is very simple, we just pass the coordinates template as an input. In real life, we could extend this component to handle more options like the projection we want the mouse position to be rendered in, a DMS format and more...

Style Openlayers inner HTML

Angular component view encapsulation is a mecanism to attach component CSS only to component HTML. By default, it adds a random attribute to all HTML elements of the component and bind this attribute to the component CSS rules:



<header _ngcontent-cwb-c14="">
   <div _ngcontent-cwb-c14="" class="title">
      Map Viewer - Openlayers Angular
   </div>
</header>



header[_ngcontent-cwb-c14] {
    background-color: var(--header-color);
    padding: 2em;
}

The issue is that when Openlayers renders the HTML for the control, it does not attach this attribute so all the CSS rules you define in your component for the control won't be applied. To be sure you correctly target Openlayers HTML elements, you must add the keyword ng-deep which means that the rules will be applied anywhere in the nested elements of the component.

In mouse-position.component.ts, add the following CSS rules to change the rendering of the scale line:



::ng-deep .ol-scale-line {
      position: relative;
  }
::ng-deep .ol-scale-line, ::ng-deep .ol-scale-line-inner {
      background-color: transparent;
      border-color: var(--text-color);
      color: var(--text-color);
      font-size: inherit;
      bottom: auto;
  }

Final rendering

Include our last 2 components in the footer of our application and align them correctly. Both components take the map as inputs, and the scale line component takes also the coordinates templating format, which indicates we want to call the numberCoordinates method, display no digit, and apply the given template.



<footer>
  <app-scaleline [map]="map"></app-scaleline>
  <app-mouse-position [map]="map" positionTemplate="{x}, {y} m"></app-mouse-position>
</footer>

To have them correctly aligned in the footer, let's update the app.component.css



footer {
    display: flex;
    background-color: var(--header-color);
    padding: 1em;
    justify-content: space-between;
}

And here the final result with the controls in the footer and the custom styled scale bar.

Conclusion

Through this article, we saw how to set up Openlayers in an Angular application and we already cover simple but concrete usecases around web mapping needs. Next articles will help you to oversee deeper integration of the libraries and bring more interactivity to your maps (layers, features, styling, interactions...).

You can find the code of this article on https://github.com/fgravin/angular-openlayers-tutorial/tree/1-basics

The 3 best open source web mapping libraries

Florent Gravin — Thu, 03 Sep 2020 12:37:11 +0000

Maps are everywhere nowadays, most of the people are using for instance Google Maps on a daily basis to find a place or follow a route. You consult maps to see elector distribution, covid expansion, people migration, land use, disaster impact and for many other reasons.

You probably want to make your data a bit more explicit through maps, and you don't feel comfortable being captive in the Google Map API ecosystem: welcome to the open source world.

I’m going to introduce you to the 3 best open source alternatives, they are free to use and you’ll see it is not that hard to implement your own mapping application.

Note that the article reflects my own knowledge, experience and opinion about what each library covers and provides, I am objective but humble enough to admit I don't carry the universal truth.

As a good map worth more than a long speech, let’s discover them.

Leaflet

Created in 2010 by Vladimir Agafonkin, Leaflet has been the first library to take advantage of new HTML 5 features, like the Canvas rendering, offering modernity and great performance. It’s a lightweight library that focuses on displaying fast maps on the web.

It provides a simple API, everything is made so it is easy to embed geospatial information in a website: if you want to display a map with tiled background layers (OSM, satellite), plus some custom vector data (geojson) on top of it, you’ll find the experience great and straightforward by using Leaflet, and the result will clearly respond to your need.



var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

The drawback of this approach is that the library does not provide the full palette of geospatial features, if you want to build more advanced user interfaces, you will have to rely on plugins very quickly. Also, it is harder to interact with OGC standards, and to use custom projections. Leaflet is based on WebMercator projection and does not provide an easy way to change the projection.

The system is built upon plugins integration, then many community extensions have shown up to expand upon the base features of the library. You can find the list here, it usually makes your life easier to display specific kinds of data, premade styles for dataviz purposes, geometries edition etc..

The library is essentially mature and mainly lives through its plugin ecosystem. The core is still maintained though not by the original author. Leaflet has an extremely large user base and is still very popular, which is an impressive feat considering that its core hasn’t received significant changes in years.

To conclude, Leaflet is a great first approach to web mapping libraries. It does not require too much API or coding knowledge and it lets you build your map quite easily. It’s worthwhile to look into what plugins are available though and whether they are still maintained before diving into implementing complex map-based applications.

Mapbox GL

Mapbox company has brought a revolution in the open geospatial world, bringings standards and libraries that literally changed the way we play with maps on the web. Everything has been made to make the user experience the smoothest and the fastest possible, with a big focus on mobile usage. Vector tiles are the pillar of their constellation, everything is optimized to display vector data with astonishing and fluid rendering.

Mapbox GL JS is the javascript library that handles the rendering into a web browser. Implemented in WebGL, it is ultra performant and optimized for Vector Tiles format. It is by far the most performant library to render vector data. Mapbox GL Native and SDKs for mobile platforms are native libraries to achieve the same goal on mobile native applications. Recently the Mapbox Mobile Android SDK started to rely on a proprietary binary, making the future uncertain about this technology.

Usually, Mapbox GL works along Mapbox hosted vector tiles, so you need to provide a token to access your data, with custom commercial plans. You can use Mapbox GL with your own vector tiles though.

The best way to use the library is to point to a Mapbox Style file, that describes the context of your map (extent, dataset, styles…)



    mapboxgl.accessToken = '<your access token here>';
    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
    });

The library is also great to display raster formats but it is not where it shines the most. It provides a great and simple API to display different kinds of data (vector tiles, geojson, tile servers), edit geometries, navigate etc..

Mapbox-GL was the first open source library to allow "tilting" the map and give a partial 3D view, which gives an impressive user experience when navigating the map. It is not a full-fledged 3D map rendering library, and is for example not natively able to render terrain meshes or point clouds (though this can be achieved by other means).

All the rendering architecture is built upon the Web Mercator projection, unfortunately you can’t change that. There is no complete OGC standards support so you need to check what the library supports before jumping into it for your implementation.

Note that Mapbox GL JS is open source, but it is not community based, it is developed and maintained by a private company, with their own goals and strategies.

To conclude, Mapbox GL is an awesome library to display vector data in WebGL, in a fast and smooth way, when your needs are focused on visualization of potentially complex vector data. It may not be the best choice though if you want custom projection or complex rich featured web mapping application, and remember that it comes from a private company and that the way you are allowed to use it may not last forever.

OpenLayers

OpenLayers is one of the first web mapping libraries. Way before Mapbox GL and Leaflet, OpenLayers 2 have been used worldwide to display maps on the web. It was the best open source alternative to Google Maps API.

Version 3 has been completely reworked from scratch to embrace new browser possibilities, and lives with an active community since 2013, today is version 6.

The main purpose of OpenLayers is to provide a full featured mapping library, covering most of the needs of the geospatial world:

Many data source format support (utfgrid, WFS, WMS, GPX, KML, geojson, xyz, vector tiles and many more)
Large support of OGC for a better interoperability
Custom projection & on-the-fly raster reprojection
Extensive styling possibilities
Snapping, geometries edition
Multiworld
Graticule
Color compositing and raster operations

It also supports Mapbox Specification: Style and Vector tiles so you can use Vector Tiles as well. A huge work has been done to support those specifications and to optimize the rendering of vector tiles to the limit of what 2D Canvas can support, recently prototyping Offscreen Canvas multithreading.

The API is quite easy to use, but the first dive into OpenLayers might be slightly harder than with Leaflet and Mapbox GL, especially if you are not comfortable with coding in general. The learning curve is a bit harder but might be worth the try if you want to develop a complex web mapping application.



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

There are some extensions like ol-cesium that manage the bindings between Openlayers and CesiumJs, a great virtual globe library written in WebGL, to switch from 2D to 3D maps.

It is community based and very active, it receives contributions and interest from many users and developers. You can easily participate in the codebase and add to the library the missing features you expect.

Recently, a huge crowdfunding leveraged hundreds of thousands dollars to help the community progress and enhance the library.

Many companies are providing consulting to help you to go with OpenLayers, and you’ll quickly have an answer from the community if you face some issue using the library.

To conclude, OpenLayers is not the easiest library to jump in, take advantage of the many online examples and you’ll be right away able to display beautiful maps on your web site. It is the most complete library, it is very performant and it is fully open source and based on a community that will help you along the way.

Conclusion

Geospatial world on the net is clearly approachable. Run away from costly licences, locked in ecosystems and embrace open source solutions and philosophy. You’ll discover that you can create your own web mapping application with free and powerful libraries.

Depending on your needs and requirements, you’ll have to choose what solution is the best for your use case. Consulting companies like Camptocamp are expert to help you to identify your situation and propose the best solutions and technologies that suit your needs