From c46eb8159bd6c5b7d697877c2a96de186ba22e03 Mon Sep 17 00:00:00 2001
From: ncastejon <castejon.nicolas@gmail.com>
Date: Tue, 5 Jun 2018 09:46:41 +0200
Subject: [PATCH] Add multi base layers for the map: plan, satellite, grayscale
---
webapp/.angular-cli.json | 8 +++--
webapp/package-lock.json | 13 +++++++
webapp/package.json | 2 ++
.../dataset-map/dataset-map.component.ts | 36 +++++++++++++++----
webapp/src/tsconfig.app.json | 3 +-
5 files changed, 52 insertions(+), 10 deletions(-)
diff --git a/webapp/.angular-cli.json b/webapp/.angular-cli.json
index 572b319d..0ce40adc 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 30c09f31..4b1a8049 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 04895f12..742daeb7 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 e31e8fb6..da6cfc0b 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 1ca08cd0..727fe0a3 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": [
--
GitLab