Web SDK Demos
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.
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.
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.
You can style the map container.
Go here for a map with a different container style.
You can change the size of the embedded map.
Go here for a full page map.
You can style your map in any number of ways.
Go here to see a map with extreme style choices.
You can customize the map to match your web site's style.
For example, go here to see a map with a dark theme.
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.