The Basics Of Using Leaflet.js With Open Street Maps
Recently I was put on a project that required me to visually display the user location. The Google maps API would generally be the go to for anyone who has to integrate a map view into an application. One of the major flaws of using google maps is that you would need to pay for their service. This is why I started using Leaflet.js with Open Street Maps (OSM). OSM is an open source API that is maintained by people of the community. I am not saying this is better than using the Google maps API. It was just one of the free options we decided to go with.
In this blog I'll be going over the basics with Leaflet.js. Something I should mention is that having knowledge of the Javascript language for this blog is extremely advantages as we are diving into a Javascript based library. With that being said there is no harm reading and following along as I go through it.
Now that the boring introduction is done. I want to start with all the ways you can add Leaflet.js to your project. (Please note some methods might be skipped in this blog post but you can give the Leaflet.js documentation a look for anything you want to know).
Let's start with the most simple way, the Leaflet.js CDN:
All you need to do is add this to your head tag and you are ready to start building your map view.
Or you could use the node package manager to install Leaflet.js:
npm install leaflet
However for the sake of this example I went with the simplest way, Using the CDN for Leaflet.js.
Map Setup
Step 1- Now that we have the Leaflet.js framework setup we should start with where we want our map to be displayed. This can be done by creating a <div> element with an id that can be anything but for this example I set the id="map". Here's an example of what I mean:
<!-- Body -->
<body style="background-color: #333;">
<!-- This is where you define where your map will be displayed -->
<div
id="map"
style="
background-color: white;
position: absolute;
height: 750px;
width: 900px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
"></div>
</body>
If you followed the above example you should see this:
I know it seems lame right? Well now that we have a place for our map to be displayed we can start implementing some leaflet.js code.
Step 2 - For the next step we will be diving into some Javascript as its required to set the content in our <div> element that we created (The white box).
Simply add this code to your script and you will notice something interesting that will happen to your map <div> element:
This is what you should see after you have added the above code:
If you are seeing a map populate the <div> element, then congratulations you have implemented a simple map into your application.
Map Markers
Now you may be thinking, what if I wanted to add markers to the map for a specific location? The answer is actually quite easy. Leaflet.js provides a very simple and easy to read set of functions that handle our markers. Allow me to show you an example:
This is the most simple way to setup a marker:
L.marker([-31.353636941500987, 21.4453125]) // [longitude, latitude] the coordinates shown on this example points to South Africa
.addTo(map);
If this is something you have taken interest in, then you can checkout the Leaflet.js documentation as it provides so much more information that I haven't included.
Personally I enjoyed working with Leaflet.js and most certainly will be using it again when the opportunity presents itself. Thanks for giving this a read I hope this helped or at the very least I hope you found this to be a worthwhile read.
Collin is a software developer for Lava Lamp Lab. For him there is no obstacle too big. Learning to improve and overcome those obstacles is what drives him forward.
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
3rd Party Cookies
This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.
Keeping this cookie enabled helps us to improve our website.
Please enable Strictly Necessary Cookies first so that we can save your preferences!
