RU:Leaflet/Пример управления отображением карт и слоев на карте при использовании leaflet

From OpenStreetMap Wiki
Jump to: navigation, search
Доступные языки — Leaflet/An example of controlling the display of maps and layers on the map when using Leaflet
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Weather map</title>
    <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 type="text/javascript">
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
    }),
  weatherLayer = new OsmJs.Weather.LeafletLayer({lang: 'ru'}),
  baseMaps = {
      "OpenStreetMap": osmLayer
    },
  overlayMaps = {
      "Метеоданные": weatherLayer
    },
  layersControl = new L.Control.Layers(baseMaps, overlayMaps),
  popup = new L.Popup(),
  map = new L.Map('map', {
      center: new L.LatLng(55.8, 37.7),
      zoom: 7,
      layers: [osmLayer]
    });
    // Массив layers: [] отображает слои на странице по умолчанию
map.addControl(layersControl);
map.on('click', (e) => {
    popup.setLatLng(e.latlng);
    popup.setContent('Координаты точки ' +
      ' (' + e.latlng.lat.toFixed(6) +
      ', ' + e.latlng.lng.toFixed(6) + ')';
    map.openPopup(popup);
  }
    </script>
  </body>
</html>

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

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