commit 2aeb4e0ad96dea96e8358de17a1c695094144bf5
parent a2e9d62ba69122d6d2a0ded77ff5f5bf2c2d2f34
Author: Sergey Orlov <wladimirych@gmail.com>
Date: Sat, 22 Dec 2018 21:39:10 +0100
westra passes: separate coverage and labels files, change coverage style #45
Diffstat:
2 files changed, 69 insertions(+), 45 deletions(-)
diff --git a/src/lib/leaflet.layer.westraPasses/index.js b/src/lib/leaflet.layer.westraPasses/index.js
@@ -5,41 +5,58 @@ import {WestraPassesMarkers} from './westraPassesMarkers';
L.Layer.WestraPasses = L.Layer.extend({
options: {
- fileRegions1: 'westra_regions_geo1.json',
- fileRegions2: 'westra_regions_geo2.json',
- scaleDependent: true
+ fileCoverage: 'westra_coverage.json',
+ fileLabels1: 'westra_regions_labels1.json',
+ fileLabels2: 'westra_regions_labels2.json',
+ scaleDependent: true,
+ labels2Zoom: 6,
+ markersZoom: 10,
+ labels1Zoom: 2
+
},
initialize: function(baseUrl, options) {
L.setOptions(this, options);
this.markers = new WestraPassesMarkers(baseUrl, options.markersOptions);
- this.regions1 = new L.Layer.GeoJSONAjax(baseUrl + this.options.fileRegions1, {
- className: 'westra-region-polygon',
- onEachFeature: this._setRegionLabel.bind(this, 'regions1')
- }
- );
- this.regions2 = new L.Layer.GeoJSONAjax(baseUrl + this.options.fileRegions2, {
- className: 'westra-region-polygon',
- onEachFeature: this._setRegionLabel.bind(this, 'regions2')
- }
- );
+ this.coverage = new L.Layer.GeoJSONAjax(baseUrl + this.options.fileCoverage, {
+ className: 'westra-coverage-polygon',
+ onEachFeature: this._setEventsForRegion.bind(this)
+ });
+ this.labels1 = new L.Layer.GeoJSONAjax(baseUrl + this.options.fileLabels1, {
+ pointToLayer: this._makeMarker,
+ onEachFeature: this._setEventsForRegion.bind(this)
+ });
+ this.labels2 = new L.Layer.GeoJSONAjax(baseUrl + this.options.fileLabels2, {
+ pointToLayer: this._makeMarker,
+ onEachFeature: this._setEventsForRegion.bind(this)
+ });
+ },
+
+ _setEventsForRegion: function(feature, layer) {
+ layer.on('click', this._onRegionClick, this);
},
- _setRegionLabel: function(layerName, feature, layer) {
- var latlon = layer.getBounds().getCenter();
- var icon = L.divIcon({
+ _makeMarker: function(geojsonPoint, latlng) {
+ const icon = L.divIcon({
className: 'westra-region-label',
- html: '<span>' + feature.properties.name + '</span>'
+ html: '<span>' + geojsonPoint.properties.name + '</span>'
}
);
- var labelMarker = L.marker(latlon, {icon: icon});
- this[layerName].addLayer(labelMarker);
- function zoomToRegion() {
- this._map.fitBounds(layer.getBounds());
- }
+ const marker = L.marker(latlng, {icon: icon});
+ return marker;
+ },
- layer.on('click', zoomToRegion, this);
- labelMarker.on('click', zoomToRegion, this);
+ _onRegionClick: function(e) {
+ const layer = e.target;
+ const latlng = layer.getLatLng ? layer.getLatLng() : e.latlng;
+ const zoom = this._map.getZoom();
+ let newZoom;
+ if (zoom < this.options.labels2Zoom) {
+ newZoom = this.options.labels2Zoom;
+ } else {
+ newZoom = this.options.markersZoom;
+ }
+ this._map.setView(latlng, newZoom);
},
setLayersVisibility: function(e) {
@@ -53,33 +70,37 @@ L.Layer.WestraPasses = L.Layer.extend({
} else {
newZoom = this._map.getZoom();
}
- if (newZoom < 2) {
+ if (newZoom < this.options.labels1Zoom) {
this._map.removeLayer(this.markers);
- this._map.removeLayer(this.regions1);
- this._map.removeLayer(this.regions2);
- } else if (newZoom < 7) {
+ this._map.addLayer(this.coverage);
+ this._map.removeLayer(this.labels1);
+ this._map.removeLayer(this.labels2);
+ } else if (newZoom < this.options.labels2Zoom) {
this._map.removeLayer(this.markers);
- this._map.addLayer(this.regions1);
- this._map.removeLayer(this.regions2);
- }
- else if (newZoom < 10) {
- this._map.removeLayer(this.regions1);
- this._map.addLayer(this.regions2);
+ this._map.addLayer(this.coverage);
+ this._map.addLayer(this.labels1);
+ this._map.removeLayer(this.labels2);
+ } else if (newZoom < this.options.markersZoom) {
this._map.removeLayer(this.markers);
+ this._map.addLayer(this.coverage);
+ this._map.removeLayer(this.labels1);
+ this._map.addLayer(this.labels2);
} else {
if (zoomFinished) {
this._map.addLayer(this.markers);
}
- this._map.removeLayer(this.regions1);
- this._map.removeLayer(this.regions2);
+ this._map.removeLayer(this.coverage);
+ this._map.removeLayer(this.labels1);
+ this._map.removeLayer(this.labels2);
}
},
onAdd: function(map) {
this._map = map;
this.markers.loadData();
- this.regions1.loadData();
- this.regions2.loadData();
+ this.coverage.loadData();
+ this.labels1.loadData();
+ this.labels2.loadData();
this.setLayersVisibility();
map.on('zoomend', this.setLayersVisibility, this);
map.on('zoomanim', this.setLayersVisibility, this);
@@ -87,8 +108,9 @@ L.Layer.WestraPasses = L.Layer.extend({
onRemove: function() {
this._map.removeLayer(this.markers);
- this._map.removeLayer(this.regions1);
- this._map.removeLayer(this.regions2);
+ this._map.removeLayer(this.coverage);
+ this._map.removeLayer(this.labels1);
+ this._map.removeLayer(this.labels2);
this._map.off('zoomend', this.setLayersVisibility, this);
this._map.off('zoomanim', this.setLayersVisibility, this);
this._map = null;
diff --git a/src/lib/leaflet.layer.westraPasses/westraPasses.css b/src/lib/leaflet.layer.westraPasses/westraPasses.css
@@ -88,12 +88,14 @@
}
-.westra-region-polygon {
- stroke-width: 2;
- opacity: 0.5;
- fill-opacity: 0.7;
+.westra-coverage-polygon {
+ stroke-width: 10;
+ stroke-opacity: 1;
+ fill-opacity: 1;
stroke: #c55;
- fill: #c55
+ fill: #c55;
+ opacity: 0.6;
+
}
.pass-details {
