Created
April 14, 2015 00:53
-
-
Save Vnr/94e86a68e8fc45139a6b to your computer and use it in GitHub Desktop.
Leaflet Time Slider Example Leaflet main!! // source http://jsbin.com/xalesi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <meta http-equiv="X-UA-Compatible" content="chrome=1" /> | |
| <meta name="description" content="Leaflet main!!" /> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <!-- <link rel="stylesheet" type="text/css" media="screen" href="http://consbio.github.io/Leaflet.ZoomBox/L.Control.ZoomBox.css"> --> | |
| <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css"> | |
| <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script> | |
| <!-- <link rel="stylesheet" type="text/css" media="screen" href="https://rawgit.com/dwilhelm89/LeafletSlider/gh-pages/stylesheets/stylesheet.css"> --> | |
| <script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js" type="text/javascript"></script> | |
| <!-- <script src="http://consbio.github.io/Leaflet.ZoomBox/L.Control.ZoomBox.js" type="text/javascript"></script> --> | |
| <!-- <script src="https://rawgit.com/CliffCloud/Leaflet.LocationShare/master/Leaflet.LocationShare.js" type="text/javascript"></script> --> | |
| <script src="http://mlevans.github.io/leaflet-hash/javascripts/leaflet-hash.js"></script> | |
| <script src="http://zverik.github.io/Leaflet.LimitZoom/Leaflet.LimitZoom.js"></script> | |
| <!-- <link rel="stylesheet" media="screen" href="http://kartena.github.io/Leaflet.zoomslider/lib/Leaflet.zoomslider/src/L.Control.Zoomslider.css"> | |
| <script src="http://kartena.github.io/Leaflet.zoomslider/lib/Leaflet.zoomslider/src/L.Control.Zoomslider.js"></script> --> | |
| <script src='http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.3/Leaflet.fullscreen.min.js'></script> | |
| <link href='http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.3/leaflet.fullscreen.css' rel='stylesheet' /> | |
| <link rel="stylesheet" href="http://norkart.github.io/Leaflet-MiniMap/Control.MiniMap.css" /> | |
| <script src="http://norkart.github.io/Leaflet-MiniMap/Control.MiniMap.js" type="text/javascript"></script> | |
| <link rel="stylesheet" href="https://rawgit.com/nguyenning/Leaflet.defaultextent/master/dist/leaflet.defaultextent.css" /> | |
| <script src="https://rawgit.com/nguyenning/Leaflet.defaultextent/master/dist/leaflet.defaultextent.js"></script> | |
| <title>Leaflet Time Slider Example</title> | |
| <style id="jsbin-css"> | |
| <style> | |
| body { | |
| padding: 0; | |
| } | |
| html, body, #map { | |
| height: 100%; | |
| overflow: hidden; | |
| margin: 0 ; | |
| } | |
| .leaflet-control-layers { | |
| margin-top: 25px !important; | |
| } | |
| </style> | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map" style=""></div> | |
| <script id="jsbin-javascript"> | |
| var sliderControl = null; | |
| var maxbounds = L.latLngBounds([ | |
| [51, 6], | |
| [53, 9] | |
| ]); | |
| var map = L.map('map',{ | |
| fullscreenControl: true, | |
| defaultExtentControl: true, | |
| // maxBounds: maxbounds, | |
| zooms: [3,4,5,6,7,8,9,10,11,12,13,14,15] | |
| }).setView([51.9, 7.9], 9); | |
| var hash = new L.Hash(map); | |
| // Tile Layers | |
| var osmL = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }); | |
| var osm2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }); // for minimap | |
| var mapSurfer = L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roads/x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }); | |
| var sat = L.tileLayer('https://khms0.google.com/kh/v=162&x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://google.com">Google</a>' | |
| }); | |
| var skeleton = L.tileLayer('http://mt.google.com/vt/lyrs=h@169000000&hl=en&x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://google.com">Google</a>', zIndex: 19 | |
| }); | |
| var skeleton2 = L.tileLayer('http://mt.google.com/vt/lyrs=h@169000000&hl=en&x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://google.com">Google</a>', zIndex: 19 | |
| }); // второй слой для чекбокса | |
| var hybrid = L.layerGroup([sat, skeleton]); //.addLayer(skeleton); | |
| mapSurfer.addTo(map); | |
| var testlayer = L.geoJson(null, { | |
| style: function (feature) { | |
| return { | |
| opacity: 1, | |
| }; | |
| }, | |
| // pointToLayer is for styling markers, style - for all other shapes | |
| pointToLayer: function(feature, latlng) { | |
| return new L.Marker(latlng, { | |
| draggable: true, | |
| title: "Suka", | |
| // opacity: 0.5, | |
| riseOnHover: true | |
| }); | |
| }, | |
| onEachFeature: function (feature, layer) { | |
| layer.bindPopup(feature.properties.time); | |
| } | |
| }); | |
| var baseLayers = { | |
| "OSM": osmL, | |
| "Google Hybrid": hybrid, | |
| "MapSurfer": mapSurfer | |
| }; | |
| var overlays = { | |
| "Cities": testlayer, | |
| "Google Skeleton": skeleton2 | |
| }; | |
| L.control.layers(baseLayers, overlays).addTo(map); | |
| $.getJSON("http://dwilhelm89.github.io/LeafletSlider/points.json", function(json) { | |
| // console.log('Got json', json); | |
| testlayer.addData(json); | |
| sliderControl = L.control.sliderControl({ | |
| position: "topright", | |
| layer: testlayer, | |
| range: true, | |
| // follow: 3 | |
| // rezoom: 10, | |
| // showAllOnStart: true | |
| }); | |
| map.addControl(sliderControl); | |
| // sliderControl.startSlider(); | |
| }); | |
| // L.control.zoomBox({modal: false}).addTo(map); | |
| var miniMap = new L.Control.MiniMap(osm2, { | |
| position: 'bottomright', | |
| toggleDisplay: true, | |
| zoomLevelFixed: 6, | |
| height: 200, | |
| width: 200 | |
| }).addTo(map); | |
| var myIcon = L.icon({ | |
| iconUrl: 'http://zurb.com/playground/assets/webicons/webicon-facebook-0a000f3ca6fb1c3211f4d20878efd111.svg', | |
| // iconUrl: 'http://googledrive.com/host/0Bw8Xp7WUF3FTfjliODFUb19TMkdwU3NZazdGaUpwN0hBSlh2OGQyMXJ6VkdGMHltTjBXUGs/icon.svg', | |
| // iconRetinaUrl: 'my-icon@2x.png', | |
| iconSize: [38, 25] | |
| // iconAnchor: [22, 94], | |
| // popupAnchor: [-3, -76], | |
| // shadowUrl: 'my-icon-shadow.png', | |
| // shadowRetinaUrl: 'my-icon-shadow@2x.png', | |
| // shadowSize: [68, 95], | |
| // shadowAnchor: [22, 94] | |
| }); | |
| // var marker = L.marker([51.9, 7.9], {icon: myIcon}).addTo(map); //marker for experiments | |
| // $.getJSON("https://ru.wikipedia.org/w/api.php?action=query&prop=coordinates&format=json&colimit=max&coprop=type%7Cname%7Cdim%7Ccountry%7Cregion&titles=4-%D1%8F_%D0%B3%D0%B2%D0%B0%D1%80%D0%B4%D0%B5%D0%B9%D1%81%D0%BA%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B5%D0%BB%D0%BA%D0%BE%D0%B2%D0%B0%D1%8F_%D0%B4%D0%B8%D0%B2%D0%B8%D0%B7%D0%B8%D1%8F&generator=links&gplnamespace=0&gpllimit=max&gpldir=descending&callback=?", function(json) { | |
| // for(var page in json.query.pages) { | |
| // if(json.query.pages[page].coordinates & json.query.pages[page].coordinates[0].dim < 10000) { | |
| // console.log(json.query.pages[page].coordinates[0]); | |
| // var lat = json.query.pages[page].coordinates[0].lat; | |
| // var lon = json.query.pages[page].coordinates[0].lon; | |
| // var title = json.query.pages[page].title; | |
| // L.marker([lat, lon], {title: title}).addTo(map); | |
| // } | |
| // } | |
| // }); | |
| // | |
| //https://en.wikipedia.org/w/api.php?action=query&prop=coordinates|info|pageimages&format=json&colimit=max&inprop=url%7Cdisplaytitle&piprop=thumbnail%7Cname&pithumbsize=150&pilimit=max&generator=categorymembers&gcmtitle=Category%3ANeanderthal_sites&gcmlimit=max&callback=? | |
| //https://ru.wikipedia.org/w/api.php?action=query&prop=coordinates|info|pageimages&format=json&colimit=max&inprop=url%7Cdisplaytitle&piprop=thumbnail%7Cname&pithumbsize=150&pilimit=max&generator=categorymembers&gcmtitle=Категория:Города_Калужской_области&gcmlimit=max&coprimary=all&callback=? | |
| //Города_Московской_области | |
| //Города_Калужской_области | |
| //Места палеонтологических находок | |
| //Доисторическая_Россия | |
| //Находки неандертальцев | |
| //Памятники археологии Московской области | |
| //Городища_России | |
| //Исчезнувшие древнерусские города | |
| //Монастыри_Калужской_области | |
| //https://ru.wikipedia.org/w/api.php?action=query&format=json&colimit=max&prop=coordinates&titles=Города_Московской_области&coprop=type|name|dim|country|region&coprimary=all&callback=? | |
| //Города_Древнего_Египта | |
| //Города_Московской_области | |
| $.getJSON("https://de.wikipedia.org/w/api.php?action=query&prop=coordinates|info|pageimages&format=json&colimit=max&inprop=url%7Cdisplaytitle&piprop=thumbnail%7Cname&pithumbsize=150&pilimit=max&generator=categorymembers&gcmtitle=Kategorie:Fundstätte_homininer_Fossilien_in_Europa&gcmlimit=max&callback=?", function(json) { | |
| for(var page in json.query.pages) { | |
| if(json.query.pages[page].coordinates) { | |
| var lat = json.query.pages[page].coordinates[0].lat; | |
| var lon = json.query.pages[page].coordinates[0].lon; | |
| var title = json.query.pages[page].title; | |
| var thumb = ''; | |
| try { | |
| var height = json.query.pages[page].thumbnail.height; | |
| var width = json.query.pages[page].thumbnail.width; | |
| var source = json.query.pages[page].thumbnail.source | |
| thumb = '<img src="' +source+ '" width=' +width+ 'height=' +height+ '><br/>' | |
| } | |
| catch(err) { | |
| console.log(err.message); | |
| } | |
| L.marker([lat, lon], {title: title}).addTo(map) | |
| .bindPopup(thumb + '<a href="' + json.query.pages[page].fullurl + '" target="_blank">' + | |
| title + '</a>'); | |
| } | |
| else { | |
| console.log(json.query.pages[page].title + ' - нет координат'); | |
| console.log(json.query.pages[page]); | |
| } | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <meta http-equiv="X-UA-Compatible" content="chrome=1" /> | |
| <meta name="description" content="Leaflet main!!" /> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"><\/script> | |
| <script src="http://code.jquery.com/jquery-1.9.1.min.js"><\/script> | |
| <\!-- <link rel="stylesheet" type="text/css" media="screen" href="http://consbio.github.io/Leaflet.ZoomBox/L.Control.ZoomBox.css"> --> | |
| <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css"> | |
| <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"><\/script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"><\/script> | |
| <\!-- <link rel="stylesheet" type="text/css" media="screen" href="https://rawgit.com/dwilhelm89/LeafletSlider/gh-pages/stylesheets/stylesheet.css"> --> | |
| <script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js" type="text/javascript"><\/script> | |
| <\!-- <script src="http://consbio.github.io/Leaflet.ZoomBox/L.Control.ZoomBox.js" type="text/javascript"><\/script> --> | |
| <\!-- <script src="https://rawgit.com/CliffCloud/Leaflet.LocationShare/master/Leaflet.LocationShare.js" type="text/javascript"><\/script> --> | |
| <script src="//mlevans.github.io/leaflet-hash/javascripts/leaflet-hash.js"><\/script> | |
| <script src="http://zverik.github.io/Leaflet.LimitZoom/Leaflet.LimitZoom.js"><\/script> | |
| <\!-- <link rel="stylesheet" media="screen" href="http://kartena.github.io/Leaflet.zoomslider/lib/Leaflet.zoomslider/src/L.Control.Zoomslider.css"> | |
| <script src="http://kartena.github.io/Leaflet.zoomslider/lib/Leaflet.zoomslider/src/L.Control.Zoomslider.js"><\/script> --> | |
| <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.3/Leaflet.fullscreen.min.js'><\/script> | |
| <link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.3/leaflet.fullscreen.css' rel='stylesheet' /> | |
| <link rel="stylesheet" href="http://norkart.github.io/Leaflet-MiniMap/Control.MiniMap.css" /> | |
| <script src="http://norkart.github.io/Leaflet-MiniMap/Control.MiniMap.js" type="text/javascript"><\/script> | |
| <link rel="stylesheet" href="https://rawgit.com/nguyenning/Leaflet.defaultextent/master/dist/leaflet.defaultextent.css" /> | |
| <script src="https://rawgit.com/nguyenning/Leaflet.defaultextent/master/dist/leaflet.defaultextent.js"><\/script> | |
| <title>Leaflet Time Slider Example</title> | |
| </head> | |
| <body> | |
| <div id="map" style=""></div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css"><style> | |
| body { | |
| padding: 0; | |
| } | |
| html, body, #map { | |
| height: 100%; | |
| overflow: hidden; | |
| margin: 0 ; | |
| } | |
| .leaflet-control-layers { | |
| margin-top: 25px !important; | |
| } | |
| </style></script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var sliderControl = null; | |
| var maxbounds = L.latLngBounds([ | |
| [51, 6], | |
| [53, 9] | |
| ]); | |
| var map = L.map('map',{ | |
| fullscreenControl: true, | |
| defaultExtentControl: true, | |
| // maxBounds: maxbounds, | |
| zooms: [3,4,5,6,7,8,9,10,11,12,13,14,15] | |
| }).setView([51.9, 7.9], 9); | |
| var hash = new L.Hash(map); | |
| // Tile Layers | |
| var osmL = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }); | |
| var osm2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }); // for minimap | |
| var mapSurfer = L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roads/x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }); | |
| var sat = L.tileLayer('https://khms0.google.com/kh/v=162&x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://google.com">Google</a>' | |
| }); | |
| var skeleton = L.tileLayer('http://mt.google.com/vt/lyrs=h@169000000&hl=en&x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://google.com">Google</a>', zIndex: 19 | |
| }); | |
| var skeleton2 = L.tileLayer('http://mt.google.com/vt/lyrs=h@169000000&hl=en&x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://google.com">Google</a>', zIndex: 19 | |
| }); // второй слой для чекбокса | |
| var hybrid = L.layerGroup([sat, skeleton]); //.addLayer(skeleton); | |
| mapSurfer.addTo(map); | |
| var testlayer = L.geoJson(null, { | |
| style: function (feature) { | |
| return { | |
| opacity: 1, | |
| }; | |
| }, | |
| // pointToLayer is for styling markers, style - for all other shapes | |
| pointToLayer: function(feature, latlng) { | |
| return new L.Marker(latlng, { | |
| draggable: true, | |
| title: "Suka", | |
| // opacity: 0.5, | |
| riseOnHover: true | |
| }); | |
| }, | |
| onEachFeature: function (feature, layer) { | |
| layer.bindPopup(feature.properties.time); | |
| } | |
| }); | |
| var baseLayers = { | |
| "OSM": osmL, | |
| "Google Hybrid": hybrid, | |
| "MapSurfer": mapSurfer | |
| }; | |
| var overlays = { | |
| "Cities": testlayer, | |
| "Google Skeleton": skeleton2 | |
| }; | |
| L.control.layers(baseLayers, overlays).addTo(map); | |
| $.getJSON("http://dwilhelm89.github.io/LeafletSlider/points.json", function(json) { | |
| // console.log('Got json', json); | |
| testlayer.addData(json); | |
| sliderControl = L.control.sliderControl({ | |
| position: "topright", | |
| layer: testlayer, | |
| range: true, | |
| // follow: 3 | |
| // rezoom: 10, | |
| // showAllOnStart: true | |
| }); | |
| map.addControl(sliderControl); | |
| // sliderControl.startSlider(); | |
| }); | |
| // L.control.zoomBox({modal: false}).addTo(map); | |
| var miniMap = new L.Control.MiniMap(osm2, { | |
| position: 'bottomright', | |
| toggleDisplay: true, | |
| zoomLevelFixed: 6, | |
| height: 200, | |
| width: 200 | |
| }).addTo(map); | |
| var myIcon = L.icon({ | |
| iconUrl: 'http://zurb.com/playground/assets/webicons/webicon-facebook-0a000f3ca6fb1c3211f4d20878efd111.svg', | |
| // iconUrl: 'http://googledrive.com/host/0Bw8Xp7WUF3FTfjliODFUb19TMkdwU3NZazdGaUpwN0hBSlh2OGQyMXJ6VkdGMHltTjBXUGs/icon.svg', | |
| // iconRetinaUrl: 'my-icon@2x.png', | |
| iconSize: [38, 25] | |
| // iconAnchor: [22, 94], | |
| // popupAnchor: [-3, -76], | |
| // shadowUrl: 'my-icon-shadow.png', | |
| // shadowRetinaUrl: 'my-icon-shadow@2x.png', | |
| // shadowSize: [68, 95], | |
| // shadowAnchor: [22, 94] | |
| }); | |
| // var marker = L.marker([51.9, 7.9], {icon: myIcon}).addTo(map); //marker for experiments | |
| // $.getJSON("https://ru.wikipedia.org/w/api.php?action=query&prop=coordinates&format=json&colimit=max&coprop=type%7Cname%7Cdim%7Ccountry%7Cregion&titles=4-%D1%8F_%D0%B3%D0%B2%D0%B0%D1%80%D0%B4%D0%B5%D0%B9%D1%81%D0%BA%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B5%D0%BB%D0%BA%D0%BE%D0%B2%D0%B0%D1%8F_%D0%B4%D0%B8%D0%B2%D0%B8%D0%B7%D0%B8%D1%8F&generator=links&gplnamespace=0&gpllimit=max&gpldir=descending&callback=?", function(json) { | |
| // for(var page in json.query.pages) { | |
| // if(json.query.pages[page].coordinates & json.query.pages[page].coordinates[0].dim < 10000) { | |
| // console.log(json.query.pages[page].coordinates[0]); | |
| // var lat = json.query.pages[page].coordinates[0].lat; | |
| // var lon = json.query.pages[page].coordinates[0].lon; | |
| // var title = json.query.pages[page].title; | |
| // L.marker([lat, lon], {title: title}).addTo(map); | |
| // } | |
| // } | |
| // }); | |
| // | |
| //https://en.wikipedia.org/w/api.php?action=query&prop=coordinates|info|pageimages&format=json&colimit=max&inprop=url%7Cdisplaytitle&piprop=thumbnail%7Cname&pithumbsize=150&pilimit=max&generator=categorymembers&gcmtitle=Category%3ANeanderthal_sites&gcmlimit=max&callback=? | |
| //https://ru.wikipedia.org/w/api.php?action=query&prop=coordinates|info|pageimages&format=json&colimit=max&inprop=url%7Cdisplaytitle&piprop=thumbnail%7Cname&pithumbsize=150&pilimit=max&generator=categorymembers&gcmtitle=Категория:Города_Калужской_области&gcmlimit=max&coprimary=all&callback=? | |
| //Города_Московской_области | |
| //Города_Калужской_области | |
| //Места палеонтологических находок | |
| //Доисторическая_Россия | |
| //Находки неандертальцев | |
| //Памятники археологии Московской области | |
| //Городища_России | |
| //Исчезнувшие древнерусские города | |
| //Монастыри_Калужской_области | |
| //https://ru.wikipedia.org/w/api.php?action=query&format=json&colimit=max&prop=coordinates&titles=Города_Московской_области&coprop=type|name|dim|country|region&coprimary=all&callback=? | |
| //Города_Древнего_Египта | |
| //Города_Московской_области | |
| $.getJSON("https://de.wikipedia.org/w/api.php?action=query&prop=coordinates|info|pageimages&format=json&colimit=max&inprop=url%7Cdisplaytitle&piprop=thumbnail%7Cname&pithumbsize=150&pilimit=max&generator=categorymembers&gcmtitle=Kategorie:Fundstätte_homininer_Fossilien_in_Europa&gcmlimit=max&callback=?", function(json) { | |
| for(var page in json.query.pages) { | |
| if(json.query.pages[page].coordinates) { | |
| var lat = json.query.pages[page].coordinates[0].lat; | |
| var lon = json.query.pages[page].coordinates[0].lon; | |
| var title = json.query.pages[page].title; | |
| var thumb = ''; | |
| try { | |
| var height = json.query.pages[page].thumbnail.height; | |
| var width = json.query.pages[page].thumbnail.width; | |
| var source = json.query.pages[page].thumbnail.source | |
| thumb = '<img src="' +source+ '" width=' +width+ 'height=' +height+ '><br/>' | |
| } | |
| catch(err) { | |
| console.log(err.message); | |
| } | |
| L.marker([lat, lon], {title: title}).addTo(map) | |
| .bindPopup(thumb + '<a href="' + json.query.pages[page].fullurl + '" target="_blank">' + | |
| title + '</a>'); | |
| } | |
| else { | |
| console.log(json.query.pages[page].title + ' - нет координат'); | |
| console.log(json.query.pages[page]); | |
| } | |
| } | |
| }); | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| body { | |
| padding: 0; | |
| } | |
| html, body, #map { | |
| height: 100%; | |
| overflow: hidden; | |
| margin: 0 ; | |
| } | |
| .leaflet-control-layers { | |
| margin-top: 25px !important; | |
| } | |
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var sliderControl = null; | |
| var maxbounds = L.latLngBounds([ | |
| [51, 6], | |
| [53, 9] | |
| ]); | |
| var map = L.map('map',{ | |
| fullscreenControl: true, | |
| defaultExtentControl: true, | |
| // maxBounds: maxbounds, | |
| zooms: [3,4,5,6,7,8,9,10,11,12,13,14,15] | |
| }).setView([51.9, 7.9], 9); | |
| var hash = new L.Hash(map); | |
| // Tile Layers | |
| var osmL = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }); | |
| var osm2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }); // for minimap | |
| var mapSurfer = L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roads/x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }); | |
| var sat = L.tileLayer('https://khms0.google.com/kh/v=162&x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://google.com">Google</a>' | |
| }); | |
| var skeleton = L.tileLayer('http://mt.google.com/vt/lyrs=h@169000000&hl=en&x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://google.com">Google</a>', zIndex: 19 | |
| }); | |
| var skeleton2 = L.tileLayer('http://mt.google.com/vt/lyrs=h@169000000&hl=en&x={x}&y={y}&z={z}', { | |
| attribution: '© <a href="http://google.com">Google</a>', zIndex: 19 | |
| }); // второй слой для чекбокса | |
| var hybrid = L.layerGroup([sat, skeleton]); //.addLayer(skeleton); | |
| mapSurfer.addTo(map); | |
| var testlayer = L.geoJson(null, { | |
| style: function (feature) { | |
| return { | |
| opacity: 1, | |
| }; | |
| }, | |
| // pointToLayer is for styling markers, style - for all other shapes | |
| pointToLayer: function(feature, latlng) { | |
| return new L.Marker(latlng, { | |
| draggable: true, | |
| title: "Suka", | |
| // opacity: 0.5, | |
| riseOnHover: true | |
| }); | |
| }, | |
| onEachFeature: function (feature, layer) { | |
| layer.bindPopup(feature.properties.time); | |
| } | |
| }); | |
| var baseLayers = { | |
| "OSM": osmL, | |
| "Google Hybrid": hybrid, | |
| "MapSurfer": mapSurfer | |
| }; | |
| var overlays = { | |
| "Cities": testlayer, | |
| "Google Skeleton": skeleton2 | |
| }; | |
| L.control.layers(baseLayers, overlays).addTo(map); | |
| $.getJSON("http://dwilhelm89.github.io/LeafletSlider/points.json", function(json) { | |
| // console.log('Got json', json); | |
| testlayer.addData(json); | |
| sliderControl = L.control.sliderControl({ | |
| position: "topright", | |
| layer: testlayer, | |
| range: true, | |
| // follow: 3 | |
| // rezoom: 10, | |
| // showAllOnStart: true | |
| }); | |
| map.addControl(sliderControl); | |
| // sliderControl.startSlider(); | |
| }); | |
| // L.control.zoomBox({modal: false}).addTo(map); | |
| var miniMap = new L.Control.MiniMap(osm2, { | |
| position: 'bottomright', | |
| toggleDisplay: true, | |
| zoomLevelFixed: 6, | |
| height: 200, | |
| width: 200 | |
| }).addTo(map); | |
| var myIcon = L.icon({ | |
| iconUrl: 'http://zurb.com/playground/assets/webicons/webicon-facebook-0a000f3ca6fb1c3211f4d20878efd111.svg', | |
| // iconUrl: 'http://googledrive.com/host/0Bw8Xp7WUF3FTfjliODFUb19TMkdwU3NZazdGaUpwN0hBSlh2OGQyMXJ6VkdGMHltTjBXUGs/icon.svg', | |
| // iconRetinaUrl: 'my-icon@2x.png', | |
| iconSize: [38, 25] | |
| // iconAnchor: [22, 94], | |
| // popupAnchor: [-3, -76], | |
| // shadowUrl: 'my-icon-shadow.png', | |
| // shadowRetinaUrl: 'my-icon-shadow@2x.png', | |
| // shadowSize: [68, 95], | |
| // shadowAnchor: [22, 94] | |
| }); | |
| // var marker = L.marker([51.9, 7.9], {icon: myIcon}).addTo(map); //marker for experiments | |
| // $.getJSON("https://ru.wikipedia.org/w/api.php?action=query&prop=coordinates&format=json&colimit=max&coprop=type%7Cname%7Cdim%7Ccountry%7Cregion&titles=4-%D1%8F_%D0%B3%D0%B2%D0%B0%D1%80%D0%B4%D0%B5%D0%B9%D1%81%D0%BA%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B5%D0%BB%D0%BA%D0%BE%D0%B2%D0%B0%D1%8F_%D0%B4%D0%B8%D0%B2%D0%B8%D0%B7%D0%B8%D1%8F&generator=links&gplnamespace=0&gpllimit=max&gpldir=descending&callback=?", function(json) { | |
| // for(var page in json.query.pages) { | |
| // if(json.query.pages[page].coordinates & json.query.pages[page].coordinates[0].dim < 10000) { | |
| // console.log(json.query.pages[page].coordinates[0]); | |
| // var lat = json.query.pages[page].coordinates[0].lat; | |
| // var lon = json.query.pages[page].coordinates[0].lon; | |
| // var title = json.query.pages[page].title; | |
| // L.marker([lat, lon], {title: title}).addTo(map); | |
| // } | |
| // } | |
| // }); | |
| // | |
| //https://en.wikipedia.org/w/api.php?action=query&prop=coordinates|info|pageimages&format=json&colimit=max&inprop=url%7Cdisplaytitle&piprop=thumbnail%7Cname&pithumbsize=150&pilimit=max&generator=categorymembers&gcmtitle=Category%3ANeanderthal_sites&gcmlimit=max&callback=? | |
| //https://ru.wikipedia.org/w/api.php?action=query&prop=coordinates|info|pageimages&format=json&colimit=max&inprop=url%7Cdisplaytitle&piprop=thumbnail%7Cname&pithumbsize=150&pilimit=max&generator=categorymembers&gcmtitle=Категория:Города_Калужской_области&gcmlimit=max&coprimary=all&callback=? | |
| //Города_Московской_области | |
| //Города_Калужской_области | |
| //Места палеонтологических находок | |
| //Доисторическая_Россия | |
| //Находки неандертальцев | |
| //Памятники археологии Московской области | |
| //Городища_России | |
| //Исчезнувшие древнерусские города | |
| //Монастыри_Калужской_области | |
| //https://ru.wikipedia.org/w/api.php?action=query&format=json&colimit=max&prop=coordinates&titles=Города_Московской_области&coprop=type|name|dim|country|region&coprimary=all&callback=? | |
| //Города_Древнего_Египта | |
| //Города_Московской_области | |
| $.getJSON("https://de.wikipedia.org/w/api.php?action=query&prop=coordinates|info|pageimages&format=json&colimit=max&inprop=url%7Cdisplaytitle&piprop=thumbnail%7Cname&pithumbsize=150&pilimit=max&generator=categorymembers&gcmtitle=Kategorie:Fundstätte_homininer_Fossilien_in_Europa&gcmlimit=max&callback=?", function(json) { | |
| for(var page in json.query.pages) { | |
| if(json.query.pages[page].coordinates) { | |
| var lat = json.query.pages[page].coordinates[0].lat; | |
| var lon = json.query.pages[page].coordinates[0].lon; | |
| var title = json.query.pages[page].title; | |
| var thumb = ''; | |
| try { | |
| var height = json.query.pages[page].thumbnail.height; | |
| var width = json.query.pages[page].thumbnail.width; | |
| var source = json.query.pages[page].thumbnail.source | |
| thumb = '<img src="' +source+ '" width=' +width+ 'height=' +height+ '><br/>' | |
| } | |
| catch(err) { | |
| console.log(err.message); | |
| } | |
| L.marker([lat, lon], {title: title}).addTo(map) | |
| .bindPopup(thumb + '<a href="' + json.query.pages[page].fullurl + '" target="_blank">' + | |
| title + '</a>'); | |
| } | |
| else { | |
| console.log(json.query.pages[page].title + ' - нет координат'); | |
| console.log(json.query.pages[page]); | |
| } | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment