# 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 :

```typescript
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";

```