---
title: "MapTiler Marker Layout Examples | Marker layout | JavaScript maps SDK"
description: "Learn to manage non-colliding markers with advanced layout techniques."
---

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

# MapTiler Marker Layout Examples

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

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Weather icons Marker Layout

Examples Sdk-js Weather

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

 [![Create custom marker overlays using the Marker Layout](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Non filtered Marker Layout

Examples Sdk-js

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

 [![Weather custom popup](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Weather custom popup

Examples Sdk-js Weather

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

 [![How to create non-colliding marker overlays](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Filtered Marker Layout

Examples Sdk-js

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

Reset filter Founds X results.