- \n
- In the head section of your html page include\u00a0Leaflet CSS file.\n
[code language=”javascript”]
\n <link rel="stylesheet" href="http:\/\/cdn.leafletjs.com\/leaflet\/v0.7.7\/leaflet.css" \/>
\n [\/code]<\/p>\n<\/li>\n<\/ul>\n- \n
- Include\u00a0Leaflet \u00a0JavaScript file.\n
[code language=”javascript”]
\n <script src="http:\/\/cdn.leafletjs.com\/leaflet\/v0.7.7\/leaflet.js"><\/script>
\n [\/code]<\/p>\n<\/li>\n<\/ul>\n- \n
- Add\u00a0div Element with some Id in which you want to render your map.\n
[code language=”javascript”]
\n <div id="myMap"><\/div>
\n [\/code]<\/p>\n<\/li>\n<\/ul>\n- \n
- Make sure your\u00a0map container has a defined height. You can use CSS like this:\n
[code language=”javascript”]
\n #myMap { height: 250px; }
\n [\/code]<\/p>\n<\/li>\n<\/ul>\nNow, let’s start with initializing the map.<\/p>\n
Initializing the map<\/strong><\/p>\n
First, initialize your map and set its view to some geographical coordinates and a zoom level.<\/p>\n
[code language=”javascript”]
\nvar map = L.map(‘myMap’).setView([51.505, -0.09], 13);\/\/\u00a0center of London with zoom level 13[\/code]<\/p>\nNext, add a tile layer to map, in this case OpenStreetMap tile layer. Adding a tile layer involves setting the URL template for the tile images and the attribtution :<\/p>\n
[code language=”javascript”]
\nL.tileLayer(‘http:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png’, {
\n attribution: ‘© <a href="http:\/\/osm.org\/copyright">OpenStreetMap<\/a> contributors’
\n}).addTo(map);
\n[\/code]<\/p>\nMake sure all these lines of code is\u00a0called\u00a0after the div and the javascript file leaflet.js inclusion. Now, map will get rendered inside your map container.<\/p>\n
Adding marker<\/strong><\/p>\n
Marker can easily be added by setting lat-lng.\u00a0Let\u2019s add a marker:<\/p>\n
[code language=”javascript”]
\n var marker = L.marker([51.5, -0.09]).addTo(map);
\n [\/code]<\/p>\nAdding popups<\/strong><\/p>\n
Popups are used when you want to add some additional information with an object on the map. Attaching popup to objects is very simple in Leaflet:<\/p>\n
[code language=”javascript”]
\n marker.bindPopup("<strong>Hello world!<\/strong><br>I am a popup.").openPopup();
\n [\/code]<\/p>\nAfter, doing all the above stuffs your final map will look something like this:<\/p>\n
![\"map\"](\"\/blog\/wp-ttn-blog\/uploads\/2016\/06\/leaftlet.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"Leaflet is a open source Javascript library that can be used to create interactive maps. It comes\u00a0with all\u00a0mapping features that most of us need in any project like adding markers, \u00a0popups, vector layers, zooming, selecting lat-lng of a place and much\u00a0more. In this blog, we will learn how to get started with Leaflet maps and […]<\/p>\n","protected":false},"author":229,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":12,"footnotes":""},"categories":[1],"tags":[3616,3614,3615,3626],"class_list":["post-36657","post","type-post","status-publish","format-standard","hentry","category-technology","tag-interactive-maps","tag-javascript-maps","tag-leaflet-maps","tag-maps"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
- Make sure your\u00a0map container has a defined height. You can use CSS like this:\n
- Add\u00a0div Element with some Id in which you want to render your map.\n
- Include\u00a0Leaflet \u00a0JavaScript file.\n