Skip to content

Adding a new MapLibreGL JavaScript Plugin

Plugins are a great way to add extra functionality to your MapLibreGL map.

Here are some examples:

Visualizations

General JavaScript Functions

To keep things simple, we will add a cluster marker functionality to our MapLibreGL map. Clustering makes it easier to see when multiple points are in the same area.

With just a few changes our map will look as follows: alt text

As with when we first used MapLibreGL we need to include the library, so in our html add the following lines:

index.html
        <!-- Overlapping Markers JavaScript -->
        <script src="https://unpkg.com/maplibre-randomize-overlapping-markers/dist/bundle.js"></script>

Next, let’s read the documentation on how to use the cluster maker:

alt text

Judging from this code, we need to turn our init.js into a module.

<script type="module" src="js/init.js"></script>

Next we need to add the following code to our init.js:

js/init.js
    const [modifiedLongitude, modifiedLatitude] = PointManager.addPointData(longitude, latitude, 25);

    const marker = new maplibregl.Marker()
        .setLngLat([modifiedLongitude, modifiedLatitude])
        .addTo(map);

And… wow that’s it!

This flexibility is what makes opensource tools and plugins so great! However, be warned that not all plugins will be as simple to plug and play.

Congrats!

After you’ve made this change the time has come to make a pull request!

CSS Grid Tip

When you have many items in a row, you can use the grid-template-columns property to make sure they are spaced out evenly.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

You can also use CSS grid to make evenly spaced items for a responsive design.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

This will make sure that the items are at least 200px wide, but will expand to fill the space if there is more room.

You can also specify the number of items like so:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* Optional: Adds space between grid items */
}

Additional Resources