nakarte

Source code of https://map.sikmir.ru (fork)
git clone git://git.sikmir.ru/nakarte
Log | Files | Refs | LICENSE

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