index.js (4600B)
1 import L from 'leaflet'; 2 import './westraPasses.css'; 3 import '~/lib/leaflet.layer.geojson-ajax'; 4 import {WestraPassesMarkers} from './westraPassesMarkers'; 5 6 L.Layer.WestraPasses = L.Layer.extend({ 7 options: { 8 fileCoverage: 'westra_coverage.json', 9 fileLabels1: 'westra_regions_labels1.json', 10 fileLabels2: 'westra_regions_labels2.json', 11 scaleDependent: true, 12 labels2Zoom: 6, 13 markersZoom: 10, 14 labels1Zoom: 2 15 16 }, 17 18 initialize: function(baseUrl, options) { 19 L.setOptions(this, options); 20 this.markers = new WestraPassesMarkers(baseUrl, options.markersOptions); 21 this.coverage = new L.Layer.GeoJSONAjax(baseUrl + this.options.fileCoverage, { 22 className: 'westra-coverage-polygon', 23 onEachFeature: this._setEventsForRegion.bind(this) 24 }); 25 this.labels1 = new L.Layer.GeoJSONAjax(baseUrl + this.options.fileLabels1, { 26 pointToLayer: this._makeMarker, 27 onEachFeature: this._setEventsForRegion.bind(this) 28 }); 29 this.labels2 = new L.Layer.GeoJSONAjax(baseUrl + this.options.fileLabels2, { 30 pointToLayer: this._makeMarker, 31 onEachFeature: this._setEventsForRegion.bind(this) 32 }); 33 }, 34 35 _setEventsForRegion: function(feature, layer) { 36 layer.on('click', this._onRegionClick, this); 37 }, 38 39 _makeMarker: function(geojsonPoint, latlng) { 40 const icon = L.divIcon({ 41 className: 'westra-region-label', 42 html: '<span>' + geojsonPoint.properties.name + '</span>' 43 } 44 ); 45 const marker = L.marker(latlng, {icon: icon}); 46 return marker; 47 }, 48 49 _onRegionClick: function(e) { 50 const layer = e.target; 51 const latlng = layer.getLatLng ? layer.getLatLng() : e.latlng; 52 const zoom = this._map.getZoom(); 53 let newZoom; 54 if (zoom < this.options.labels2Zoom) { 55 newZoom = this.options.labels2Zoom; 56 } else { 57 newZoom = this.options.markersZoom; 58 } 59 this._map.setView(latlng, newZoom); 60 }, 61 62 setLayersVisibility: function(e) { 63 if (!this._map) { 64 return; 65 } 66 var newZoom; 67 var zoomFinished = e ? (e.type !== 'zoomanim') : true; 68 if (e && e.zoom !== undefined) { 69 newZoom = e.zoom; 70 } else { 71 newZoom = this._map.getZoom(); 72 } 73 if (newZoom < this.options.labels1Zoom) { 74 this._map.removeLayer(this.markers); 75 this._map.addLayer(this.coverage); 76 this._map.removeLayer(this.labels1); 77 this._map.removeLayer(this.labels2); 78 } else if (newZoom < this.options.labels2Zoom) { 79 this._map.removeLayer(this.markers); 80 this._map.addLayer(this.coverage); 81 this._map.addLayer(this.labels1); 82 this._map.removeLayer(this.labels2); 83 } else if (newZoom < this.options.markersZoom) { 84 this._map.removeLayer(this.markers); 85 this._map.addLayer(this.coverage); 86 this._map.removeLayer(this.labels1); 87 this._map.addLayer(this.labels2); 88 } else { 89 if (zoomFinished) { 90 this._map.addLayer(this.markers); 91 } 92 this._map.removeLayer(this.coverage); 93 this._map.removeLayer(this.labels1); 94 this._map.removeLayer(this.labels2); 95 } 96 }, 97 98 onAdd: function(map) { 99 this._map = map; 100 this.markers.loadData(); 101 this.coverage.loadData(); 102 this.labels1.loadData(); 103 this.labels2.loadData(); 104 this.setLayersVisibility(); 105 map.on('zoomend', this.setLayersVisibility, this); 106 map.on('zoomanim', this.setLayersVisibility, this); 107 }, 108 109 onRemove: function() { 110 this._map.removeLayer(this.markers); 111 this._map.removeLayer(this.coverage); 112 this._map.removeLayer(this.labels1); 113 this._map.removeLayer(this.labels2); 114 this._map.off('zoomend', this.setLayersVisibility, this); 115 this._map.off('zoomanim', this.setLayersVisibility, this); 116 this._map = null; 117 } 118 } 119 ); 120