Mappedin Logo

Developer

Mappedin Documentation

Mappedin Web v2 Integration Guide

Mappedin Web v2 Integration Guide

The following guide will walk you through how to integrate Mappedin’s Responsive Web App with your website.

Read more about Mappedin Web at https://www.mappedin.com/wayfinding/web-app/

Mappedin Web is a fully packaged solution that can be easily embedded into your website by following this simple guide. Once it's configured, you will have ongoing access to the Mappedin Web platform as it continuously evolves and improves with new features and data driven learnings. Customers using Mappedin Web will always have the best version of our product, with out of the box features including:

  • An interactive 3D map
  • Location search and category listing
  • Turn by turn directions
  • A details page for each location including deals,photo gallery, external links, and related locations
  • A mobile first, app centric, responsive design
  • Deep linking support

... and more.

Prerequisites

Before embedding Mappedin Web, please ensure the following requirements have been met

  • Venue is fully mapped and tested (demo links will be provided to preview the front-end experience)
  • Location data is up to date and ready for production
  • Mappedin venue and search keys have been provided to you

1. Integration

Mappedin will provide credentials and specific instructions, but at a high level you just need a HTML element, Javascript configuration, and an external stylesheet.

Place the following external stylesheet in your <head>:

<link href="https://d1p5cqqchvbqmy.cloudfront.net/web2/release/mappedin-web.css" rel="stylesheet" />

and include some JavaScript configuration in the <body>:

<div data-key="<probably externalId, or skip>" id="mappedin-map"></div>
<script type="text/javascript">
window.mappedin = {
miKey: {
id: "<your credentials>",
key: "<your credentials>",
},
searchKey: {
id: "<your credentials>",
secret: "<your credentials>",
},
venue: "<your venue here>",
language: "<default language code>"
}
</script>
<script src="https://d1p5cqqchvbqmy.cloudfront.net/web2/release/mappedin-web.js"></script>

2. Language

If you wish to display different languages for Mappedin Web, you can specify the language via the language property in the JavaScript configuration object. Whatever is set in the snippet will be the language set on initial load - if no language is set it will default to English. You may also want to set the language property dynamically from outside Mappedin Web so that you can translate the website where it is embedded while also translating the app’s UI at the same time.

You can access the language property directly like this: window.mappedin.language = "fr" .This configuration needs to be set before the external mappedin script loads.

Currently supported languages include:

  • Catalonian (CA)
  • Danish (DA)
  • Dutch (NL)
  • English (EN)
  • Finnish (FI)
  • French (FR)
  • French - France(FR-FR)
  • German (DE)
  • Greek (EL)
  • Hungarian (HU)
  • Italian (IT)
  • Japanese (JA)
  • Korean (KO)
  • Portugese (PT)
  • Romanian (RO)
  • SimplifiedChinese (ZH-CN)
  • Slovak(SK)
  • Spanish - EU (ES)
  • Spanish - US (ES-US)
  • Swedish - Finland (SV-FI)
  • Ukrainian (UK-UA)

3. Requirements

It is embedded as a web component not an iFrame. It utilizes the shadow dom to hold the necessary HTML, meaning it can co-exist with the rest of your site but not be affected by your CSS styling. To ensure the best experience across mobile and desktop, it will work best if your site is already designed to be responsive. On desktop, Mappedin Web can have the rest of your site surrounding it, though we recommend you let the map take up as much space as possible (up to nearly a full screen map experience if you want). On mobile, Mappedin Web will fill the screen and provide its own toolbar on the bottom for a scroll-free, app centric experience.

There are some specific details for integration that should be taken into account:

  • Wrap Mappedin Web in its own container. This container should be styled to take up the whole screen on mobile (<1024) and fit into your responsive layout on desktop views.
  • On desktop, the minimum width of the container should be 1024px
  • On mobile, do not include any more page content than the header and the map; things like footers and other content should be excluded or hidden. Include a header on mobile which allows users to access the - rest of your site, and pass in its height via data-header.
  • If the host site utilizes hash navigation, Mappedin Web must live on a static page to not interfere.

4. Recommendations

These are not required, but to get the best possible experience there are a few extra steps that can be taken:

  • Allow the map to take up as much space as possible on mobile and desktop
  • On mobile, avoid adding too many elements that will decrease the vertical space available for Mappedin Web (this is especially noticeable on smaller devices like the iPhone SE
  • Use a one column layout
  • Use a traditional responsive style (CSS media queries, not JavaScript)
  • If your Location data is being synced in to our system, you can specify data-key="externalId" on the <key> to use your own Ids in the URL and for deep linking Tabs to show categories and info already in Mappedin Web are redundant
  • Avoid including unnecessary functionality on the map page that could impact load times of Mappedin Web

You can view how an integration should look via the demo page provided for your venue(s). We recommend the integration follow the demo experience.

5. Deep Linking

Mappedin Web offers a way to link directly to many pages. The following represents all of the deep linking routes that are possible, with a description of what it will do and any parameters you will need. You can see these in action by simply using the map and watching the url. You can then copy and use those urls directly, or use the list below to make your own.

5.1 Location Page

/profile?location=<locationId>

  • locationId: (LocationId) Location to display

5.2 Categories Page

/categories
List all available categories

5.3 Specific Category Page

/categories?category=<categoryName>

  • categoryName: (CategoryName) Category to display Lists all locations assigned to the category provided

5.4 Search Page

/search
Search form

5.5 Directions Page

/directions
Directions page

5.6 Directions - From Page

/directions?from=<fromId>

  • fromId: Preset departure point Directions page with a preset from field

5.7 Directions - To Page

/directions?to=<toId>

  • toId: (LocationId) Preset arrival point Directions page with a preset to field

5.8 Directions - From/To Page

/directions?to=<toId>&from=<fromId>&accessible=true&textDirectionsVisible=true

  • fromId: (LocationId) Preset departure point
  • toId: (LocationId) Preset arrival point

Optional:

  • accessible: Default: false, can set this param to true to enable directions that will prioritize elevators and ramps
  • textDirectionsVisible: Default: false, can set this param to true to show text directions alongside the wayfinding path upon initial load

Minimal example with Mappedin Demo Mall

<!DOCTYPE html>
<html lang="en">
<head>
<title>Mappedin Web Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8" />
<link href="https://d1p5cqqchvbqmy.cloudfront.net/web2/release/mappedin-web.css" rel="stylesheet" />
<style>
body,
html,
#mappedin-map {
width: 100%;
height: 100%;
margin: 0px;
position: relative;
touch-action: none;
}
</style>
</head>
<body>
<div data-key="externalId" id="mappedin-map"></div>
<script type="text/javascript">
window.mappedin = {
miKey: {
id: "<MAPPEDIN_CLIENT_ID>",
key: "<MAPPEDIN_CLIENT_SECRET>",
},
searchKey: {
id: "",
secret: "",
},
venue: "mappedin-demo-mall",
vertical: "mall",
language: "en",
};
</script>
<script src="https://d1p5cqqchvbqmy.cloudfront.net/web2/release/mappedin-web.js"></script>
</body>
</html>

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy