In our daily life, most of us usually use Google Map or Apple Maps to help us to navigate to a place. We can see traffic info, public transit and also choose our mode of transportation.

Recently, I was looking for ways to embed a Map to my website that contains multiples of custom locations. There are varieties of technologies to choose, such as Amaxon location service, Google Map API and MapLibre GL JS, etc. In this post, I would like to discuss how to use MapLibre GL JS to embed and create custom dynamic maps on our websites mostly for free.

MapLibre GL JS

MapLibre GL JS is an open-source library for publishing maps on your websites. The maps uses vector tileset source over GeoJSON data soruces when possible and are fast rendering in browser has become possible thanks to GPU.

Quick Start

Before begining shortly, we have to register an account in Maptiler, get an default API Key to protect which is used for accessing maps, tiles, and data from your account. Then, using the API key in code is shown below.

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a default marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
 
<script>
var map = new maplibregl.Map({
    container: 'map',
    style:
    'https://api.maptiler.com/maps/streets/style.json?key=YOUR_OWN_MAPTILER_API',
    center: [12.550343, 55.665957],
    zoom: 8
});
 
var marker = new maplibregl.Marker()
    .setLngLat([12.550343, 55.665957])
    .addTo(map);
</script>
 
</body>
</html>

Futher copy the code, paste it into your favorite text editor, and save it as .html file. (remember to replace YOUR_OWN_MAPTILER_API with your actual API key). Next, we can ues iframe for integration with the post.

1
2
3
<div style="overflow-x:auto;">
    <iframe src="/javascript/maplibre/add-default-marker.html" style="width:100%; height:512px", title="add-default-marker"></iframe>
</div>

Simple Example

The embedded map for this simple example looks like this.

<iframe src="/javascript/maplibre/add-default-marker.html" style="width:100%; height:512px", title="add-default-marker"></iframe>

Custom Example

We can also customize the marker to a Map. Similar to the above example, I created another custom example map with marked places where I have visited recently nearby.

<iframe src="/javascript/maplibre/add-custom-marker.html" style="width:100%; height:512px", title="add-custom-marker"></iframe>

Now, we know how to simply embed the custom dynamic maps on our websites. Hope this post will be helpful.

Reference

Thanks for reading! Feel free to leave the comments below or email to me. Any pieces of advice or discussions are always welcome. :)