Web sayfanıza harita ekleyip bu harita içerisinde bazı noktaları işaretlemek, harita üzerine çizimler yapmak istiyorsanız bunu Leaflet uygulaması ile kolaylıkla yapabilirsiniz. Sadece aşadaki HTML kodu kendi sitenize uyarlamanız yeterli. Harita üzerindeki gösterimler için siteyi ziyaret edin, çok basit bir şekilde harita üzerinde istediğiniz tüm gösterimleri yapabilirsiniz. Çok basit, çok hızlı. Aşağıdaki kodda center: alanı koordinat bilgisidir.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
</head>
<body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
// Creating map options
var mapOptions = {
center: [41.332453, 28.577112],
zoom: 10
}
// 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>
<head>
<title>Leaflet</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
</head>
<body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
// Creating map options
var mapOptions = {
center: [41.332453, 28.577112],
zoom: 10
}
// 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>
Sayfanızda SSL çalışıyorsa yukarıdaki kodda aşağıdaki link ve script yerine aşağıdaki bölümleri kullanın.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
Ayrıntılı bilgi için : https://leafletjs.com/
