LatLon.org — OSMers sandbox

<html> <head> <title>LatLon.org — OSMers sandbox</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/> <link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="lib/Font-Awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="lib/Leaflet.markercluster/dist/MarkerCluster.css"/> <link rel="stylesheet" href="lib/Leaflet.markercluster/dist/MarkerCluster.Default.css"/> <link rel="stylesheet" href="lib/Leaflet.LinearMeasurement/Leaflet.LinearMeasurement.css"/> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/cat.png"/> <form id="gpxForm"> <label for="gpxURL">Загрузить трек с URL:</label> <input type="text" id="gpxURL" name="gpxURL"/> <input type="submit" value="Загрузить"/> </form> </div> <div id="container"> <div id="map"></div> </div> </div> <script src="lib/jquery-2.1.4.min.js"></script> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <script src="lib/leaflet-hash.js"></script> <script src="lib/Leaflet.FileLayer/src/leaflet.filelayer.js"></script> <script src="lib/togeojson/togeojson.js"></script> <script src="lib/leaflet-omnivore.min.js"></script> <script src="lib/Leaflet.markercluster/dist/leaflet.markercluster.js"></script> <script src="lib/Leaflet.LinearMeasurement/Leaflet.LinearMeasurement.js"></script> <script src="lib/leaflet-header/index.js"></script> <script src="gb-utf8.js"></script> <script> var params = {}; window.location.href.replace(/[?&]+([^=&]+)=([^&#]*)/gi, function(m, key, value) { params[key] = value; }); function loadGlobus(group) { var items = GetGeoItems(); var icon = L.divIcon({ className: 'fa fa-globe fa-lg icon-globus' }); for (i in items) { var poi = items[i]; var marker = L.marker([poi.lt, poi.ln], {icon: icon}); var preview_url; var img = ''; if (poi.mi != '') { if (poi.w == 'GA') preview_url = 'http://orda.of.by/.ga/' + poi.ps[0] + '/' + poi.ps + '/' + poi.os + '/nf/.preview/' + poi.mi; else preview_url = 'http://globus.tut.by/_wh150/' + poi.ps + '/' + poi.mi; img = '<br/><img width="150px" src="' + preview_url + '"></img>'; } marker.bindPopup('<a href="http://globus.tut.by/' + poi.ps + '"><h3>' + poi.p + '</h3></a>' + '<a href="http://globus.tut.by/' + poi.ps + '/' + poi.os + '">' + poi.o + '</a><br/>' + poi.d + img); marker.on('mouseover', function(e) { e.target.openPopup(); }); group.addLayer(marker); } } var map = L.map('map').setView([53.90313, 27.56813], 7); var latlon = L.tileLayer('https://tile.latlon.org/tiles/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 'Tiles: <a href="https://github.com/jekhor/belroad">Belroad</a> style' }); var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }); var genshtab = L.tileLayer.wms("https://ms.latlon.org/ms", { layers: 'GS-100k-N-34,GS-100k-N-35,GS-100k-N-36', format: 'image/png' }); var rkka50k = L.tileLayerHdrs('https://globus.tut.by/.tiles/rkka_v4/Z{z}/{y}/{x}.jpg', { maxNativeZoom: 14, maxZoom: 18, attribution: '<a href="http://orda.of.by/">orda.of.by</a>' }, [ { header: 'Referer', value: 'https://orda.of.by/.map/' } ]); var zis_vitebsk = L.tileLayer('http://vitebsk.gismap.by/ArcGIS/rest/services/WGS/Land_Vitebsk_public/MapServer/tile/{z}/{y}/{x}', { maxZoom: 18, minZoom: 15, attribution: '<a href="http://gismap.by/">Геопортал ЗИС</a>' }); var zis_minsk = L.tileLayer('http://gismap.by/arcgis/rest/services/Public/Land_Minsk_public/MapServer/tile/{z}/{y}/{x}', { minZoom: 14, maxZoom: 18, attribution: '<a href="http://gismap.by/">Геопортал ЗИС</a>' }); var lots_minsk = L.tileLayer('http://gismap.by/arcgis/rest/services/Public/Uchastki_Minsk_public/MapServer/tile/{z}/{y}/{x}', { minZoom: 14, maxZoom: 19, attribution: '<a href="http://gismap.by/">Геопортал ЗИС</a>' }); var myad = L.tileLayer('http://gismap.by/arcgis/rest/services/WMS/Myadelski/MapServer/tile/{z}/{y}/{x}', { minZoom: 0, maxZoom: 19, attribution: '<a href="http://gismap.by/">Геопортал ЗИС</a>' }); var baseLayers = { "LatLon": latlon, "OSM Mapnik": osm, "Генштаб, 1км": genshtab, "РККА, 1:50000": rkka50k, "ЗИС Витебская обл.": zis_vitebsk, "ЗИС Минская обл.": zis_minsk, "WMS Мядельский район": myad }; var globusGroup = L.markerClusterGroup({ showCoverageOnHover: false, maxClusterRadius: 50, disableClusteringAtZoom: 12, iconCreateFunction: function(cluster) { var childCount = cluster.getChildCount(); var c = ' marker-cluster-'; if (childCount < 10) { c += 'small'; } else if (childCount < 100) { c += 'medium'; } else { c += 'large'; } return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) }); } }); loadGlobus(globusGroup); var overlays = { "Глобус Беларуси": globusGroup, "Земельные участки, Минская обл.": lots_minsk }; var layersCtl = L.control.layers(baseLayers, overlays).addTo(map); var hashLayers = { 'L': latlon, 'O': osm, 'G': genshtab, 'R': rkka50k, 'V': zis_vitebsk, 'M': zis_minsk, 'U': lots_minsk }; var control = new L.Control.LinearMeasurement({ unitSystem: 'metric', color: '#FF0080', type: 'line' }).addTo(map); var hash = L.hash(map); hash.formatHash = function(map, setLayer) { var center = map.getCenter(), zoom = map.getZoom(), precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)); var layers = ""; for (l in hashLayers) { if (setLayer != undefined) { if (hashLayers[l] == setLayer) layers += l; } else { if (map.hasLayer(hashLayers[l])) layers += l; } } return "#" + [zoom, center.lat.toFixed(precision), center.lng.toFixed(precision) ].join("/") + "?layers=" + layers; }; if (params.layers) { var added = false; for (var i = 0; i < params.layers.length; i++) { if (hashLayers[params.layers[i]] != undefined) { hashLayers[params.layers[i]].addTo(map); added = true; } } if (!added) latlon.addTo(map); } else { latlon.addTo(map); } function loadGpx(url) { if (!url) return; var proxyUrl = '/proxy.py'; var gpxLayer = omnivore.gpx(proxyUrl + '?url=' + encodeURIComponent(url)) .on('ready', function() { map.fitBounds(gpxLayer.getBounds()); }) .addTo(map); }; if (params.gpxUrl) { loadGpx(decodeURIComponent(params.gpxUrl)); } map.on('baselayerchange', function(e) { location.replace(hash.formatHash(map, e.layer));; }); var style = { opacity: 0.5, color:'red' }; /*L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>'; var fileLayerCtl = L.Control.fileLayerLoad({ // See http://leafletjs.com/reference.html#geojson-options layerOptions: { style: style, pointToLayer: function (data, latlng) { var layer = L.circleMarker(latlng, {style: style}); layer.bindPopup(data.properties.name); return layer; } }, // Add to map after loading (default: true) ? addToMap: true, // File size limit in kb (default: 1024) ? fileSizeLimit: 16384, fitBounds: true, // Restrict accepted file formats (default: .geojson, .kml, and .gpx) ? formats: [ '.gpx', '.geojson', '.kml' ] }).addTo(map); fileLayerCtl.loader.on('data:loaded', function (e) { // Add to map layer switcher layersCtl.addOverlay(e.layer, e.filename); }); */ $(document).ready(function() { $('#gpxForm').submit(function() { var gpxUrl = $('#gpxURL').val(); loadGpx(gpxUrl); return false; }); }); </script>  <script type="text/javascript"> var _paq = _paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//stat.komzpa.net/"; _paq.push(['setTrackerUrl', u+'piwik.php']); _paq.push(['setSiteId', 1]); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s); })(); </script> <noscript><p><img src="//stat.komzpa.net/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>  </body> </html>

CINXE.COM

LatLon.org — OSMers sandbox