Pass the result to init()
or createMap()
.
Experimental
debounced[async] Returns an array of results or null
when a request is cancelled
+or debounced. Cancellation happens when a new request is made before the
+previous request completes. The Debounce wait time is 6ms and the function
+is invoked with the last arguments provided.
Both cancelled and debounced requests will eventually resolve with an array +of results (possibly empty).
+Requests that throw an exception will return an empty array and output a +warning message to the Web console.
+Local/Nearby Search integration. If both refFloorID AND refPoint are +provided, a second API call will be made and the results will be ordered +where placemarks closest to the refPoint (x/y) will appear first.
+Placemark Search defaults to a single instance per API. This should work +fine for most use cases, but if you need to make multiple unique search +calls simultaneously, each will need a unique API instance like shown below.
+// Search Widget One API Instance.
const apiInstance1 = new MeridianSDK.API({
token: "<TOKEN GOES HERE>"
});
// Search Widget Two API Instance
const apiInstance2 = new MeridianSDK.API({
token: "<TOKEN GOES HERE>"
});
+
+Readonly
environmentMeridian environment ("production"
or "eu"
). Defaults to
+"production"
.
Readonly
languageLanguage code that matches a supported language for this location. +Note: The LanguageCodes Type includes all possible language codes. See +"Translations" in Meridian Editor to learn exactly what languages are +supported for this location.
+Readonly
tokenMeridian API token. Make sure to create a READ ONLY token for security. +Otherwise anyone using your page could take your token and modify all of +your Meridian data.
+Use the fetch methods instead
+[async] Returns an array of all floors at the specified location
+[async] Returns an object URL for the given SVG URL
+This object URL can be used as the src
for an img
tag.
This method fetches the SVG URL using your API token, since img
tags
+can't pass API tokens. The SVG URL can be obtained from the svg_url
+property on a floor. When you're finished using this URL, you should call
+URL.revokeObjectURL
with the URL, so the browser can save memory by
+releasing the data.
[async] Returns an Object with routes to the destination (endPlacemarkID)
+Opens a tag stream for a given location and floor. onInitialTags
is
+called with the full list of tags for that floor.
Note: When resourceType is set to "ZONE", onTagUpdate
is called when
+a tag/resource exits or enters the zone. Otherwise, onTagUpdate
is
+called every time a tag/resource is updated.
const api = new MeridianSDK.API({
token: token,
environment: "production"
});
const stream = api.openStream({
locationID: locationID,
floorID: floorID,
onInitialTags: (tags) => {
console.log("tags", tags);
},
onTagUpdate: (tag) => {
console.log("update", tag);
}
});
// Tag Zones
const stream = api.openStream({
locationID: locationID,
floorID: floorID,
resourceIDs: ["1218"],
resourceType: "ZONE",
onTagUpdate: (tag) => {
console.log("update", tag);
}
});
// call `stream.close()` when switching pages to avoid leaving the stream
// open and wasting bandwidth in the background
+
++ This style is intentionally a bit over the top to show you how + customizable these hooks are. +
+
+ meridianMap.centerMap()
+
+
+ meridianMap.zoomToPoint({x: 6825.5830078125, y:
+ 478.98833499103785, scale: 1})
+
+
+ meridianMap.zoomToDefault()
+
+
Fulfill all of your IoT needs.
This "garage" is used for deep-dive sessions from our experts.
', + keywords: null, + image_url: + "https://lh3.googleusercontent.com/sr2nNXhutx-LV40npPVIgIsTulJyS0qhFueOTZBI1d2HSb-_xUBi-7EqFZpTvnxp68sqXmdua76VhYfFQj6xYwd3", + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + is_disabled: false, + is_searchable: true, + }, + { + id: "5755685136498688_5634387206995968", + map: "5755685136498688", + x: 6818.5390625, + y: 3838.9501953125, + name: "Sputnik", + area: null, + hint: null, + uid: "1.580", + links: [], + type: "conference_room", + type_category: "Office", + type_name: "Conference Room", + color: "596c7c", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5639274879778816", + map: "5755685136498688", + x: 1922.9970703125, + y: 1866.6455078125, + name: "Eating Area | All Hands", + area: null, + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5643440998055936", + map: "5755685136498688", + x: 6825.5830078125, + y: 478.98833499103785, + name: "The Presidio", + area: null, + links: [], + type: "conference_room", + type_category: "Office", + type_name: "Conference Room", + color: "596c7c", + description: + "Seats up to 20.
Fully integrated Skype room.
Powered by Crestron.
", + keywords: null, + phone: null, + email: null, + url: null, + image_url: + "https://lh3.googleusercontent.com/PbBQVA-kAH2dUnbMsjiI0N-Rw6t9ZHj5VFv2klcQmnRzrfZqchPVaMWKckIlWWQ2fQh0foIoWyOwZxoEd2O0ba552Q", + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5645478960037888", + map: "5755685136498688", + x: 6029.6171875, + y: 1320.73974609375, + name: "Chargifi - FL1 - Hospitality", + area: null, + links: [], + type: "device_charging", + type_category: "Markers", + type_name: "Device Charging", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5653164804014080", + map: "5755685136498688", + x: 3092.2919921875, + y: 3789.642578125, + name: "PurpleTie Dry Cleaning Drop Off", + area: null, + links: [{ link: "page/5699866936213504" }], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: + "
PurpleTie Dry Cleaning is a convenient service available at work! It's as easy as 1-2-3.
1- Sign up and print out the Confirmation Page to include with your items.
2-Put your items and the Confirmation Page in a bag, and bring it to the PurpleTie station near you.
3- Place your bag at the bottom of the PurpleTie station.
What happens next? The PurpleTie experts will pick up your items, take the utmost care of your belongings and a driver will deliver your completed order back to the designated PurpleTie station during the next service day and time window as posted.
To find the kiosk: walk out of the lobby, make an immediate left turn (before you get to the elevators). When you get to the end of the hallway, make another left. The kiosk is located straight ahead.
", + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5661458385862656", + map: "5755685136498688", + x: 4469.38330078125, + y: 2750.66064453125, + name: "FL01 Water Fountain", + area: null, + links: [], + type: "water_fountain", + type_category: "Water Fountain", + type_name: "Water Fountain", + color: "f2af1d", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: true, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5668600916475904", + map: "5755685136498688", + x: 3768.5107421875, + y: 3645.24169921875, + name: "Lobby", + area: "3147.861,4092.532,3151.383,3381.094,4388.378,3388.138,4391.117,4103.098", + links: [], + type: "information", + type_category: "Information", + type_name: "Information", + color: "f2af1d", + description: null, + keywords: "Main, Entrance, Lobby, Reception", + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: true, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + parent_pane: "5755685136498688_5651442522128384", + child_pane_ne: "", + child_pane_se: "", + child_pane_sw: "", + child_pane_nw: "5755685136498688_5743114304094208", + left: 5324, + top: 537, + width: 0, + height: 0, + modified: "2019-09-24T05:19:11", + created: "2016-12-19T19:11:25", + id: "5755685136498688_5673385510043648", + map: "5755685136498688", + x: 5282.958984375, + y: 3853.0380859375, + latitude: 37.38215607501162, + longitude: -121.98159912048112, + related_map: "", + name: "Pioneer", + area: null, + hint: null, + uid: "1.590", + links: [], + type: "conference_room", + type_category: "Office", + type_name: "Conference Room", + color: "596c7c", + description: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: ["5639274879778816"], + categories: [{ id: "5639274879778816", name: "Conference Rooms" }], + is_searchable: true, + }, + { + id: "5755685136498688_5678807906254848", + map: "5755685136498688", + x: 5687.98583984375, + y: 767.7900390625, + name: "Screws", + area: null, + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5688737870643200", + map: "5755685136498688", + x: 4902.5859375, + y: 1951.1728515625, + name: "Chargifi - FL1 - Team Desk Front", + area: null, + links: [], + type: "device_charging", + type_category: "Markers", + type_name: "Device Charging", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5689792285114368", + map: "5755685136498688", + x: 6867.8466796875, + y: 2077.9638671875, + name: "Muir Woods", + area: null, + links: [], + type: "conference_room", + type_category: "Office", + type_name: "Conference Room", + color: "596c7c", + description: + "Comfortably seats 6
Fully Skype enabled.
Look at the wall to find a surprise!
", + keywords: null, + phone: null, + email: null, + url: null, + image_url: + "https://lh3.googleusercontent.com/_HEyFYI1h3nSEmEi63SUOZThM5dgjZMUd439Ss0vhv3yGVEaspEuGEWOe19AiTWwTFIAdhy7xyTEqU0XmgcQamEW", + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5693417237512192", + map: "5755685136498688", + x: 5025.85498046875, + y: 2976.06689453125, + name: "FL01 Men's Restroom", + area: null, + links: [], + type: "restroom_men", + type_category: "Restrooms", + type_name: "Restroom (Men's)", + color: "f2af1d", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: true, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: ["5713573250596864", "5645784439586816"], + categories: [ + { id: "5713573250596864", name: "Floor 1" }, + { id: "5645784439586816", name: "Restroom" }, + ], + is_searchable: true, + }, + { + id: "5755685136498688_5697982787747840", + map: "5755685136498688", + x: 5599.9365234375, + y: 950.9326171875, + name: "The Experience Zone", + area: null, + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: + "The experience zone is a combination of multiple demo kiosks, which show our vision of use cases for each industry.
The Workplace
The Retail Store
The Hospitality Zone
The Warehouse
", + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5700735861784576", + map: "5755685136498688", + x: 6177.5400390625, + y: 3853.0380859375, + name: "Mariner", + area: null, + hint: null, + uid: "1.586", + links: [], + type: "conference_room", + type_category: "Office", + type_name: "Conference Room", + color: "596c7c", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5707702298738688", + map: "5755685136498688", + x: 5749.620361328125, + y: 3786.12060546875, + name: "Training Rooms", + area: "4396.342,3296.355,7118.827,3306.921,7118.827,4275.463,4396.342,4275.463", + links: [], + type: "training", + type_category: "Office", + type_name: "Training Room", + color: "596c7c", + description: `A nodes can have as many path segments connecting to other nodes as needed. For example, a T-intersection consists of one node at the intersection point joined by 3 segments that lead to other nodes.
WARNING: The nodes and segments must all be interconnected for a proper route to be displayed. A discontinuity in the nodes and segments will result in a less desirable route for the user.
Generally, your routes should be fully interconnected. In order to assist with that, disconnected routes are shown in different colors. This means that if an area on the routing graph is all one color, you can get from any point to any other point without using a portal or going outside. Make sure to connect all parts of your maps together.
Path segments are always straight lines, but by adding many nodes joined by segments to your route, you can approximate a curve. A circular hallway or roundabout may require many nodes with very small line segments.
Transitions from one floor to the next can be done by configuring the node as a portal. Portals are ingress and egress points that my be used to represent elevators, escalators, stairs, or any other way of connecting two or more floors together. A normal node has a white fill, but when a node is configured as a portal, it will have a blue fill.
A nodes can have as many path segments connecting to other nodes as needed. For example, a T-intersection consists of one node at the intersection point joined by 3 segments that lead to other nodes.
WARNING: The nodes and segments must all be interconnected for a proper route to be displayed. A discontinuity in the nodes and segments will result in a less desirable route for the user.
Generally, your routes should be fully interconnected. In order to assist with that, disconnected routes are shown in different colors. This means that if an area on the routing graph is all one color, you can get from any point to any other point without using a portal or going outside. Make sure to connect all parts of your maps together.
Path segments are always straight lines, but by adding many nodes joined by segments to your route, you can approximate a curve. A circular hallway or roundabout may require many nodes with very small line segments.
Transitions from one floor to the next can be done by configuring the node as a portal. Portals are ingress and egress points that my be used to represent elevators, escalators, stairs, or any other way of connecting two or more floors together. A normal node has a white fill, but when a node is configured as a portal, it will have a blue fill.
Can seat up to 12.
Skype enabled room.
Powered by Crestron.
", + keywords: null, + phone: null, + email: null, + url: null, + image_url: + "https://lh3.googleusercontent.com/ZoinmnLNXKeu2KsxZ6L-N-4mWpHADA3aCJ6XN-ht_17iN0BKrf9GuXrv2gWEQVOT4TjkwfFB94poOMnQi82AsRE", + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5717271485874176", + map: "5755685136498688", + x: 3204.9951171875, + y: 1465.140625, + name: "Coffee Bar", + area: null, + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [ + { id: "6286567746830336", name: "Dolby/Widescreen" }, + { id: "6286567746830337", name: "Conference Room" }, + ], + is_searchable: true, + }, + { + id: "5755685136498688_5718998062727168", + map: "5755685136498688", + x: 6867.8466796875, + y: 1739.8544921875, + name: "Golden Gate", + area: null, + links: [], + type: "conference_room", + type_category: "Office", + type_name: "Conference Room", + color: "596c7c", + description: "Comfortably seats 6.
Skype enabled room.
", + keywords: null, + phone: null, + email: null, + url: null, + image_url: + "https://lh3.googleusercontent.com/MQ3CL6fKn19qShzo3gTThvLYc9WJlGWFFdHRE5XmgVO4Ti39EaiH-VDfpDXSTlozzNyERzn1TTgeI6_FBKgZJr_QuA", + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5721036024709120", + map: "5755685136498688", + x: 4902.5859375, + y: 2183.623046875, + name: "Chargifi - FL1 - Team Desk Back", + area: null, + links: [], + type: "device_charging", + type_category: "Markers", + type_name: "Device Charging", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5724160613416960", + map: "5755685136498688", + x: 3740.3349609375, + y: 2754.1826171875, + name: "FL01 Elevator Lobby", + area: null, + links: [], + type: "elevator", + type_category: "Elevators", + type_name: "Elevator", + color: "596c7c", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: true, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5728116278296576", + map: "5755685136498688", + x: 4465.861328125, + y: 887.537109375, + name: "The Multitaction Wall", + area: null, + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: + "Please take a seat and enjoy our beautiful lounge area and advanced Multitaction wall.
", + keywords: null, + phone: null, + email: null, + url: null, + image_url: + "https://lh3.googleusercontent.com/7DNscmE9YH-13ymvh5bfdRrdgzyNi5GFxFqf2UGZsUqFISWBS7QDHKFsfHNm0NZVRq8qNEMFVzbn47wlrJWtU9rQjQ", + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5733935958982656", + map: "5755685136498688", + x: 5022.3330078125, + y: 2567.51806640625, + name: "FL01 Women's Restroom", + area: null, + links: [], + type: "restroom_women", + type_category: "Restrooms", + type_name: "Restroom (Women's)", + color: "f2af1d", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: true, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: ["5713573250596864", "5645784439586816"], + categories: [ + { id: "5713573250596864", name: "Floor 1" }, + { id: "5645784439586816", name: "Restroom" }, + ], + is_searchable: true, + }, + { + id: "5755685136498688_5738600293466112", + map: "5755685136498688", + x: 4677.1796875, + y: 3853.0380859375, + name: "Voyager", + area: null, + hint: null, + uid: "1.596", + links: [], + type: "conference_room", + type_category: "Office", + type_name: "Conference Room", + color: "596c7c", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: ["5639274879778816"], + categories: [{ id: "5639274879778816", name: "Conference Rooms" }], + is_searchable: true, + }, + { + id: "5755685136498688_5750085036015616", + map: "5755685136498688", + x: 4353.158203125, + y: 1690.546875, + name: "Customer Experience Center", + area: "4384.856,63.396,4381.334,1077.724,4145.362,1077.724,4155.928,1447.531,4215.801,1440.487,4222.845,1627.151,4226.367,1778.596,4159.45,1778.596,4162.972,1933.563,4670.136,1940.607,4677.18,2370.288,6621.309,2370.288,6621.309,2447.771,7117.907,2444.249,7121.429,59.874", + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: + "Welcome to the Customer Experience Center!
Here at the CEC, we host the majority of the customer meetings that occur on the Santa Clara campus.
Our experience ranges from state-of-the-art conference rooms; to advanced demonstrations from our own internal experts here at Aruba.
Seats up to 20.
Fully integrated Skype room.
Powered by Crestron.
", + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5757334940811264", + map: "5755685136498688", + x: 2100.856689453125, + y: 2842.23193359375, + name: "Cafe", + area: null, + links: [], + type: "cafe", + type_category: "Recreation", + type_name: "Cafe", + color: "5ba68d", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5764640680181760", + map: "5755685136498688", + x: 4670.1357421875, + y: 299.36767578125, + name: "The Aruba Stadium", + area: null, + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: "Take a seat and enjoy the view from up high!
", + keywords: null, + phone: null, + email: null, + url: null, + image_url: + "https://lh3.googleusercontent.com/v7S1rgMdNZF1IPTXhT_jlD8cST9pd_geDd1GzoIxFR9qEJIU3H1dAS9UG6bacvrUkk2arl1L8wLHgmLPyuwnL-He2A", + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + }, + { + id: "5755685136498688_5766466041282560", + map: "5755685136498688", + x: 1981.9901123046875, + y: 4096.05419921875, + name: "Facilities Storage", + area: null, + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: true, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_5766466041281460", + map: "5755685136498688", + x: 1981.9901123046875, + y: 4096.05419921875, + name: "Executive Bathroom (not searchable)", + area: null, + links: [], + type: "restroom", + type_category: "Restrooms", + type_name: "Restroom (Men's)", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + is_searchable: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + }, + { + id: "5755685136498688_5858330013335552", + map: "5755685136498688", + x: 3103.053554404527, + y: 3423.357421875, + name: "Shipping Drop off", + area: null, + links: [], + type: "mailbox", + type_category: "Mailbox", + type_name: "Mailbox", + color: "5ba68d", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: true, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5755685136498688_6237196809142272", + map: "5755685136498688", + x: 3163.514022305608, + y: 3162.7314016479068, + name: "UPS Lockers", + area: null, + links: [], + type: "mailbox", + type_category: "Mailbox", + type_name: "Mailbox", + color: "5ba68d", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: true, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_563194337060454455", + map: "5715161717407744", + x: 600.18408203125, + y: 301.6123046875, + name: "Campus Area", + type: "label_campus", + type_name: "Label (Department area)", + type_category: "Labels", + is_facility: false, + hide_on_map: false, + landmark: false, + is_disabled: false, + is_searchable: true, + }, + { + id: "5715161717407744_563194337060454444", + map: "5715161717407744", + x: 3600.18408203125, + y: 301.6123046875, + name: "Building Area", + type: "label_building", + type_name: "Label (Department area)", + type_category: "Labels", + is_facility: false, + hide_on_map: false, + landmark: false, + is_disabled: false, + is_searchable: true, + }, + { + id: "5715161717407744_563194337060454433", + map: "5715161717407744", + x: 5600.18408203125, + y: 2501.6123046875, + name: "Department Area", + type: "label_department", + type_name: "Label (Department area)", + type_category: "Labels", + is_facility: false, + hide_on_map: false, + landmark: false, + is_disabled: false, + is_searchable: true, + }, + { + id: "5715161717407744_4814261133246464", + map: "5715161717407744", + x: 5867.13671875, + y: 1075.80859375, + name: "Chargifi - FL6 - 6.269", + area: null, + links: [], + type: "device_charging", + type_category: "Markers", + type_name: "Device Charging", + color: "88689e", + description: "None", + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_4825980946350080", + map: "5715161717407744", + x: 4503.734375, + y: 2493.97265625, + name: "6.354", + area: null, + hint: null, + uid: "6.354", + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_4832691901693952", + map: "5715161717407744", + x: 3303.734375, + y: 2493.97265625, + name: "Warner Bros", + area: null, + links: [], + type: "conference_room", + type_category: "Office", + type_name: "Conference Room", + color: "596c7c", + description: null, + keywords: null, + phone: null, + email: "VRS_SantaClara_SLR01_06FL_CONF-WarnerBros@hpe.com", + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_5067160539889664", + map: "5715161717407744", + x: 4981.800982803106, + y: 1185.23828125, + name: "6.280", + area: null, + hint: null, + uid: "6.280", + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_5068292263772160", + map: "5715161717407744", + x: 4859.343951553106, + y: 3036.423828125, + name: "6.305", + area: null, + hint: null, + uid: "6.305", + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_5074086174654464", + map: "5715161717407744", + x: 3699.765625, + y: 3561.42578125, + name: "6.351", + area: null, + hint: null, + uid: "6.351", + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_5081296799006720", + map: "5715161717407744", + x: 3957.9964968562126, + y: 1185.23828125, + name: "Chargifi - FL6 - 6.268", + area: null, + links: [], + type: "device_charging", + type_category: "Markers", + type_name: "Device Charging", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_5085384086126592", + map: "5715161717407744", + x: 1586.73046875, + y: 3035.12109375, + name: "6.101", + area: null, + hint: null, + uid: "6.101", + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_5085993434611712", + map: "5715161717407744", + x: 1063.1759828031063, + y: 3289.154296875, + name: "6.123", + area: null, + hint: null, + uid: "6.123", + links: [], + type: "desk", + type_category: "Markers", + type_name: "Desk", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + { + id: "5715161717407744_5086441721823232", + map: "5715161717407744", + x: 1067.0841859281063, + y: 3567.939453125, + name: "6.125", + area: null, + hint: null, + uid: "6.125", + links: [], + type: "generic", + type_category: "Markers", + type_name: "Placemark", + color: "88689e", + description: null, + keywords: null, + phone: null, + email: null, + url: null, + image_url: null, + image_layout: "widescreen", + is_facility: false, + hide_on_map: false, + landmark: false, + feed: "", + deep_link: null, + is_disabled: false, + category_ids: [], + categories: [], + is_searchable: true, + }, + ], +}; diff --git a/examples/cypress/utils/mock-svg.js b/examples/cypress/utils/mock-svg.js new file mode 100644 index 00000000..36620765 --- /dev/null +++ b/examples/cypress/utils/mock-svg.js @@ -0,0 +1,40 @@ +export default ` + +`; diff --git a/examples/dark-theme/index.html b/examples/dark-theme/index.html new file mode 100644 index 00000000..5faf651f --- /dev/null +++ b/examples/dark-theme/index.html @@ -0,0 +1,104 @@ + + + + + ++ This example uses a dark theme, so we customized the map background and + controls to match better by targeting the underlying HTML and CSS. +
+ + + + diff --git a/examples/directions-overview-multifloor/arrow-left-hard.png b/examples/directions-overview-multifloor/arrow-left-hard.png new file mode 100644 index 00000000..cc88b0a4 Binary files /dev/null and b/examples/directions-overview-multifloor/arrow-left-hard.png differ diff --git a/examples/directions-overview-multifloor/arrow-left-soft.png b/examples/directions-overview-multifloor/arrow-left-soft.png new file mode 100644 index 00000000..72449daa Binary files /dev/null and b/examples/directions-overview-multifloor/arrow-left-soft.png differ diff --git a/examples/directions-overview-multifloor/arrow-left.png b/examples/directions-overview-multifloor/arrow-left.png new file mode 100644 index 00000000..b469ddac Binary files /dev/null and b/examples/directions-overview-multifloor/arrow-left.png differ diff --git a/examples/directions-overview-multifloor/arrow-right-hard.png b/examples/directions-overview-multifloor/arrow-right-hard.png new file mode 100644 index 00000000..058ef976 Binary files /dev/null and b/examples/directions-overview-multifloor/arrow-right-hard.png differ diff --git a/examples/directions-overview-multifloor/arrow-right-soft.png b/examples/directions-overview-multifloor/arrow-right-soft.png new file mode 100644 index 00000000..83b9fab2 Binary files /dev/null and b/examples/directions-overview-multifloor/arrow-right-soft.png differ diff --git a/examples/directions-overview-multifloor/arrow-right.png b/examples/directions-overview-multifloor/arrow-right.png new file mode 100644 index 00000000..9b233e77 Binary files /dev/null and b/examples/directions-overview-multifloor/arrow-right.png differ diff --git a/examples/directions-overview-multifloor/arrow-straight.png b/examples/directions-overview-multifloor/arrow-straight.png new file mode 100644 index 00000000..b319ad40 Binary files /dev/null and b/examples/directions-overview-multifloor/arrow-straight.png differ diff --git a/examples/directions-overview-multifloor/directions-arrived.png b/examples/directions-overview-multifloor/directions-arrived.png new file mode 100644 index 00000000..95abb32d Binary files /dev/null and b/examples/directions-overview-multifloor/directions-arrived.png differ diff --git a/examples/directions-overview-multifloor/index.html b/examples/directions-overview-multifloor/index.html new file mode 100644 index 00000000..59afb2f0 --- /dev/null +++ b/examples/directions-overview-multifloor/index.html @@ -0,0 +1,707 @@ + + + + + ++ Read the documentation + on GitHub. +
++ Unlike Meridian's well known iOS and Android mobile SDKs, the WebSDK is + not a complete location services SDK. +
+A basic demo of the Meridian Web SDK.
+ +
+ A demo showing you can target placemark css using
+ .meridian-placemark-icon[data-meridian-placemark-id="add placemark id
+ here"]
+ to customize the UI
+
+ A demo showing how you can modify the zoom level at which label text + appears. +
+ +
+ A demo of using the api
parameter directly, for use cases
+ where you need multiple API tokens, or don't want to call
+ init
.
+
+ A demo showing how to change several options dynamically while using the + SDK. +
+ +A demo showing how to draw a SVG polygon element.
+ +A demo showing how to draw a SVG polyline element.
+ +A demo showing how to draw SVG path, image and circle elements.
+ +A demo showing how to draw an Area Placemark.
+ ++ A demo showing how to convert a Lat/Lng to a Map Point (x/y) by creating + an annotation point and drawing a polygon using a real world latitude + and longitude. +
+ +A demo showing how to convert a Map Point (x/y) to Lat/Lng.
+ +A demo showing how to create a point annotation.
+ +A demo showing how to create a custom 'you are here' marker.
+ ++ A demo showing how to hook into extra functionality of the click + callbacks. +
+ +Option to avoid loading Tags
+ ++ A demo showing how to replace the click callback functionality with + entirely custom behavior. +
+ ++ A demo with an additional example of how a Tag/Marker click callback can + be customized. +
+ +A demo showing how to filter tags by labels.
+ +Another demo showing how to filter tags by labels.
+ +A demo showing how to filter tags by name.
+ +
+ A demo showing you can target tag css using
+ .meridian-tag-label-"add tag label name here"
+ to customize the UI
+
A demo showing how to hide the Search menu icon.
+ +A demo showing how to hide the Floor menu icon.
+ +Specifying a minimum zoom level (minZoomLevel)
+ +Specifying a maximum zoom level (maxZoomLevel)
+ +Pan to x/y coordinate and scale to a given zoom factor.
+ +Set zoom to the default level and pan to the default position.
+ +Center the map while retaining the current scale.
+ +A demo showing how to prevent unwanted pan and zoom gestures.
+ +A demo showing how to style the map container.
+ +A demo showing how to make the SDK take up the entire page.
+ +A demo of how to create a dark mode theme for the SDK.
+ +An advanced styling demo.
+ +
+ A demo showing how to use api.getDirections()
to display a
+ route. To submit feedback please visit:
+ https://forms.gle/amwwJ8FsQebNCNzz5
+
+ A demo showing how to use api.getDirections()
to display a
+ route that navigates across multiple floors. To submit feedback please
+ visit:
+ https://forms.gle/amwwJ8FsQebNCNzz5
+
+ A demo showing how to use api.openStream()
to track updates
+ of Tags on a single Floor.
+
+ A demo showing how to use api.openStream()
to track updates
+ of Tags leaving and entering a single zone.
+
+ A demo showing how to use api.openStream()
to track updates
+ on a single Tag.
+
+ A demo showing how to use api.openStream()
to track updates
+ for Tags with a specific Label.
+
+ A demo showing how to use api.openStream()
to track Tags at
+ a specific location (all Floors)
+
A demo allowing you to preview any floor.
+
+
+ const floorData = await api.fetchFloorData(locationID, floorID);
+
+
+
+ Adding an annotation:
+ convert your latitude and longitude to a screen x/y and update
+ the map with an annotation
+
+
+ const pointLocation = MeridianSDK.latLngToMapPoint(floorData,
+ {lat: 37.38215607501162, lng: -121.98159912048112});
+
+
+
+
+ meridianMap.update({
+
+
+ annotations: [
+ });
+
+
+ {
+ ],
+
+ type: "point",
+ },
+ x: pointLocation.x,
+ y: pointLocation.y,
+ size: 32,
+ backgroundColor: "red",
+ backgroundImage: MeridianSDK.placemarkIconURL("generic")
+
+
+
+ const polygonArray = [];
+
+ function coordinateObjectToArray({lat, lng}) {
+
+
+ const coordObject = MeridianSDK.latLngToMapPoint(floorData,
+ {lat, lng});
+ }
+ return [coordObject.x, coordObject.y];
+
+
+
+ polygonArray.push(coordinateObjectToArray({lat: 37.38217476738073,
+ lng: -121.98124592380535}));
+
+ polygonArray.push(coordinateObjectToArray({lat: 37.38215630276508,
+ lng: -121.98099902518736}));
+ polygonArray.push(coordinateObjectToArray({lat:
+ 37.382049361776645, lng: -121.98100870748611}));
+ polygonArray.push(coordinateObjectToArray({lat:
+ 37.382145531737166, lng: -121.98124592380535}));
+
+ update your overlay points with your polygon array +
+
+
+
+
+ meridianMap.update({
+
+
+ overlays: [
+ });
+
+
+ {
+ ],
+
+ type: "polygon",
+ },
+ points: polygonArray,
+ fillOpacity: "15%",
+
+
+
+
+ const floorData = await api.fetchFloorData(locationID, floorID);
+
+
+
+
+ const xyToLatLng = MeridianSDK.mapPointToLatLng(floorData, {x:
+ 5269.126531688274, y: 3824.493588695426});
+
+
+
+ const latLngToXy = MeridianSDK.latLngToMapPoint(floorData,
+ xyToLatLng);
+
+
+
+
+ meridianMap.update({
+
+
+ annotations: [
+ });
+
+
+ {
+ ],
+
+ type: "point",
+ },
+ x: latLngToXy.x,
+ y: latLngToXy.y,
+ size: 32,
+ backgroundColor: "red",
+ backgroundImage: MeridianSDK.placemarkIconURL("generic")
+
+
+
+ This demo shows the result of specifying a maximum zoom level + (maxZoomLevel) of 16. By zooming in you see how this + affects the map. The default value is 8 which equals + eight times the scale of the map. +
+
Holds an API token and environment. Can be used to access an
+axios
instance +for REST API calls, oropenStream()
for opening a tag stream. You can +create multiple API instances in case you want to use multiple tokens (e.g. +to show data from multiple locations or organizations on a single page).Example
+