Meridian Web SDK Examples

Documentation

Read the documentation on GitHub.

Examples

Basic

A basic demo of the Meridian Web SDK.

Placemark Customization

A demo showing you can target placemark css using .meridian-placemark-icon[data-meridian-placemark-id="add placemark id here"] to customize the UI

Placemark Label Zoom Level

A demo showing how you can modify the zoom level at which label text appears.

API as an option

A demo of using the api parameter directly, for use cases where you need multiple API tokens, or don't want to call init.

Option toggles

A demo showing how to change several options dynamically while using the SDK.

Overlay: Polygon

A demo showing how to draw a polygon overlay.

Overlay: Area

A demo showing how to draw a placemark area overlay.

Overlay: Polyline

A demo showing how to draw a polyline.

Overlay: Point & Polygon by Lat/Lng

A demo showing how to create an annotation point or draw a polygon using a real world latitude and longitude.

Annotation: Point

A demo showing how to create a point annotation.

Annotation: Kiosk

A demo showing how to create a custom 'you are here' marker.

Tag/Marker click

A demo showing how to hook into extra functionality of the click callbacks.

Load Tags

Option to avoid loading Tags

Tag/Marker click, prevent default functionality

A demo showing how to replace the click callback functionality with entirely custom behavior.

Tag/Marker click, prevent default and show additional options

A demo with an additional example of how a Tag/Marker click callback can be customized.

Tag label (single)

A demo showing how to filter tags by labels.

Tag labels (multiple)

Another demo showing how to filter tags by labels.

Tag name (single)

A demo showing how to filter tags by name.

Tag Customization

A demo showing you can target tag css using .meridian-tag-label-"add tag label name here" to customize the UI

Hide Search

A demo showing how to hide the Search menu icon.

Hide Floors

A demo showing how to hide the Floor menu icon.

Restricted Pan/Zoom

A demo showing how to prevent unwanted pan and zoom gestures.

Container styling

A demo showing how to style the map container.

Full page

A demo showing how to make the SDK take up the entire page.

Dark theme

A demo of how to create a dark mode theme for the SDK.

Advanced styling

An advanced styling demo.

[BETA] Directions Overview (Single Floor)

A demo showing how to use api.getDirections() to display a route. To submit feedback please visit: https://forms.gle/amwwJ8FsQebNCNzz5

[BETA] Directions Overview (Multiple Floors)

A demo showing how to use api.getDirections() to display a route that navigates across multiple floors. To submit feedback please visit: https://forms.gle/amwwJ8FsQebNCNzz5

api.openStream()

A demo showing how to use api.openStream().

api.openStream(), Tag Zone example

A demo showing how to use api.openStream() to track Zone updates.

Location viewer

A demo allowing you to preview any floor.