Mappedin Minimap

Mappedin Minimap provides a static map, zoomed in on a specific location. It is designed to work in tandem with Mappedin's Responsive Web App. Clicking on the Minimap will link the user to the location profile within the Mappedin Web App. This guide demonstrates how to configure and integrate Minimap with a web page.

Integration

The following HTML snippets are all that are necessary to include Minimap on a page.

Add a div element with an id of mappedin-minimap in the appropriate position in the HTML document.

<div id="mappedin-minimap"></div>

Include the below scripts to configure and download the Mappedin Minimap on page load.

<script type="text/javascript"> 
  window.mappedin = {
    clientId: "<Mappedin Key>",
    clientSecret: "<Mappedin Secret>",
    venue: "<Unique Venue Identifier",
    locationId: "<locationId | externalId>",
    fullMapUrl: "<Map Page URL>"
    webAppVersion: "v2"
  };
</script>
<script src="https://d1p5cqqchvbqmy.cloudfront.net/minimap/release/minimap.js" type="text/javascript"></script>

With the above snippets in the document, Minimap should initialize within the mappedin-minimap element. To read about each of the above properties in window.mappedin, see Required Properties.

Example

Required Properties

The following properties are required in the window.mappedin configuration. Without them Minimap will fail to initialize.

clientId is the Mappedin Web key for the venue.
clientSecret is the Mappedin Web secret for the venue.
venue is the unique identifier for the venue.
locationId is the identifier for the location. Must be either locationId or externalId unless modified by the optional dataKey property.
fullMapUrl is the URL to the Mappedin Web application. For example, https://demos-ssl.mappedin.com/web/v2/demos/mappedin-demo-mall.html#/.

Optional Properties

The following properties are optional in the window.mappedin configuration. They can be added to customize the Minimap experience.

lang specifies the language of the text labels (if available).
dataKey specifies a custom property to lookup the location by. This may be any property of the MappedinLocation class. Some common properties to use include name and shortName. See FAQ.
zoom specifies a custom map zoom level. The default zoom value is 2.0, where larger values zoom out further from the map.
webAppVersion specifies the version of Mappedin Web you are linking to. This can either be v1 or v2. If not specified or invalid, this is determined based on the "Apollo Version" field in the Venue Settings in CMS.
deepLink specifies a custom deepLink for the fullMapUrl. For example, /directions?to= directs the user to the full map with directions to the locationId.

When the Minimap is clicked, it calls the window.miOpenFullMap() function. To add a custom button or link elsewhere on the page, call this function.

Styling

The Minimap will take up the entire space of it's parent container. It is recommended to put the above snippets in a wrapping container, and style that container to control position and size of the Minimap instead of the Minimap element itself.

Frequently Asked Questions

How do I display location names on the map?

Contact Mappedin to enable FloatingLabels for the venue to display the location name label on the Minimap.

How can I use the location's name as the ID for Minimap?

To use the location's name rather than locationId or externalId, set the dataKey in window.mappedin configuration to specify name.

<script type="text/javascript">
  window.mappedin = {
    clientId: "<Mappedin Key>",
    clientSecret: "<Mappedin Secret>",
    venue: "<Unique Venue Identifier",
    locationId: "<locationId | externalId>",
    fullMapUrl: "<Map Page URL>"
    webAppVersion: "v2”,
    dataKey: "name"
  };
</script>

How can the user get directions to or from a location when they click the Minimap?

By default, Minimap will send the user to the location profile. Customize the deep link by adding the deepLink property to the window.mappedin configuration.

<script type="text/javascript"> 
  window.mappedin = {
    clientId: "<Mappedin Key>",
    clientSecret: "<Mappedin Secret>",
    venue: "<Unique Venue Identifier",
    locationId: "<locationId | externalId>",
    fullMapUrl: "<Map Page URL>"
    webAppVersion: "v2",
    deepLink: "/directions?to="
  };
</script>

Use /directions?to= or /directions?from= to direct the user to the directions page with the locationId.