Skip to content

Instantly share code, notes, and snippets.

@Vnr

Vnr/index.html

Created April 14, 2015 00:53
Show Gist options
  • Save Vnr/94e86a68e8fc45139a6b to your computer and use it in GitHub Desktop.
Save Vnr/94e86a68e8fc45139a6b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Vnr created this gist Apr 14, 2015.
    479 changes: 479 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,479 @@
    <!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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });
    var osm2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <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: '&copy; <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: '&copy; <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: '&copy; <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: '&copy; <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: '[email protected]',
    iconSize: [38, 25]
    // iconAnchor: [22, 94],
    // popupAnchor: [-3, -76],
    // shadowUrl: 'my-icon-shadow.png',
    // shadowRetinaUrl: '[email protected]',
    // 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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });
    var osm2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <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: '&copy; <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: '&copy; <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: '&copy; <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: '&copy; <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: '[email protected]',
    iconSize: [38, 25]
    // iconAnchor: [22, 94],
    // popupAnchor: [-3, -76],
    // shadowUrl: 'my-icon-shadow.png',
    // shadowRetinaUrl: '[email protected]',
    // 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>
    16 changes: 16 additions & 0 deletions jsbin.xalesi.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <style>

    body {
    padding: 0;
    }

    html, body, #map {
    height: 100%;
    overflow: hidden;
    margin: 0 ;
    }

    .leaflet-control-layers {
    margin-top: 25px !important;
    }
    </style>
    171 changes: 171 additions & 0 deletions jsbin.xalesi.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,171 @@
    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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });
    var osm2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <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: '&copy; <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: '&copy; <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: '&copy; <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: '&copy; <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: '[email protected]',
    iconSize: [38, 25]
    // iconAnchor: [22, 94],
    // popupAnchor: [-3, -76],
    // shadowUrl: 'my-icon-shadow.png',
    // shadowRetinaUrl: '[email protected]',
    // 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]);
    }
    }
    });