MapTiler Marker Layout for MapTiler SDK

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, etc. as it computes the position and size of the markers but lets you handle the rendering part.

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

On this page