Angular Michelin maps

The package is a library to build maps in Angular applications using leaflet.

Usage

Internal with Artifactory : @michelin/maps External with NPM : @michelin/maps

1. Install Michelin Theme

Make sure Michelin theme is correctly installed.

2. Install Michelin Maps

• Install leaflet :
  • npm i leaflet
  • npm i --save-dev @types/leaflet
• Install leaflet.markercluster :
  • npm i leaflet.markercluster
  • npm i --save-dev @types/leaflet.markercluster
• Install leaflet-routing-machine (before version 5.3.0):
  • npm i leaflet-routing-machine
  • npm i --save-dev @types/leaflet-routing-machine
• Install Michelin maps npm i @michelin/maps
• Add leaflet CSS in Angular architect file :
  • node_modules/leaflet/dist/leaflet.css
  • node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css
  • node_modules/leaflet.markercluster/dist/MarkerCluster.css
  • node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.css (before version 5.3.0)

3. Include Michelin Maps modules

Michelin modules can be imported in the shared module

For example :

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { MapModule } from '@michelin/maps';

@NgModule({
  imports: [
    CommonModule,
    MapModule
  ],
  providers: [],
  declarations: []
})
export class SharedModule {}

4. Proxy tile map request to insure key security

In your NGINX configuration:

location ~ ^/maps/(?<tilesetId>[^/]+)/(?<z>[0-9]+)/(?<x>[0-9]+)/(?<y>[0-9]+)\.png$ {
    resolver 8.8.8.8 8.8.4.4 valid=300s;
    resolver_timeout 5s;
    
    set $subscription_key YOUR_AZURE_MAPS_KEY;

    proxy_pass https://atlas.microsoft.com/map/tile?api-version=2.0&tilesetId=$tilesetId&zoom=$z&x=$x&y=$y&subscription-key=$subscription_key;

    proxy_set_header Host atlas.microsoft.com;
    proxy_ssl_server_name on;

    proxy_buffering on;
    proxy_cache_valid 200 1h;
}

5. Kubernetes ingress configuration

If you are using Kubernetes and not proxy map tile requests, add following configuration to your ingress :

more_set_headers "Content-Security-Policy: script-src 'self' 'unsafe-eval' 'unsafe-inline' $YOUR_TILE_URL";