RU:Leaflet/Пример управления отображением карт и слоев на карте при использовании leaflet
Jump to navigation
Jump to search
Пример 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'});