MapTiler Marker Layout for MapTiler SDK

maptiler/maptiler-marker-layout

The Marker Layout is a helper to create non-colliding marker overlays on top of MapTiler SDK. Fed by a vector layer from a tileset or a GeoJSON source, it can be tuned with plenty of options. Thanks to its non-opinionated and logic-only approach, it lets you bind any kind of rendering you wish for your markers: vanilla HTML div, React components, floating canvas, animated SVGs or Lotties ¹, etc. as it computes the position and size of the markers but lets you handle the rendering part.

In MapLibre you can create markers with a custom image and even represent them with some HTML (text, SVGs, Lotties, etc). The problem is that there is no collision detection and having too many markers on the map makes it difficult to understand at all scales. Using a symbol layer you can detect collisions and only show some elements (the most relevant ones, etc) but the possibility of creating markers using html is limited. Using the Marker Layout helper you have the best of both worlds; create your markers with HTML, Lotties (animated images), text, etc and thanks to the collision detection create a map that is understandable and usable at all scales.

Get started

In this get started we will create a Marker Layout to display the information from the city and town label layers. Simply use the code below the map.

Usage

1. Install from MapTiler Cloud CDN with vanilla JS

2. Use the UMD global variable maptilermarkerlayout

3. Install the npm package.

4. Include the following code in your JavaScript file (Example: app.js).

API Reference

This reference documents every object and method available. Each section describes classes or objects as well as their properties, parameters, methods, and associated events. Many sections also include inline code examples and related resources.

Some Concepts

The Marker Layout…

• computes screen-space bounding box logic
• can be provided the desired marker size and relative anchor point
• is fed with one or multiple vector layer
• can only use point features
• create non-overlapping bounding boxes
• can filter and sort features based on vector feature properties
• sorting can be done with a function, so that rank can come from an external source
• can group multiple vector features into each marker
• when updated will retrieve three lists of markers relative to the previous state: the new, the removed and the moved markers
• does not enforce how the actual visual markers (eg. div) should be created, cached, pooled, reused or deleted

Related examples

Marker Layout (no filter)

Example

Create custom non-colliding marker overlays on your map using the Marker Layout on top of MapTiler SDK. .

Marker Layout (filter)

Example

Create non-colliding marker overlays to display the information from the city and town label layers.

Weather custom popup

Example

This example demonstrates using custom popups on top of a map because MapLibre's popups were originally quite limited in layout and style.

Marker Layout weather icons

Example

Create a weather map using the Marker Layout to show your custom weather markers icons, animated SVGs or Lotties.