The Meridian Web SDK officially supports evergreen versions of Firefox, Google Chrome, Microsoft Edge, and Safari browsers.
The Meridian Web SDK is a JavaScript library you can use to add dynamically updating and interactive Meridian maps to your site.
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.
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
You can check out our examples to see example applications of the Web SDK.
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.
To target all Meridian maps on one page, you'll want to use something like:
body .meridian-map-container {
border: 1px solid black;
}
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;
}
To alter background styles, use:
.meridian-map-background
To alter border styles, use:
.meridian-map-container
You can also style the top level and floor name buttons.
You can style placemarks by placemark type using:
.meridian-placemark-type-{PLACEMARK-TYPE-NAME}
You can style Tags with specific labels using:
.meridian-tag-label-{LABEL-NAME}
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