Web SDK Demos Follow

To help you get started with the Meridian Web SDK, we’ve created several demos to give you some ideas.

https://arubanetworks.github.io/meridian-web-sdk/examples

The Demo Pages

Each of the Web SDK demos shows a Meridian map with different features enabled.

Click or tap Code to see the code for each demo.

Click or tap Perf to see the demo’s frames per second (FPS) performance.

List of Examples

Below is a list of all the examples that can be found at the link above

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 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.

Annotation: Point - A demo showing how to draw a point annotation.

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

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.

Advanced styling - An advanced styling demo.

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

Directions Overview (single floor) - A simple demo showing how to use `api.getDirections()` to display a route.

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

Location viewer - A demo allowing you to preview any floor.