diff --git a/package-lock.json b/package-lock.json
index 48e341a0954d5f8c2accf3a6731be28e5bb9c0de..6c56f8e826d5f64c715a8933459b5526913c4f5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,3 +1,24 @@
 {
-  "lockfileVersion": 1
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@types/geojson": {
+      "version": "7946.0.3",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.3.tgz",
+      "integrity": "sha512-BYHiG1vQJ7T93uswzuXZ0OBPWqj5tsAPtaMDQADV8sn2InllXarwg9llr6uaW22q1QCwBZ81gVajOpYWzjesug=="
+    },
+    "@types/leaflet": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.2.7.tgz",
+      "integrity": "sha512-y9KEOzVB1uIPVPOc8FBqQjBvFykb/WhNfHDN6eTL8FlUy6F7FaqGMWHj5OhDSBHMWoqc70eR3FGiXdzbg1rqtg==",
+      "requires": {
+        "@types/geojson": "7946.0.3"
+      }
+    },
+    "leaflet": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz",
+      "integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ=="
+    }
+  }
 }
diff --git a/webapp/.angular-cli.json b/webapp/.angular-cli.json
index 862071be9ffc02a136894ecaed8fe4050f4c44fe..572b319d6d5b7636c236c9e63c0ba2d73592c1eb 100644
--- a/webapp/.angular-cli.json
+++ b/webapp/.angular-cli.json
@@ -19,7 +19,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.scss"
+        "styles.scss",
+        "../node_modules/leaflet/dist/leaflet.css"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 676242a6aa2928556a7a34029fa3e23f7d4caf3f..30c09f31e875a3138f32fdf827a48d47f2c25f18 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -283,6 +283,11 @@
         "semver-intersect": "1.3.1"
       }
     },
+    "@types/geojson": {
+      "version": "7946.0.3",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.3.tgz",
+      "integrity": "sha512-BYHiG1vQJ7T93uswzuXZ0OBPWqj5tsAPtaMDQADV8sn2InllXarwg9llr6uaW22q1QCwBZ81gVajOpYWzjesug=="
+    },
     "@types/jasmine": {
       "version": "2.8.6",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.6.tgz",
@@ -298,6 +303,14 @@
         "@types/jasmine": "2.8.6"
       }
     },
+    "@types/leaflet": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.2.7.tgz",
+      "integrity": "sha512-y9KEOzVB1uIPVPOc8FBqQjBvFykb/WhNfHDN6eTL8FlUy6F7FaqGMWHj5OhDSBHMWoqc70eR3FGiXdzbg1rqtg==",
+      "requires": {
+        "@types/geojson": "7946.0.3"
+      }
+    },
     "@types/node": {
       "version": "6.0.102",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.102.tgz",
@@ -6347,6 +6360,11 @@
         "invert-kv": "1.0.0"
       }
     },
+    "leaflet": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz",
+      "integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ=="
+    },
     "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 f0c416854b688153c9478a291bfd4a162b27904c..04895f12e525b32c38486eb96546a1ca6bbca8e1 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -30,9 +30,11 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "@types/leaflet": "^1.2.7",
     "bulma": "^0.7.1",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
+    "leaflet": "^1.3.1",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html
index 2db5ee2873c058ea7c7e2e0e45e3d35ec6ec4b76..c0c8e3ce8a67d4102c6b283834978d6bbbaf9117 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html
@@ -1,3 +1,3 @@
-<p>
-  dataset-map works!
-</p>
+<div id="frugalmap">
+ 
+</div>
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..64d0b1d73c271bb580677f90e0e749709a236065 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss
@@ -0,0 +1,4 @@
+#frugalmap {
+  height: 600px;
+  width: 80%
+}
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 d3947c74d48449128d7d5f06a4868198eb7cbe64..e31e8fb608d912165cc2e1f672757a84d48675da 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,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import * as L from 'leaflet';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { DatasetService } from '../../../services';
+import { Metadata, Data } from '../../../models';
 
 @Component({
   selector: 'app-dataset-map',
@@ -6,10 +10,57 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./dataset-map.component.scss']
 })
 export class DatasetMapComponent implements OnInit {
+  metadata: Metadata;
 
-  constructor() { }
+  constructor(
+    private _route: ActivatedRoute,
+    private _datasetService: DatasetService,
+  ) { }
 
   ngOnInit() {
+    this._route.parent.paramMap
+      .switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id')))
+      .subscribe((metadata: Metadata) => {
+        this._datasetService.getDataByMetadataById(metadata.dataset_index).subscribe(results => {
+          this.constructMap(results);
+        });
+
+      });
   }
+  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);
+
+    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);
+
+    // Set icon marker
+    const myIcon = L.icon({
+      iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png'
+    });
+
 
+    results.forEach(element => {
+      console.log(element);
+      switch (element.geometry.type) {
+        case 'Point':
+          L.marker([element.geometry.coordinates[1], element.geometry.coordinates[0]], { icon: myIcon })
+            .bindPopup(element.properties.nom).addTo(dataGrandLyonMap);
+          break;
+        case 'Polygon':
+          // create a red polygon from an array of LatLng points
+          element.geometry.coordinates.forEach(coordinates => {
+            coordinates.forEach(coord => {
+              coord.reverse();
+            });
+            L.polygon(coordinates, { color: 'red' }).addTo(dataGrandLyonMap);
+          });
+
+          break;
+      }
+    });
+
+    L.control.scale().addTo(dataGrandLyonMap);
+  }
 }
diff --git a/webapp/src/app/geosource/models/data.model.ts b/webapp/src/app/geosource/models/data.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50824a190234028648f9617e7cae796d420cfa5b
--- /dev/null
+++ b/webapp/src/app/geosource/models/data.model.ts
@@ -0,0 +1,33 @@
+export interface IData {
+  geometry: IDataGeometry;
+  href: string;
+  properties: IDataProperties;
+}
+
+interface IDataGeometry {
+  coordinates: any[];
+  type: string;
+}
+
+interface IDataProperties {
+  capacite: string;
+  gid: string;
+  horaires: string;
+  id: string;
+  last_update: string;
+  last_update_fme: string;
+  nom: string;
+  p_surv: string;
+  place_handi: string;
+}
+
+export class Data implements IData {
+  geometry: IDataGeometry;
+  href: string;
+  properties: IDataProperties;
+  constructor(data: IData) {
+    Object.assign(this, data);
+  }
+}
+
+
diff --git a/webapp/src/app/geosource/models/index.ts b/webapp/src/app/geosource/models/index.ts
index aae31257e39a6f9d94ed2d3a39759161dd9ec0b8..dc6769435620ac50bfaccbeae0a6729bf58a5620 100644
--- a/webapp/src/app/geosource/models/index.ts
+++ b/webapp/src/app/geosource/models/index.ts
@@ -8,3 +8,4 @@ export { IFilter } from './filter.model';
 export { IHighlights, Highlights } from './highlights.model';
 export { SearchCompletion } from './search-completion.model';
 export { SearchSuggestion } from './suggestion.model';
+export { Data } from './data.model';
diff --git a/webapp/src/app/geosource/models/metadata.model.ts b/webapp/src/app/geosource/models/metadata.model.ts
index ce575790b5ef9a223c71538f830b005b0630a684..836459bd8889bce6f815086d59296e4fc507f0cd 100644
--- a/webapp/src/app/geosource/models/metadata.model.ts
+++ b/webapp/src/app/geosource/models/metadata.model.ts
@@ -1,5 +1,6 @@
 export interface IMetadata {
   'dataset_id'?: string;
+  'dataset_index'?: string;
   'title': string;
   'abstract': string;
   'keyword': string[];
@@ -42,6 +43,7 @@ export interface IMetadataResolution {
 
 export class Metadata implements IMetadata {
   'dataset_id'?: string;
+  'dataset_index'?: string;
   'title': string;
   'abstract': string;
   'keyword': string[];
diff --git a/webapp/src/app/geosource/services/dataset.service.ts b/webapp/src/app/geosource/services/dataset.service.ts
index e62e4dbaa6c076a838ab034dd10bb65c62f43abf..507e751a944a2108f650489c99ae15537f65faf0 100644
--- a/webapp/src/app/geosource/services/dataset.service.ts
+++ b/webapp/src/app/geosource/services/dataset.service.ts
@@ -9,7 +9,8 @@ import { Subject } from 'rxjs/Subject';
 
 import {
   IElasticsearchOptions, IElasticsearchResponse, IMetadata,
-  Metadata, IDataset, ISortOption, IFilter, ElasticsearchOptions, IElasticsearchHit, Dataset, Highlights
+  Metadata, IDataset, ISortOption, IFilter, ElasticsearchOptions, IElasticsearchHit, Dataset, Highlights,
+  Data
 } from '../models';
 import { ElasticsearchService } from './elasticsearch.service';
 
@@ -48,7 +49,7 @@ export class DatasetService {
             aggregations[filter.field].buckets.forEach(element => {
               element.count_per_metadata = element.count_per_metadata.value;
             });
-            filter.aggregations =  aggregations[filter.field].buckets;
+            filter.aggregations = aggregations[filter.field].buckets;
           }
         });
         // NOtify that data have been reloaded
@@ -125,9 +126,7 @@ export class DatasetService {
       if (e.hits.hits.length > 0) {
         const metadata = new Metadata(e.hits.hits[0]._source['metadata-fr']);
         const coordinates = e.hits.hits[0]._source['metadata-fr']['bbox']['coordinates'][0];
-        const test = coordinates.map(point => {
-          return point[0];
-        });
+        metadata.dataset_index = e.hits.hits[0]._index;
         metadata.max_west = Math.max.apply(Math, coordinates.map(point => {
           return point[0];
         }));
@@ -148,6 +147,16 @@ export class DatasetService {
     });
   }
 
+  getDataByMetadataById(id: number | string): Observable<Data[]> {
+    return this._elasticsearchService.getAllDataByMetadataId(id).map(e => {
+      const dataList = [];
+      e.hits.hits.forEach(element => {
+        dataList.push(new Data(element._source['data-fr']));
+      });
+      return dataList;
+    });
+  }
+
   /* SEARCH */
   addFilter(field, value): any {
     this._elasticsearchOptions.filters.forEach((element) => {
@@ -209,7 +218,7 @@ export class DatasetService {
   sortChanged(value: string) {
     this._elasticsearchOptions.sortOptions.value = value;
     // If sorting by date the order by default is from the most recent to the oldest (desc)
-    if ( value === 'date') {
+    if (value === 'date') {
       this._elasticsearchOptions.sortOptions.order = 'desc';
     }
     this._searchChangeSubject.next();
diff --git a/webapp/src/app/geosource/services/elasticsearch.service.ts b/webapp/src/app/geosource/services/elasticsearch.service.ts
index 862804d38a748516eebda223dc15116d7a4937b7..36acfbc50f0d42dfbfb6557706a848a698749c99 100644
--- a/webapp/src/app/geosource/services/elasticsearch.service.ts
+++ b/webapp/src/app/geosource/services/elasticsearch.service.ts
@@ -7,6 +7,7 @@ import { Observable } from 'rxjs/Observable';
 
 @Injectable()
 export class ElasticsearchService {
+
   private url: string;
 
   constructor(
@@ -34,6 +35,19 @@ export class ElasticsearchService {
     });
   }
 
+
+  getAllDataByMetadataId(index: number | string) {
+    return this._http.request<IElasticsearchResponse>('POST', this.url, {
+      body: {
+        'query': {
+          'term': {
+            '_index': index
+          }
+        }
+      }
+    });
+  }
+
   /*
   * This request will get the completion suggests of elasticsearch from one query text
   * We limit the size of options to 3.
diff --git a/webapp/src/environments/environment.ts b/webapp/src/environments/environment.ts
index 5fdd0d5eb7b5def3792aa7fb7cbe6b93bb851d91..45d82e1098bbd9e4a368d416ba00b326a28454d3 100644
--- a/webapp/src/environments/environment.ts
+++ b/webapp/src/environments/environment.ts
@@ -7,7 +7,7 @@ export const environment = {
   production: false,
 
   elasticsearchUrl: {
-    full: 'http://localhost:8081/elasticsearch/*.full.v3',
+    full: 'http://localhost:8081/elasticsearch/*.full',
     meta: 'http://localhost:8081/elasticsearch/*.meta'
   },
 
diff --git a/webapp/src/tsconfig.app.json b/webapp/src/tsconfig.app.json
index 39ba8dbacbbe051fdd02481b07af43219296a075..1ca08cd034b14182be0bdaf3f1d4dced251a5b84 100644
--- a/webapp/src/tsconfig.app.json
+++ b/webapp/src/tsconfig.app.json
@@ -4,7 +4,9 @@
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
     "module": "es2015",
-    "types": []
+    "types": [
+      "leaflet"
+    ]
   },
   "exclude": [
     "test.ts",