Introduction
Ola Campus Pune is known for its innovation in the mapping and geospatial industry. We have a diverse team of software engineers, data scientists & GIS Technologists; trying different tools & experimenting with other technologies is something we always promote. MapLibre GL JS is one such library we are working with, and it is an open-source mapping library for web & mobile applications.
We use Maplibre-gl-js for map functionality in multiple internals or external applications.
- What is Map Libre?
- Why MapLibre?
-
Hands-on that will cover
- Displaying Classic Map on your website
- Changing styles to satellite view
- Marking location on the map
Takeaways
What is Maplibre-gl-js?
MapLibre GL JS is an open-source library for embedding and publishing maps on your web & mobile application. With their GPU-accelerated vector tile rendering, maps can be displayed pretty fast.
It uses most of the data from OpenStreetMap. In case you don’t know, you can refer to this blog.
It originated as an open-source fork of Mapbox-gl-js before they switched to a non-open-source license on 8th December 2020.
You can contribute & learn more about Maplibre here.
Why MapLibre?
MapLibre is an SDK that allows you to embed maps on mobile/ web applications. It is an open-source library with multiple User interface elements that can be added to the map. While there are numerous alternatives for MapLibre but MapLibre is free & a community-driven initiative supported by various organizations like Meta and AWS.
MapLibre is expanding with multiple projects related to mapping, such as MapLibre Native for Mobile, maplibre-gl-directions for routing, maplibre-gl-geocoder for geocoding etc., making it a complete package for any mapping projects. Check the full list of projects here.
As MapLibre is a community-driven project it thrives on donations, in case you like the project please donate here.
There are a multiple ways MapLibre can be used in multiple ways here are some examples:
Adding a 3D Object on Map
Map Animations
But before getting deeper into the topic let us start with some basics
Hands-on
Before getting started, please be ready with an HTML editor with the latest JavaScript support. We are using Codepen, which is an online HTML Editor.
Getting Started
Start with an HTML template to keep things handy:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
Include the JavaScript & CSS file in the head of the HTML document
<script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
Add viewport under <head>
The viewport is the screen area where the application’s content can be seen. The viewport differs in different devices. Sometimes viewport is not sufficient for the content which is to be rendered. In such cases, the browser provides a Scroll bar. This tag gives browser instructions to control page dimensions and width.
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
Create a div element for map in the body of the html document
<div id="map"></div>
Adding Styles
Add these styles to your CSS file or under the style tag
body { margin: 0; padding: 0; height: 100vh; width: 100vw; }
canvas { outline: none; }
#map { height: 100%;width: 100%; }
Scripts
Add the following javascript to your file. The default center of the map can be changed as per need. The current embed has OLA Campus Pune as its center.
The default zoom level can also be changed as per requirement.
var map = new maplibregl.Map({
container: 'map',
style:
'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [73.792170,18.558740],
zoom: 10
});
This is how the output of the map look like
Satellite View
The default styling here is the street,but we can change and choose from all the available options. In case a satellite view is needed for the map we will just change the style provided in the javascript to:
style:
'https://api.maptiler.com/maps/hybrid/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
Here is the output:
Adding a default marker
Incase a default marker is needed, it can be done using a simple variable
var marker = new maplibregl.Marker()
.setLngLat([73.792170,18.558740])
.addTo(map);
Output:
Summing up
We at OLA Campus Pune work with many exciting technologies; MapLibre is one of the best tools to work in case one wants to integrate maps with their applications. In this blogpost, we brushed up on some basics about MapLibre GL JS.
We look forward to sharing more of our workflows in the coming days. If you have some feedback or have found this blog post of your interest, do Connect with Us!
Top comments (0)