Using Leaflet.js to show maps in a webpage
Maps are incredibly helpful for showing locations on a website. Use cases of maps include showing the location of an office address, which is a better option than just showing an image or a text address. It can also be used for marking points of interest in a tourist location so that the visitor can plan by looking at all the nearby areas.
We will start by defining the area where the map has to be displayed. We first create a div with an id of “map” so that it could be accessed by the script. We will then define the height and width of the map object. Otherwise, the map would not display. We can specify any dimension required here.
The map can be shown full screen on a mobile device, like a web application. This is possible by making the body element and the div containing the map fill both the height and width of the screen completely. This can be done by giving both these values as 100% or 100 view units.
- We will start by initializing the map with the map() method. The id we have to declare earlier is given to this method as a parameter. This initialized map is stored in a variable, which can be used later to add more functionalities.
// Initialize the leaflet map
const map = L.map(
- Running the code now would show an empty area with the map controls. This means that our plugin has been successfully initialized. The reason we don’t see any map information is that we have to specify tile information.
- The whole map of the world is not possible to be loaded at once. Hence, it is divided into multiple tiles. Only the tiles in the user’s current view are updated. This saves bandwidth and makes the entire process of loading maps faster.
- This is done through an API that keeps providing and updating the tile images for the given parameters. We will be using the OpenStreetMap API to get our tilemaps for the map.
- The L.tileLayer() method accepts a URL to the API and automatically gets the required tilemap for the current user position.
- Using OpenStreetMap requires one to attribute them for their work, hence we will be attributed for them in the attribution parameter of the method. This tile layer will be added to the map using the addTo() method in the end.
- The last step one has to do before setting up the map is setting a view, that is the area of the world that has to be displayed. This is done using the setView() method. This method takes in a pair of latitude and longitude and a zoom value. The zoom value determines how close the view is to the surface. Increasing this value gets the view more closer to the ground.
- Let us set the view to that of the Eiffel Tower which has the co-ordinates 48.8584 and 2.2945. The zoom value is set to 16 for a decent view.
// Get the tile layer from OpenStreetMaps
// Specify the maximum zoom of the map
// Set the attribution for OpenStreetMaps
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
// Set the view of the map
// with the latitude, longitude and the zoom value
map.setView([48.8584, 2.2945], 16);
- Reopening the webpage, we will finally see a map that has all the information for the current location, and the Eiffel Tower at the center of the map.
Show current user location
The leaflet can also show the view based on the current location by using locate() method. It takes in an object that has setView property set to true and a maxZoom value set to a maximum value. This command will ask for the user’s location and automatically set the view to that location.
Showing markers on the map
Leaflet can be used to mark points on the map. This is done using the marker() method. It accepts the coordinates where the marker would be shown.
We can also add a popup to the marker that would show the name of the marker by using the bindPopup() method. This popup can be opened by default using the openPopup() method.
Hence, we have successfully created a map using the Leaflet.js library and learnt to view a specific position of the world.