Web SDK Demos Follow

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

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.

The Basic Map

The basic Meridian map includes search, a floor level picker, zoom buttons, and placemarks. If Aruba Tags have been enabled for a map, you’ll see those too.

Go here for the basic map.

Option Toggles

The Web SDK includes option toggles to control what you see on the map and whether placemarks and Aruba Tags are clickable.

Hide all placemarks: Don’t show placemarks.

Show all placemarks: Display all placemarks on the map, regardless of zoom level.

Show placemarks of type X: Only shows placemarks of a specific type, such as cafe or water fountain.

Hide all Tags: Don’t show Tags.

Show all Tags: Display all Tags on the map.

Show Tags labeled X: Only shows Tags with a specific label.

Show Tag [with a specific MAC]: Only show a Tag with the matching MAC value.

Show Control Tags: Control Tags are used to improve accuracy and can’t be moved. Shows the Control Tags on the map.

Show Hidden Placemarks: Display hidden placemarks on the map.

Disable clicking on Placemarks: Prevents tapping or clicking on placemarks.

Disable clicking on Tags: Prevents tapping or clicking on Tags.

Go here for a map with option toggles.

Tag Label Dropdown

The Tag label dropdown menu shows all of the Tag labels for a map and limits Tags shown on the map to a single label.

Go here for a map with a Tag label dropdown menu.

Tag Name Dropdown

The Tag name dropdown menu shows all of the Tag names for a map and limits Tags shown on the map to a single name.

Go here for a map with a Tag name dropdown menu.

Tag Label Checkboxes

The Tag label checkboxes show all the Tags on the map with the selected labels.

Go here for a map with Tag label checkboxes.

Restricted Pan/Zoom

If your map is embedded in a long page, you may want to turn off panning and zooming within the map.

Go here for a page that demonstrates maps with panning and zooming turned off.

Container Styling

You can style the map container.

Go here for a map with a different container style.

Map Size

You can change the size of the embedded map.

Go here for a full page map.

Advanced Styling

You can style your map in any number of ways.

Go here to see a map with extreme style choices.

Dark Theme

You can customize the map to match your web site’s style.

For example, go here to see a map with a dark theme.

Location Viewer

Use this tool to create a web SDK map using specific location and floor IDs.

Environment: Use “production” or “eu”. (Unless you know that your Meridian organization uses the EU server, use “production”.)

Token: If you don’t have a Meridian token, in the Meridian Editor sidebar, click Permissions, and then click the Application Tokens tab. If you don’t have a token, click Add + to create one.

Location ID: In the Meridian Editor sidebar, click Location. Look for the LOCATION ID field.

Floor ID: In the Meridian Editor sidebar, click Floors. Click a specific floor. In your browser’s address bar, you can find the Floor ID here:

https:// edit.meridianapps.com /apps/ location ID /versions/1/maps/ floor ID

Go here for the Location Viewer.

Maps from Different Locations

Using Meridian application tokens, it’s possible to show two or more maps from different Organizations on a single web page.

Go here for an example of how to do that.