A leaflet egy nyílt forráskódú JavaScript könyvtárról van szó, mely mobilbarát interaktív webes térképek megjelenítésére szolgál.
Fejlesztője : Vladimir Agafonkin
Honlapja: http://leafletjs.com/
További doksik források:
Térképi szolgáltatók:
Használata:
Minta:
<html>
<head>
<title>Ez egy Leaflet map 1.!</title>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<style>
#map{ width: 900px; height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([47.4274747,19.2058965], 15);
// load a tile layer
L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://www.openstreetmap.org/copyright">MAPC</a>, Data by <a href="http://www.openstreetmap.org/copyright">OSM</a>',
maxZoom: 15,
minZoom: 9
}).addTo(map);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Ez egy Leaflet map 2.!</title>
<!-- CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
html, body, #map, .leaflet-container { height: 100%; margin: 0; }
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
// var map = L.map('map').setView([47.4274747,19.2058965], 15); // Default position
// Creating map options
var mapOptions = {
center: [47.4274747,19.2058965],
zoom: 15
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
</script>
</body>
</html>
Minta:
Pontok csoportosítása, összevonása:
Statisztikai adatok megjelenítése:
Magasság adatok megjelenítése:
Térkép pontok kiválasztható megjelenítése
Térkép szolgáltatók listája:
Nincsenek megjegyzések:
Megjegyzés küldése
Megjegyzés: Megjegyzéseket csak a blog tagjai írhatnak a blogba.