DEV Community

Cover image for Getting Started with MapLibre GL JS
Khalid🥑💻 for Ola Campus Pune

Posted on

Getting Started with MapLibre GL JS


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


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">



Enter fullscreen mode Exit fullscreen mode

Include the JavaScript & CSS file in the head of the HTML document

<script src=''></script>
<link href='' rel='stylesheet' />

Enter fullscreen mode Exit fullscreen mode

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" />

Enter fullscreen mode Exit fullscreen mode

Create a div element for map in the body of the html document

<div id="map"></div>

Enter fullscreen mode Exit fullscreen mode

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%; }

Enter fullscreen mode Exit fullscreen mode


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',
        center: [73.792170,18.558740],
        zoom: 10

Enter fullscreen mode Exit fullscreen mode

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:


Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode


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)