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.

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.

Overlay: Point X/Y to by Lat/Lng conversion - A demo showing how to get a latitude and longitude from a screen X/Y.

Annotation: Point - A demo showing how to draw 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.

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.

Directions Overview (multiple floors) - A demo showing how to useapi.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 useapi.openStream()to track Zone updates.

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