Skip to content

Adding Markers and styling Popups

The syntax for adding a marker in MapLibreGL is as follows:

let longitude = -118.45;
let latitude = 34.05;

// Add a marker to the map
const marker = new maplibregl.Marker()
    .setLngLat([longitude, latitude])
    .addTo(map);

In this code snippet, longitude and latitude are the longitude and latitude coordinates of the marker. You can add multiple markers to the map by repeating this code snippet with different coordinates.

Resources to find coordinates

  • Google Maps: Right-click on the location and select “What’s here?” to get the coordinates. Google Maps
  • OpenStreetMap: Right-click on the location and select “Show address” to get the coordinates. OpenStreetMap
  • Get Lat Long: Enter the address to get the coordinates. GetLatLong

What is a geographic coordinate?

A coordinate is a set of numbers that specifies the location of a point on the Earth’s surface. Coordinates are usually given in latitude and longitude, which are measured in degrees. Latitude specifies the north-south position, while longitude specifies the east-west position.

One way to remember the difference between latitude and longitude is to think of the alphabet. Latitude comes first, just like the letter “A,” and it specifies the north-south position. Longitude comes second, just like the letter “B,” and it specifies the east-west position.

My personal way to remember the difference is that latitude goes north to south like altitude goes up and down, while longitude goes east to west like long things going across left to right.

Reversed Coordinates

In MapLibreGL, the order of coordinates is [lng, lat], which is the opposite of the usual [lat, lng] order. Make sure to use the correct order when adding markers to your map.

⚽ In-Class Exercise #1

Task

  1. Can you shorten the code, by replacing the longitude and latitude variables inside of the setLngLat function with the coordinates of your favorite place?

(click to reveal solution)

Solution 
// Add a marker to the map
const marker = new maplibregl.Marker()
    .setLngLat([-118.45, 34.05])
    .addTo(map);

Optional: Styling Popups

Remember you can add popups to your markers in MapLibreGL using the following code snippet:

// Add a marker to the map
const marker = new maplibregl.Marker()
    .setLngLat([-118.45, 34.05])
    .setPopup(new maplibregl.Popup({ offset: 25 }) // Add popups
    .setHTML('Hello! This is an HTML popup, meaning I can add any <tags> I want here! Just be sure to close them </tags>'))
    .addTo(map);

Let’s add a class to the popup to style it. The following code snippet shows how to add a class to the popup:

// Add a marker to the map
const marker = new maplibregl.Marker()
    .setLngLat([-118.45, 34.05])
    .setPopup(new maplibregl.Popup({ offset: 25 }) // Add popups
    .setHTML('<div class="awesomePopup">Hello! This is an HTML popup, meaning I can add any <tags> I want here! Just be sure to close them </tags></div>'))
    .addTo(map);

In this code snippet, the awesomePopup class is added to the popup. You can then style the popup using CSS. For example, you can change the background color, font size, and padding of the popup.

⚽ In-Class Exercise #2

Task

  1. Can you style the popup using CSS?

(click to reveal solution)

Solution 
.awesomePopup {
    background-color: #f8f9fa;
    color: #212529;
    font-size: 16px;
    padding: 10px;
}

Summary

In this lab, you learned how to add markers and style popups in MapLibreGL. You can use this knowledge to enhance your maps and create interactive visualizations. Remember to practice adding markers and popups to your map to reinforce your understanding of the concepts.

🏁Checkpoint

  • You should now be able to add markers to your map in MapLibreGL.
  • You should now be able to style popups in MapLibreGL with CSS.

Check your work

Your code should look like this before moving on:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World with MapLibreGl</title>
        <!-- hint: remember to change your page title! -->
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="#">
        <link rel="stylesheet" href="styles/style.css">

        <!-- MapLibreGL's css-->
        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />

        <!-- MapLibreGL's JavaScript-->
        <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
    </head>

    <body>
        <header>
            Hello World
            <!-- hint: you can make a menu with other links here if you'd like -->
        </header>

        <main>
            <div class="portfolio">
                <!-- Portfolio content goes here -->
                <img src="me.png">
            </div>
            <div id="map"></div>
        </main>
        <div id="footer">
            Copyright(2024)
        </div>
        <script src="js/init.js"></script>
    </body>
</html>
js/init.js
// Initialize the map
const map = new maplibregl.Map({
    container: 'map', // container ID
    style: 'https://api.maptiler.com/maps/streets/style.json?key=wsyYBQjqRwKnNsZrtci1', // Your style URL
    center: [ -118.444, 34.0709], // Starting position [lng, lat]
    zoom: 15 // Starting zoom level
});

// Add a marker to the map
new maplibregl.Marker()
    .setLngLat([ -118.444, 34.0709])
    .setPopup(new maplibregl.Popup({ offset: 25 }) // Add popups
        .setHTML('Math Sciences 4328 aka the Technology Sandbox<br> is the lab where I used to work in '))
    .addTo(map);
styles/style.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
* {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: aqua;
}

html, body {
    height: 80vh;
    padding: 1rem;
    box-sizing: border-box;
}

body {
    display: grid;
    grid-template-areas: 
        "header"
        "main"
        "footer";
    grid-template-rows: auto 1fr auto;
}

main {
    display: grid;
    grid-template-areas:
        "portfolio map";
    grid-template-columns: 1fr 1fr;
}

header { 
    grid-area: header;
}

main { 
    grid-area: main;
}

.portfolio {
    grid-area: portfolio;
}

#map { 
    grid-area: map;
    height: 80vh;
}

footer { 
    grid-area: footer;
}