From d480322506032a35d7f89d10da943c320df24820 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eduardo=20Amador=20Pato=CC=81n?= Date: Tue, 18 Apr 2017 17:19:37 +0200 Subject: [PATCH] #6 - Map feature click and popup - Attaching legend for each map - Map titles correction --- src/assets/maps/legend_map.svg | 38 ++++++++++++++++++++ src/css/shared/elements/info/styles.less | 1 - src/css/shared/steps/map/styles.less | 15 ++++++++ src/css/styles.css | 12 ++++++- src/data/stories.json | 45 +++++++++++++++++++----- src/shared/steps/map/MapStep.js | 32 +++++++++++++++++ src/shared/steps/map/MapStep.js.map | 2 +- src/shared/steps/map/MapStep.ts | 27 +++++++++++++- src/templates/shared/steps/map/view.html | 4 +++ 9 files changed, 163 insertions(+), 13 deletions(-) create mode 100644 src/assets/maps/legend_map.svg diff --git a/src/assets/maps/legend_map.svg b/src/assets/maps/legend_map.svg new file mode 100644 index 0000000..ab2b511 --- /dev/null +++ b/src/assets/maps/legend_map.svg @@ -0,0 +1,38 @@ + + + + infograph/legend_map + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/css/shared/elements/info/styles.less b/src/css/shared/elements/info/styles.less index 3bdf4a4..ffe19dc 100644 --- a/src/css/shared/elements/info/styles.less +++ b/src/css/shared/elements/info/styles.less @@ -137,7 +137,6 @@ info { .titleWrapper { display: flex; - align-items: center; margin-bottom: 8px; .btn { background-color: white; diff --git a/src/css/shared/steps/map/styles.less b/src/css/shared/steps/map/styles.less index 5854c97..e60d8ad 100644 --- a/src/css/shared/steps/map/styles.less +++ b/src/css/shared/steps/map/styles.less @@ -1,3 +1,5 @@ +@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css'); + map { .bg_blanco(); #map { @@ -6,6 +8,16 @@ map { width: 100%; height: 100%; } + + .mapboxgl-control-container { + display: none !important; + } + .mapboxgl-popup { + .mapboxgl-popup-content { + padding-top: 15px; + } + } + > .component-container{ position: relative; .step-locked { @@ -22,6 +34,9 @@ map { &:not(.top) { bottom: 32px; + &.legend { + bottom: 12px; + } } &.top { top: 16px; diff --git a/src/css/styles.css b/src/css/styles.css index 57282c0..3b2fbba 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -12,6 +12,7 @@ /* Let's default this puppy out -------------------------------------------------------------------------------*/ @import url('https://fonts.googleapis.com/css?family=Fira+Sans:200,300,400,400i,500,600,600i,700,800,900|Merriweather:300,400,400i,700,700i,900,900i'); +@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css'); html, body, body div, @@ -4648,7 +4649,7 @@ info > .component-container .allMapLayers .mapLayerWrapper:not(:last-child) { } info > .component-container .titleWrapper { display: flex; - align-items: center; + /*align-items: center;*/ margin-bottom: 8px; } info > .component-container .titleWrapper .btn { @@ -5606,6 +5607,12 @@ map #map { width: 100%; height: 100%; } +map .mapboxgl-control-container { + display: none !important; +} +map .mapboxgl-popup .mapboxgl-popup-content { + padding-top: 15px; +} map > .component-container { position: relative; } @@ -5623,6 +5630,9 @@ map > .component-container > div > .btn-row { map > .component-container > div > .btn-row:not(.top) { bottom: 32px; } +map > .component-container > div > .btn-row:not(.top).legend { + bottom: 12px; +} map > .component-container > div > .btn-row.top { top: 16px; } diff --git a/src/data/stories.json b/src/data/stories.json index d8b04ee..acda830 100644 --- a/src/data/stories.json +++ b/src/data/stories.json @@ -96,9 +96,12 @@ "collapsed": false, "info": [ { - "title": "Title here", + "title": "Species richness of butterflies in the Mediterranean region", + "credit": "", "collapsed" : false, "shp": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/All_species_count.zip", + "wms": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "legend": "/assets/maps/legend_map.svg", "elements": [ { "type": "paragraph", @@ -128,9 +131,12 @@ } }, { - "title": "Title here 2", + "title": "Distribution of threatened butterflies in the Mediterranean region", "collapsed" : true, + "credit": "", "shp": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Theatened_richness_count.zip", + "wms": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "legend": "/assets/maps/legend_map.svg", "elements": [ { "type": "paragraph", @@ -160,9 +166,12 @@ } }, { - "title": "Title here 3", + "title": "Species richness of endemic butterflies in the Mediterranean region", "collapsed" : true, + "credit": "", "shp": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "wms": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "legend": "/assets/maps/legend_map.svg", "elements": [ { "type": "paragraph", @@ -363,9 +372,12 @@ "collapsed": false, "info": [ { - "title": "Title here", + "title": "Species richness of butterflies in the Mediterranean region", + "credit": "", "collapsed" : false, "shp": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/All_species_count.zip", + "wms": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "legend": "/assets/maps/legend_map.svg", "elements": [ { "type": "paragraph", @@ -395,9 +407,12 @@ } }, { - "title": "Title here 2", + "title": "Distribution of threatened butterflies in the Mediterranean region", "collapsed" : true, + "credit": "", "shp": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Theatened_richness_count.zip", + "wms": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "legend": "/assets/maps/legend_map.svg", "elements": [ { "type": "paragraph", @@ -427,9 +442,12 @@ } }, { - "title": "Title here 3", + "title": "Species richness of endemic butterflies in the Mediterranean region", "collapsed" : true, + "credit": "", "shp": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "wms": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "legend": "/assets/maps/legend_map.svg", "elements": [ { "type": "paragraph", @@ -630,9 +648,12 @@ "collapsed": false, "info": [ { - "title": "Title here", + "title": "Species richness of butterflies in the Mediterranean region", + "credit": "", "collapsed" : false, "shp": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/All_species_count.zip", + "wms": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "legend": "/assets/maps/legend_map.svg", "elements": [ { "type": "paragraph", @@ -662,9 +683,12 @@ } }, { - "title": "Title here 2", + "title": "Distribution of threatened butterflies in the Mediterranean region", "collapsed" : true, + "credit": "", "shp": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Theatened_richness_count.zip", + "wms": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "legend": "/assets/maps/legend_map.svg", "elements": [ { "type": "paragraph", @@ -694,9 +718,12 @@ } }, { - "title": "Title here 3", + "title": "Species richness of endemic butterflies in the Mediterranean region", "collapsed" : true, + "credit": "", "shp": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "wms": "https://s3-eu-west-1.amazonaws.com/iucn-med-storymaps.geographica.io/static/shp/Endemic_richness_count_hex.zip", + "legend": "/assets/maps/legend_map.svg", "elements": [ { "type": "paragraph", diff --git a/src/shared/steps/map/MapStep.js b/src/shared/steps/map/MapStep.js index 8d1ca91..db4a6cd 100644 --- a/src/shared/steps/map/MapStep.js +++ b/src/shared/steps/map/MapStep.js @@ -32,6 +32,8 @@ var MapStepComponent = (function (_super) { this.activeLayer = false; this.zoom = 4.5; this.center = [15.0, 38.0]; + this.popup = false; + this.currentLegend = ''; } MapStepComponent.prototype.onResize = function (event) { _super.prototype.onResize.call(this, event); @@ -77,16 +79,24 @@ var MapStepComponent = (function (_super) { this.setActiveLayer(); }; MapStepComponent.prototype.setActiveLayer = function () { + var _this = this; for (var layer in this.step.info) { if (this.step.info[layer].collapsed === false) { this.activeLayer = this.step.info[layer]; break; } } + this.mapService.map.on('load', function () { + _this.updateLayers(_this.activeLayer); + }); }; MapStepComponent.prototype.toggleActiveLayer = function () { + var _this = this; if (!this.activeLayer.layer.subLayers.length || !this.mapService.map) return; + var activePopup = {}; + if (this.popup) + this.popup.remove(); for (var _i = 0, _a = this.activeLayer.layer.subLayers; _i < _a.length; _i++) { var sublayer = _a[_i]; var visibility = this.mapService.map.getLayoutProperty(sublayer, 'visibility'); @@ -97,6 +107,19 @@ var MapStepComponent = (function (_super) { this.mapService.map.setLayoutProperty(sublayer, 'visibility', 'visible'); } } + this.mapService.map.on('click', function (e) { + var features = _this.mapService.map.queryRenderedFeatures(e.point, { layers: _this.activeLayer.layer.subLayers }); + if (!features.length) + return; + var properties = {}; + properties = features[0].properties; + if (_this.popup) + _this.popup.remove(); + _this.popup = new mapbox_gl_1.Popup() + .setLngLat(e.lngLat) + .setHTML(properties.count) + .addTo(_this.mapService.map); + }); }; MapStepComponent.prototype.updateLayers = function (info) { if (info === void 0) { info = {}; } @@ -104,6 +127,7 @@ var MapStepComponent = (function (_super) { this.toggleActiveLayer(); } this.activeLayer = info; + this.currentLegend = this.activeLayer.legend; this.toggleActiveLayer(); }; MapStepComponent.prototype.zoomIn = function () { @@ -147,6 +171,14 @@ var MapStepComponent = (function (_super) { core_1.Input(), __metadata('design:type', Object) ], MapStepComponent.prototype, "center", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', Object) + ], MapStepComponent.prototype, "popup", void 0); + __decorate([ + core_1.Input(), + __metadata('design:type', String) + ], MapStepComponent.prototype, "currentLegend", void 0); MapStepComponent = __decorate([ core_1.Component({ selector: 'map', diff --git a/src/shared/steps/map/MapStep.js.map b/src/shared/steps/map/MapStep.js.map index bf1fada..c33cf42 100644 --- a/src/shared/steps/map/MapStep.js.map +++ b/src/shared/steps/map/MapStep.js.map @@ -1 +1 @@ -{"version":3,"file":"MapStep.js","sourceRoot":"","sources":["MapStep.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"MapStep.js","sourceRoot":"","sources":["MapStep.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/src/shared/steps/map/MapStep.ts b/src/shared/steps/map/MapStep.ts index 263439e..172b807 100644 --- a/src/shared/steps/map/MapStep.ts +++ b/src/shared/steps/map/MapStep.ts @@ -1,6 +1,6 @@ import {Component, Inject, Renderer, ElementRef, AfterViewInit, HostBinding, Input} from "@angular/core"; import {BaseStepComponent} from "../base/BaseStep"; -import {Map} from 'mapbox-gl'; +import {Map, Popup} from 'mapbox-gl'; import {MapService} from "../../../services/MapService"; import {DOCUMENT} from "@angular/platform-browser"; import {WindowService} from "../../../services/WindowService"; @@ -13,6 +13,8 @@ export class MapStepComponent extends BaseStepComponent { @Input() activeLayer: any = false; @Input() zoom: any = 4.5; @Input() center: any = [15.0, 38.0]; + @Input() popup: any = false; + @Input() currentLegend: string = ''; constructor(@Inject(ElementRef) elem: ElementRef, @Inject(DOCUMENT) protected document: any, @@ -77,11 +79,18 @@ export class MapStepComponent extends BaseStepComponent { break; } } + this.mapService.map.on('load', () => { + this.updateLayers(this.activeLayer); + }); } toggleActiveLayer() { if (!this.activeLayer.layer.subLayers.length || !this.mapService.map) return; + let activePopup: any = {}; + + if (this.popup) this.popup.remove(); + for (let sublayer of this.activeLayer.layer.subLayers) { let visibility = this.mapService.map.getLayoutProperty(sublayer, 'visibility'); if (visibility === 'visible') { @@ -90,6 +99,20 @@ export class MapStepComponent extends BaseStepComponent { this.mapService.map.setLayoutProperty(sublayer, 'visibility', 'visible'); } } + + this.mapService.map.on('click', (e: any) => { + let features = this.mapService.map.queryRenderedFeatures(e.point, {layers: this.activeLayer.layer.subLayers }); + if (!features.length) return; + + let properties = {}; + properties = features[0].properties; + + if (this.popup) this.popup.remove(); + this.popup = new Popup() + .setLngLat(e.lngLat) + .setHTML(properties.count) + .addTo(this.mapService.map); + }); } updateLayers(info: any = {}) { @@ -97,6 +120,8 @@ export class MapStepComponent extends BaseStepComponent { this.toggleActiveLayer(); } this.activeLayer = info; + this.currentLegend = this.activeLayer.legend; + this.toggleActiveLayer(); } diff --git a/src/templates/shared/steps/map/view.html b/src/templates/shared/steps/map/view.html index fd1ff31..e72caf4 100644 --- a/src/templates/shared/steps/map/view.html +++ b/src/templates/shared/steps/map/view.html @@ -21,5 +21,9 @@
+ +
+ +
\ No newline at end of file