Skip to main content

Mappedin Minimap

Mappedin Minimap provides a static map, zoomed in on a specific location. It is designed to work in tandem with Mappedin Web. 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>"
	};
</script>
<script src="https://cdn.mappedin.com/minimap2/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://www.mappedin.com/demos/#/.

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>"
	  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>"
	  deepLink: "/directions?to="
	};
</script>

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

What domains need to be included in our Content Security Policy?​

Mappedin Web must be able to access the following domains. Please ensure they are allowed in your Content Security Policy (CSP).

  • *.mappedin.com

What Content Security Policy Directives are required?​

As a mitigation for Cross-Site Scripting and other types of web security vulnerabilities, you may use a Content Security Policy (CSP) to specify security policies for your website. If you do, Mappedin Web requires the following CSP directives by default:

worker-src blob: ;
child-src blob: ;
img-src data: blob: ;

Failing to add these directives could result in unexpected behavior and an error similar to the following being logged in the browser console.

Refused to create a worker from 'blob:https://YOUR.URL' because it violates the following Content Security Policy directive: "default-src https: ws: data: 'unsafe-inline' 'unsafe-eval'". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

It is possible to implement a more restrictive CSP policy that does not include worker-src blob: ;. Doing so requires a transparent proxy be set up on your server that forwards requests from https://YOUR.DOMAIN/mappedin-web-redirector/* to https://cdn.mappedin.com/web2/release/*.