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 eitherlocationId
orexternalId
unless modified by the optionaldataKey
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/*
.