diff --git a/webapp/.angular-cli.json b/webapp/.angular-cli.json
index 572b319d6d5b7636c236c9e63c0ba2d73592c1eb..0ce40adce37c49d3c448244d9d0834b7bf76e56d 100644
--- a/webapp/.angular-cli.json
+++ b/webapp/.angular-cli.json
@@ -20,9 +20,13 @@
       "prefix": "app",
       "styles": [
         "styles.scss",
-        "../node_modules/leaflet/dist/leaflet.css"
+        "../node_modules/leaflet/dist/leaflet.css",
+        "../node_modules/leaflet.markercluster/dist/MarkerCluster.css",
+        "../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
+      ],
+      "scripts": [
+        "../node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"
       ],
-      "scripts": [],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 30c09f31e875a3138f32fdf827a48d47f2c25f18..4b1a8049d5978598aaea105a244a61727181f5c2 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -311,6 +311,14 @@
         "@types/geojson": "7946.0.3"
       }
     },
+    "@types/leaflet.markercluster": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.0.3.tgz",
+      "integrity": "sha512-rz4xQcsD3Ha9TcX4nMba9wpNe7HPQ03Hvo8Osi3SLpfaDCydHMoTquOG1IsjQ2aFm/LIHz4Uo4hYoeLv7q082w==",
+      "requires": {
+        "@types/leaflet": "1.2.7"
+      }
+    },
     "@types/node": {
       "version": "6.0.102",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.102.tgz",
@@ -6365,6 +6373,11 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz",
       "integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ=="
     },
+    "leaflet.markercluster": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.3.0.tgz",
+      "integrity": "sha512-bHBaI8kTaLrZxI/ZP7pnNaS8WCKKz98BU1//B5OH9b/kTk6IriduvDtMFGlGBYYr/ymuXCB9lO7HsGBr5dSw5w=="
+    },
     "less": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/less/-/less-2.7.3.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 04895f12e525b32c38486eb96546a1ca6bbca8e1..742daeb757c28bee73db309e4e2ea12b73e1cc0d 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -31,10 +31,12 @@
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "@types/leaflet": "^1.2.7",
+    "@types/leaflet.markercluster": "^1.0.3",
     "bulma": "^0.7.1",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "leaflet": "^1.3.1",
+    "leaflet.markercluster": "^1.3.0",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts
index e31e8fb608d912165cc2e1f672757a84d48675da..da6cfc0bb8d22a20283d79b3922a2db7927ad91f 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import * as L from 'leaflet';
+import 'leaflet.markercluster';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { DatasetService } from '../../../services';
 import { Metadata, Data } from '../../../models';
@@ -29,24 +30,41 @@ export class DatasetMapComponent implements OnInit {
   }
   constructMap(results: Data[]) {
     // Déclaration de la carte avec les coordonnées du centre et le niveau de zoom.
-    const dataGrandLyonMap = L.map('frugalmap', { minZoom: 9, maxZoom: 18 }).setView([45.75, 4.85], 12);
+    const attribution = 'Data Grand Lyon';
+    const satellite = L.tileLayer('https://openstreetmap.data.grandlyon.com/3857/tms/1.0.0/ortho2015@GoogleMapsCompatible/{z}/{x}/{-y}.png', { id: 'MapID', attribution: attribution });
+    const grayscale = L.tileLayer('https://openstreetmap.data.grandlyon.com/3857/tms/1.0.0/osm_grandlyon_nb@GoogleMapsCompatible/{z}/{x}/{-y}.png', { id: 'MapID', attribution: attribution });
+    const plan = L.tileLayer('https://openstreetmap.data.grandlyon.com/3857/tms/1.0.0/osm_grandlyon@GoogleMapsCompatible/{z}/{x}/{-y}.png', { id: 'MapID', attribution: attribution });
 
-    L.tileLayer('https://openstreetmap.data.grandlyon.com/3857/tms/1.0.0/osm_grandlyon@GoogleMapsCompatible/{z}/{x}/{-y}.png', {
-      attribution: 'Data Grand Lyon Map'
-    }).addTo(dataGrandLyonMap);
+    const dataGrandLyonMap = L.map('frugalmap', { minZoom: 9, maxZoom: 18, layers: [plan] })
+      .setView([45.75, 4.85], 12);
 
+
+    const baseMaps = {
+      'Plan': plan,
+      'Niveau de gris': grayscale,
+      'Satellite': satellite
+
+    };
+    L.control.layers(baseMaps).addTo(dataGrandLyonMap);
     // Set icon marker
     const myIcon = L.icon({
       iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png'
     });
 
 
+    const group = [];
+    const cluster = L.markerClusterGroup({
+      maxClusterRadius: 120
+    });
     results.forEach(element => {
       console.log(element);
+
       switch (element.geometry.type) {
         case 'Point':
-          L.marker([element.geometry.coordinates[1], element.geometry.coordinates[0]], { icon: myIcon })
+          const marker = L.marker([element.geometry.coordinates[1], element.geometry.coordinates[0]], { icon: myIcon })
             .bindPopup(element.properties.nom).addTo(dataGrandLyonMap);
+          // group.push(marker);
+          cluster.addLayer(marker);
           break;
         case 'Polygon':
           // create a red polygon from an array of LatLng points
@@ -54,13 +72,17 @@ export class DatasetMapComponent implements OnInit {
             coordinates.forEach(coord => {
               coord.reverse();
             });
-            L.polygon(coordinates, { color: 'red' }).addTo(dataGrandLyonMap);
+            const polygon = L.polygon(coordinates, { color: 'red' }).addTo(dataGrandLyonMap);
+            group.push(polygon);
           });
 
           break;
       }
     });
-
+    dataGrandLyonMap.addLayer(cluster);
+    const featureGroup = L.featureGroup(group);
+    // zoom the map to the polygon
+    dataGrandLyonMap.fitBounds(featureGroup.getBounds());
     L.control.scale().addTo(dataGrandLyonMap);
   }
 }
diff --git a/webapp/src/tsconfig.app.json b/webapp/src/tsconfig.app.json
index 1ca08cd034b14182be0bdaf3f1d4dced251a5b84..727fe0a32aa4081835fdf815b57fa8532208065a 100644
--- a/webapp/src/tsconfig.app.json
+++ b/webapp/src/tsconfig.app.json
@@ -5,7 +5,8 @@
     "baseUrl": "./",
     "module": "es2015",
     "types": [
-      "leaflet"
+      "leaflet",
+      "leaflet.markercluster"
     ]
   },
   "exclude": [