nakarte

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

commit 0da3805c737f74afbf7af27d4a393d6a033b9182
parent 97b20f4fc2b228b20bc747c1529ba18c7a4b24d5
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Thu, 10 Nov 2016 23:38:45 +0300

added soviet grid layer

Diffstat:
Msrc/layers.js | 11++++++-----
Msrc/lib/leaflet.layer.soviet-topomaps-grid/soviet-topomaps-grid.js | 536+++++++++++++++++++++++++++++++++++++------------------------------------------
Asrc/lib/leaflet.layer.soviet-topomaps-grid/style.css | 26++++++++++++++++++++++++++
3 files changed, 286 insertions(+), 287 deletions(-)

diff --git a/src/layers.js b/src/layers.js @@ -1,8 +1,9 @@ import L from "leaflet"; -import 'lib/layer.yandex/yandex'; -import 'lib/layer.google/google'; -import 'lib/layer.bing/bing'; +import 'lib/leaflet.layer.yandex/yandex'; +import 'lib/leaflet.layer.google/google'; +import 'lib/leaflet.layer.bing/bing'; import config from './config'; +import 'lib/leaflet.layer.soviet-topomaps-grid/soviet-topomaps-grid'; function getBaseMaps() { var bingKey = 'AhZy06XFi8uAADPQvWNyVseFx4NHYAOH-7OTMKDPctGtYo86kMfx2T0zUrF5AAaM'; @@ -52,8 +53,8 @@ function getOverlays() { "Slazav map": new L.TileLayer("http://{s}.tiles.nakarte.tk/map_podm/{z}/{x}/{y}", {code: 'Z', tms: true, maxNativeZoom: 14, print: true, jnx: true}), "O-sport": new L.TileLayer("http://{s}.tiles.nakarte.tk/osport/{z}/{x}/{y}", - {code: 'R', tms: true, maxNativeZoom: 17, print: true, jnx: true}) - // "Soviet military grid": new L.SovietTopoGrid({code: 'Ng'}), + {code: 'R', tms: true, maxNativeZoom: 17, print: true, jnx: true}), + "Soviet topo maps grid": new L.Layer.SovietTopoGrid({code: 'Ng'}), // "Wikimapia": new L.Wikimapia({code: 'W', zIndexOffset: 10000}), // "Google Street View": new L.GoogleStreetView('street-view', {print: true, code: 'Gs', zIndexOffset: 10000}), // "Mountain passes (Westra)": new L.WestraPasses('/westraPasses/', {code: 'Wp', print: true, zIndexOffset: 10000}) diff --git a/src/lib/leaflet.layer.soviet-topomaps-grid/soviet-topomaps-grid.js b/src/lib/leaflet.layer.soviet-topomaps-grid/soviet-topomaps-grid.js @@ -1,282 +1,254 @@ -//@require leaflet - -(function(){ - "use strict"; - function zeroPad(num, size) { - var s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - - var Nomenclature = { - getQuadName1m: function(column, row, join) { - var name = ''; - if (row < 0) { - row = -row - 1; - name = name + 'x'; - } - column = column + 31; - name += 'ABCDEFGHIJKLMNOPQRSTUV'[row] + ' &ndash; ' + zeroPad(column, 2); - for (var n=1; n <= join-1; n++) { - name += ',' + zeroPad(column+n, 2); - } - return name; - }, - - getQuadName500k: function(column, row, join) { - var name = this.getQuadName1m(Math.floor(column / 2), Math.floor(row / 2), 1); - var subquad = 2-(row & 1) * 2 + (column & 1) + 1; - name = name + ' &ndash; ' + subquad; - if (join > 1) { - name += ',' + (subquad + 1); - } - if (join == 4) { - name += ',' + this.getQuadName1m(Math.floor((column + 2) / 2), Math.floor(row / 2), 1) + ' &ndash; ' + subquad + ',' + (subquad + 1); - } - return name; - }, - - getQuadName100k: function(column, row, join) { - var name = this.getQuadName1m(Math.floor(column / 12), Math.floor(row / 12), 1); - var subquad = 132-(row % 12) * 12 + (column % 12) + 1; - name = name + ' &ndash; ' + zeroPad(subquad, 3); - if (join > 1) { - name += ',' + zeroPad(subquad+1, 3); - } - if (join == 4) { - name += ',' + zeroPad(subquad+2, 3) + ',' + zeroPad(subquad+3, 3); - } - - return name; - }, - - getQuadName050k: function(column, row, join) { - var name = this.getQuadName100k(Math.floor(column / 2), Math.floor(row / 2), 1); - var subquad = 2-(row & 1) * 2 + (column & 1) + 1; - name = name + ' &ndash; ' + subquad; - if (join > 1) { - name += ',' + (subquad + 1); - } - if (join == 4) { - name += ',' + this.getQuadName100k(Math.floor((column + 2) / 2), Math.floor(row / 2), 1) + ' &ndash; ' + subquad + ',' + (subquad + 1); - } - return name; - }, - - _getQuads: function(bounds, row_height, column_width, name_factory) { - bounds = L.latLngBounds(bounds); - var quads = []; - var min_lat = Math.max(bounds.getSouth(), -84); - var max_lat = Math.min(bounds.getNorth(), 84); - var min_row = Math.floor(min_lat / row_height); - for (var row = min_row; row * row_height < max_lat; row++) { - var row_south = row * row_height; - var row_north = row_south + row_height; - var joined_quads; - if (row_south >= 76 || row_north <= -76) { - joined_quads = 4; - } else if (row_south >= 60 || row_north <= -60) { - joined_quads = 2; - } else { - joined_quads = 1; - } - var min_lon = Math.max(bounds.getWest(), -180); - var max_lon = Math.min(bounds.getEast(), 180); - var min_column = Math.floor((min_lon+180) / column_width / joined_quads) * joined_quads - Math.round(180/column_width); - for (var column = min_column; column * column_width < max_lon; column += joined_quads) { - var column_west = column * column_width; - var column_east = column_west + column_width * joined_quads; - var quad_bounds = L.latLngBounds([[row_south, column_west], [row_north, column_east]]); - var name = name_factory(column, row, joined_quads); - quads.push({'name': name, 'bounds': quad_bounds}); - } - } - return quads; - }, - - getQuads1m: function(bounds) { - return this._getQuads(bounds, 4, 6, this.getQuadName1m); - }, - - getQuads500k: function(bounds) { - return this._getQuads(bounds, 2, 3, this.getQuadName500k.bind(this)); - }, - - getQuads100k: function(bounds) { - return this._getQuads(bounds, 4/12, 6/12, this.getQuadName100k.bind(this)); - }, - - getQuads050k: function(bounds) { - return this._getQuads(bounds, 4/12/2, 6/12/2, this.getQuadName050k.bind(this)); - } - - - }; - - L.SovietTopoGrid = L.LayerGroup.extend({ - options: {}, - - initialize: function(options) { - L.LayerGroup.prototype.initialize.call(this, options); - L.Util.setOptions(this, options); - this._updatePathViewport = L.Util.limitExecByInterval(this.__updatePathViewport, 100, this); - this._quads = {}; - }, - - onAdd: function(map) { - this._map = map; - map.on('zoomend', this._reset, this); - map.on('move', this._update, this); - this._update(); - }, - - onRemove: function(map) { - map.off('zoomend', this._reset, this); - map.off('move', this._update, this); - this._cleanupQuads(true); - }, - - _addQuad: function(bounds, id, title, color, layer) { - if (id in this._quads) { - return; - } - var rect_options = {smoothFactor: 0, - noClip: true, - clickable: false, - fill: false, - opacity: {1: 0.7, 2: 0.4}[layer], - color: color, - weight: {1: 1, 2: 3}[layer] - }; - var rect = L.rectangle(bounds, rect_options); - this.addLayer(rect); - if (layer == 1) { - rect.bringToBack(); - } - var objects = [rect]; - var html = L.Util.template('<span style="color:{color}">{title}</span>', {color:color, title: title}); - var icon = L.divIcon({html: html, className: 'leaflet-sovietgrid-quadtitle-'+layer, iconSize: null}); - var marker = L.marker(L.latLngBounds(bounds).getCenter(), {icon: icon}); - this.addLayer(marker); - objects.push(marker); - this._quads[id] = objects; - }, - - _removeQuad: function(id) { - var objects = this._quads[id]; - for (var i=0; i<objects.length; i++) { - this.removeLayer(objects[i]); - } - delete this._quads[id]; - }, - - - _addQuads: function(quads, id_prefix, color, layer) { - quads.forEach(function(quad){ - var id = id_prefix + quad.name; - this._addQuad(quad.bounds, id, quad.name, color, layer); - }.bind(this)); - }, - - _addGrid: function() { - var quads; - var layer; - var map_bbox = this._map.getBounds(); - var zoom = this._map.getZoom(); - - if (zoom >= 10) { - quads = Nomenclature.getQuads050k(map_bbox); - layer = (zoom >= 12) ? 2 : 1; - this._addQuads(quads, '050k', '#50d', layer); - } - - if (zoom >= 8 && zoom < 12) { - quads = Nomenclature.getQuads100k(map_bbox); - layer = (zoom >= 10) ? 2 : 1; - this._addQuads(quads, '100k', '#d50', layer); - } - - - if (zoom >= 6 && zoom < 10) { - quads = Nomenclature.getQuads500k(map_bbox); - layer = (zoom >= 8) ? 2 : 1; - this._addQuads(quads, '500k', '#099', layer); - } - - if (zoom >= 4 && zoom < 8) { - layer = (zoom >= 6) ? 2 : 1; - quads = Nomenclature.getQuads1m(map_bbox); - this._addQuads(quads, '1m', 'blue', layer); - } - }, - - __updatePathViewport: function() { - try { - this._map._updateSvgViewport(); - } catch (e) {} - }, - - _reset: function() { - this._update(true); - }, - - _cleanupQuads: function(reset) { - if (reset===true) { - this.clearLayers(); - this._quads = {}; - } else { - var map_bbox = this._map.getBounds(); - for (var quad_id in this._quads) { - var rect = this._quads[quad_id][0]; - if (!map_bbox.intersects(rect.getBounds())) { - this._removeQuad(quad_id); - } - } - } - }, - - _update: function(reset) { - var t = new Date().getTime(); - this._cleanupQuads(reset); - this._updatePathViewport(); - this._addGrid(); - t = new Date().getTime() - t; - console.log('Time:', t); - console.log('Objects:', this.getLayers().length); - } - }); - - (function inject_css() { - var css = ''+ - '.leaflet-sovietgrid-quadtitle-1, .leaflet-sovietgrid-quadtitle-2 {'+ - ' width: 100px;'+ - ' height: 50px;'+ - ' margin-left: -50px;'+ - ' margin-top: -25px;'+ - ' text-align: center;'+ - ' line-height: 50px;'+ - ' font-family: "Times New Roman";'+ - ' font-weight: bold;'+ - ' text-shadow: 1px 0 0.5px #eee,'+ - ' 1px 1px 0.5px #eee,'+ - ' 0 1px 0.5px #eee,'+ - ' -1px 1px 0.5px #eee,'+ - ' -1px 0 0.5px #eee,'+ - ' -1px -1px 0.5px #eee,'+ - ' 0 -1px 0.5px #eee,'+ - ' 1px -1px 0.5px #eee;'+ - ' white-space: nowrap;'+ - '}'+ - '.leaflet-sovietgrid-quadtitle-1 {'+ - ' font-size: 14px;'+ - '}'+ - '.leaflet-sovietgrid-quadtitle-2 {'+ - ' font-size: 32px;'+ - '}'; - var st = document.createElement('style'); - st.appendChild(document.createTextNode(css)); - document.getElementsByTagName('head')[0].appendChild(st); - })(); -})(); +import L from 'leaflet'; +import './style.css'; + +function zeroPad(num, size) { + var s = num + ""; + while (s.length < size) { + s = "0" + s; + } + return s; +} + +var Nomenclature = { + getQuadName1m: function(column, row, join) { + var name = ''; + if (row < 0) { + row = -row - 1; + name = name + 'x'; + } + column = column + 31; + name += 'ABCDEFGHIJKLMNOPQRSTUV'[row] + ' &ndash; ' + zeroPad(column, 2); + for (var n = 1; n <= join - 1; n++) { + name += ',' + zeroPad(column + n, 2); + } + return name; + }, + + getQuadName500k: function(column, row, join) { + var name = this.getQuadName1m(Math.floor(column / 2), Math.floor(row / 2), 1); + var subquad = 2 - (row & 1) * 2 + (column & 1) + 1; + name = name + ' &ndash; ' + subquad; + if (join > 1) { + name += ',' + (subquad + 1); + } + if (join == 4) { + name += + ',' + this.getQuadName1m(Math.floor((column + 2) / 2), Math.floor(row / 2), 1) + ' &ndash; ' + subquad + + ',' + (subquad + 1); + } + return name; + }, + + getQuadName100k: function(column, row, join) { + var name = this.getQuadName1m(Math.floor(column / 12), Math.floor(row / 12), 1); + var subquad = 132 - (row % 12) * 12 + (column % 12) + 1; + name = name + ' &ndash; ' + zeroPad(subquad, 3); + if (join > 1) { + name += ',' + zeroPad(subquad + 1, 3); + } + if (join == 4) { + name += ',' + zeroPad(subquad + 2, 3) + ',' + zeroPad(subquad + 3, 3); + } + + return name; + }, + + getQuadName050k: function(column, row, join) { + var name = this.getQuadName100k(Math.floor(column / 2), Math.floor(row / 2), 1); + var subquad = 2 - (row & 1) * 2 + (column & 1) + 1; + name = name + ' &ndash; ' + subquad; + if (join > 1) { + name += ',' + (subquad + 1); + } + if (join == 4) { + name += ',' + this.getQuadName100k(Math.floor((column + 2) / 2), Math.floor(row / 2), 1) + ' &ndash; ' + + subquad + ',' + (subquad + 1); + } + return name; + }, + + _getQuads: function(bounds, row_height, column_width, name_factory) { + bounds = L.latLngBounds(bounds); + var quads = []; + var min_lat = Math.max(bounds.getSouth(), -84); + var max_lat = Math.min(bounds.getNorth(), 84); + var min_row = Math.floor(min_lat / row_height); + for (var row = min_row; row * row_height < max_lat; row++) { + var row_south = row * row_height; + var row_north = row_south + row_height; + var joined_quads; + if (row_south >= 76 || row_north <= -76) { + joined_quads = 4; + } else if (row_south >= 60 || row_north <= -60) { + joined_quads = 2; + } else { + joined_quads = 1; + } + var min_lon = Math.max(bounds.getWest(), -180); + var max_lon = Math.min(bounds.getEast(), 180); + var min_column = Math.floor((min_lon + 180) / column_width / joined_quads) * joined_quads - + Math.round(180 / column_width); + for (var column = min_column; column * column_width < max_lon; column += joined_quads) { + var column_west = column * column_width; + var column_east = column_west + column_width * joined_quads; + var quad_bounds = L.latLngBounds([[row_south, column_west], [row_north, column_east]]); + var name = name_factory(column, row, joined_quads); + quads.push({'name': name, 'bounds': quad_bounds}); + } + } + return quads; + }, + + getQuads1m: function(bounds) { + return this._getQuads(bounds, 4, 6, this.getQuadName1m); + }, + + getQuads500k: function(bounds) { + return this._getQuads(bounds, 2, 3, this.getQuadName500k.bind(this)); + }, + + getQuads100k: function(bounds) { + return this._getQuads(bounds, 4 / 12, 6 / 12, this.getQuadName100k.bind(this)); + }, + + getQuads050k: function(bounds) { + return this._getQuads(bounds, 4 / 12 / 2, 6 / 12 / 2, this.getQuadName050k.bind(this)); + } + + +}; + +L.Layer.SovietTopoGrid = L.LayerGroup.extend({ + options: {}, + + initialize: function(options) { + L.LayerGroup.prototype.initialize.call(this); + L.Util.setOptions(this, options); + this._updatePathViewport = L.Util.throttle(this.__updatePathViewport, 100, this); + this._quads = {}; + }, + + onAdd: function(map) { + this._map = map; + map.on('zoomend', this._reset, this); + map.on('move', this._update, this); + this._update(); + }, + + onRemove: function(map) { + map.off('zoomend', this._reset, this); + map.off('move', this._update, this); + this._cleanupQuads(true); + }, + + _addQuad: function(bounds, id, title, color, layer) { + if (id in this._quads) { + return; + } + var rect_options = { + smoothFactor: 0, + noClip: true, + clickable: false, + fill: false, + opacity: {1: 0.7, 2: 0.4}[layer], + color: color, + weight: {1: 1, 2: 3}[layer] + }; + var rect = L.rectangle(bounds, rect_options); + this.addLayer(rect); + if (layer == 1) { + rect.bringToBack(); + } + var objects = [rect]; + var html = L.Util.template('<span style="color:{color}">{title}</span>', {color: color, title: title}); + var icon = L.divIcon({html: html, className: 'leaflet-sovietgrid-quadtitle-' + layer, iconSize: null}); + var marker = L.marker(L.latLngBounds(bounds).getCenter(), {icon: icon}); + this.addLayer(marker); + objects.push(marker); + this._quads[id] = objects; + }, + + _removeQuad: function(id) { + var objects = this._quads[id]; + for (var i = 0; i < objects.length; i++) { + this.removeLayer(objects[i]); + } + delete this._quads[id]; + }, + + + _addQuads: function(quads, id_prefix, color, layer) { + quads.forEach(function(quad) { + var id = id_prefix + quad.name; + this._addQuad(quad.bounds, id, quad.name, color, layer); + }.bind(this) + ); + }, + + _addGrid: function() { + var quads; + var layer; + var map_bbox = this._map.getBounds(); + var zoom = this._map.getZoom(); + + if (zoom >= 10) { + quads = Nomenclature.getQuads050k(map_bbox); + layer = (zoom >= 12) ? 2 : 1; + this._addQuads(quads, '050k', '#50d', layer); + } + + if (zoom >= 8 && zoom < 12) { + quads = Nomenclature.getQuads100k(map_bbox); + layer = (zoom >= 10) ? 2 : 1; + this._addQuads(quads, '100k', '#d50', layer); + } + + + if (zoom >= 6 && zoom < 10) { + quads = Nomenclature.getQuads500k(map_bbox); + layer = (zoom >= 8) ? 2 : 1; + this._addQuads(quads, '500k', '#099', layer); + } + + if (zoom >= 4 && zoom < 8) { + layer = (zoom >= 6) ? 2 : 1; + quads = Nomenclature.getQuads1m(map_bbox); + this._addQuads(quads, '1m', 'blue', layer); + } + }, + + __updatePathViewport: function() { + try { + this._map._updateSvgViewport(); + } catch (e) { + } + }, + + _reset: function() { + this._update(true); + }, + + _cleanupQuads: function(reset) { + if (reset === true) { + this.clearLayers(); + this._quads = {}; + } else { + var map_bbox = this._map.getBounds(); + for (var quad_id in this._quads) { + var rect = this._quads[quad_id][0]; + if (!map_bbox.intersects(rect.getBounds())) { + this._removeQuad(quad_id); + } + } + } + }, + + _update: function(reset) { + var t = new Date().getTime(); + this._cleanupQuads(reset); + this._updatePathViewport(); + this._addGrid(); + t = new Date().getTime() - t; + } + } +); diff --git a/src/lib/leaflet.layer.soviet-topomaps-grid/style.css b/src/lib/leaflet.layer.soviet-topomaps-grid/style.css @@ -0,0 +1,26 @@ +.leaflet-sovietgrid-quadtitle-1, .leaflet-sovietgrid-quadtitle-2 { + width: 100px; + height: 50px; + margin-left: -50px; + margin-top: -25px; + text-align: center; + line-height: 50px; + font-family: "Times New Roman"; + font-weight: bold; + text-shadow: 1px 0 0.5px #eee, + 1px 1px 0.5px #eee, + 0 1px 0.5px #eee, + -1px 1px 0.5px #eee, + -1px 0 0.5px #eee, + -1px -1px 0.5px #eee, + 0 -1px 0.5px #eee, + 1px -1px 0.5px #eee; + white-space: nowrap; +} +.leaflet-sovietgrid-quadtitle-1 { + font-size: 14px; +} + +.leaflet-sovietgrid-quadtitle-2 { + font-size: 32px; +}