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 leaflet-bing-layer (after version 5.3.0):

  • npm i leaflet-bing-layer

• 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. Kubernetes ingress configuration

If you are using Kubernetes, add following configuration to your ingress :

more_set_headers "Content-Security-Policy: script-src 'self' 'unsafe-eval' 'unsafe-inline' https://dev.virtualearth.net";