---
title: "MapTiler Marker Layout for MapTiler SDK | Marker layout | JavaScript maps SDK"
description: "Create non-colliding marker overlays in the MapTiler SDK."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# MapTiler Marker Layout for MapTiler SDK

 ![NpmLogo](https://docs.maptiler.com/assets/img/npm.svg) [Get it from npm registry](https://www.npmjs.com/package/@maptiler/marker-layout)  
![GitHubLogo](https://docs.maptiler.com/assets/img/github.svg) [View source code on GitHub](https://github.com/maptiler/maptiler-marker-layout)

The Marker Layout is a helper to create non-colliding marker overlays on top of [MapTiler SDK](https://docs.maptiler.com/sdk-js/). 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 [1](#fn:1), 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

Check out the [How to create non-colliding marker overlays example](https://docs.maptiler.com/sdk-js/examples/marker-layout-basic/). In this get started we will create a Marker Layout to display the information from the city and town label layers.

## API reference

This [reference](./api/) 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

 [![Create custom marker overlays using the Marker Layout](https://docs.maptiler.com/assets/img/example-card.png)

### Non filtered Marker Layout

Example

Create custom non-colliding marker overlays on your map using the Marker Layout on top of MapTiler SDK. .](https://docs.maptiler.com/sdk-js/examples/marker-layout-many/)

 [![How to create non-colliding marker overlays](https://docs.maptiler.com/assets/img/example-card.png)

### Filtered Marker Layout

Example

Create non-colliding marker overlays to display the information from the city and town label layers.](https://docs.maptiler.com/sdk-js/examples/marker-layout-basic/)

 [![Weather custom popup](https://docs.maptiler.com/assets/img/example-card.png)

### Weather custom popup

Example

Create highly customizable popups for weather maps using MarkerLayout.](https://docs.maptiler.com/sdk-js/examples/weather-custom-popup/)

 [![Weather map with custom icons, animated SVGs or Lotties via Marker Layout](https://docs.maptiler.com/assets/img/example-card.png)

### Weather icons Marker Layout

Example

Create a weather map using the Marker Layout to show your custom weather markers icons, animated SVGs or Lotties.](https://docs.maptiler.com/sdk-js/examples/marker-layout-weather/)

1.  **Lottie** is a file format for vector graphics animation. They can be scaled without pixelation or loss of quality, just like an SVG file. It is intended as a lighter alternative to animated GIFs and APNG files for use in the web and mobile and desktop applications. Read more about [Lottie file format](https://en.wikipedia.org/wiki/Lottie_\(file_format\)). [↩](#fnref:1)