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 · Basa Sunda · Baso Minangkabau · bosanski · brezhoneg · català · čeština · corsu · 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 bokmål · norsk nynorsk · occitan · Oromoo · oʻzbekcha/ўзбекча · Plattdüütsch · polski · português · română · shqip · slovenčina · slovenščina · Soomaaliga · suomi · svenska · Tagalog · 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]
    });
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'});