@meridian/web-sdk

The Meridian Web SDK officially supports evergreen versions of Firefox, Google Chrome, Microsoft Edge, and Safari browsers.

Overview

The Meridian Web SDK is a JavaScript library you can use to add dynamically updating and interactive Meridian maps to your site.

Installation

Install from npm:

npm install @meridian/web-sdk

And then for CommonJS imports use:

const MeridianSDK = require("@meridian/web-sdk");

Or for ES modules imports:

import * as MeridianSDK from "@meridian/web-sdk";

If you would like a standalone JS file with all dependencies bundled that you can use from a script tag, download the latest version and include it:

<script src="meridian-sdk.js"></script>

Which will make a global object called MeridianSDK.

Get Started

Before you can use the Meridian Web SDK, you'll need to obtain a read-only API token from the Meridian Editor.

You can find the location and floor IDs for a specific map by opening that map in the Meridian Editor. The URL for the floor page contains the IDs you'll need:

https://edit.meridianapps.com/w/location/Location-ID/floor/Floor-ID

Examples

You can check out our examples to see example applications of the Web SDK.

Web SDK Theming

Meridian Web SDK theming is done with Cascading Style Sheets (CSS).

Meridian external hook CSS classes are prefixed with meridian-.

Styles prefixed with meridian--private-- are minified internal styles that you shouldn't use.

Given the complexity of CSS style interactions, Meridian can't guarantee style customizations won't be affected between minor version upgrades, but we'll make an effort to keep the external CSS hooks available for any necessary minor style tweaks.

Target All Maps

To target all Meridian maps on one page, you'll want to use something like:

body .meridian-map-container {
border: 1px solid black;
}

Target a Specific Map

To target a specific map, you can put a CSS class on the container element and target that:

.my-map .meridian-map-container {
border: 2px solid gray;
}

Alter Backgrounds and Borders

To alter background styles, use:

.meridian-map-background

To alter border styles, use:

.meridian-map-container

Target Map Buttons

You can also style the top level and floor name buttons.

Style Placemarks

You can style placemarks by placemark type using:

.meridian-placemark-type-{PLACEMARK-TYPE-NAME}

Style Tags

You can style Tags with specific labels using:

.meridian-tag-label-{LABEL-NAME}

Requirements for Using d3

If you have multiple packages that use d3 on your site, you may need to utilize webpack resolve.

for example, to use d3-selection in your project, you will need to import in the following way:

import { selection } from "d3-selection";

and write the following in your webpack.config;

module.exports = {
//...
resolve: {
alias: {
"d3-selection": require.resolve("d3-selection"),
},
},
};

Please refer to the docs for webpack require.resolve

Generated using TypeDoc