Leaflet/Exmple

From OpenStreetMap Wiki
Jump to: navigation, search

Пример html-страницы с отображения метеоданных http://openweathermap.org с помощью RU:Leaflet в виде интерактивно подключаемых\отключаемых слоев.

<html>

<head>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />

    <!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->

    <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="http://openweathermap.org/js/leaflet-layer.js"></script>

</head>

  <body>

    <div id="map" style="width: 100%; height: 100%"></div>

    <script>

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

            osmAttribution = 'Map data <a target="_blank" href="http://www.openstreetmap.org">OpenStreetMap.org</a>; contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',

            osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});

                var l_w = new OsmJs.Weather.LeafletLayer({lang: 'ru'});

                var map = new L.Map('map', {center: new L.LatLng(55.8, 37.7), zoom: 7, layers: [osmLayer]});

                var baseMaps = {

                        "OpenStreetMap": osmLayer

                        };

                var overlayMaps = {

                        "Метеоданные": l_w

                        };

                layersControl = new L.Control.Layers(baseMaps, overlayMaps);

                map.addControl(layersControl);

    map.on('click', onMapClick);

    var popup = new L.Popup();

    function onMapClick(e) {

    var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';

        popup.setLatLng(e.latlng);

        popup.setContent("Координаты точки " + latlngStr);

        map.openPopup(popup);

    }

    </script>

  </body>

</html>


Внимание: Кириллицу в коде нужно перевести в utf-8 или использовать en в строке :

var l_w = new OsmJs.Weather.LeafletLayer({lang: 'en'});