Skip to main content

FAQ

This page contains answers to frequently asked questions about Mappedin Web.

Which browsers are supported?​

Mappedin Web supports the recent versions of the major web browsers listed below. Some older version may work, however they are not supported.

  • Chrome
  • Edge
  • Firefox
  • Safari
  • No IE support

The map is not visible after following the integration guide​

This can often be caused by a parent <div> not having a height. The map fills the height and width available to it, so any wrapper or parent divs must have an adequate height set. To determine if this is the issue, modify the parent div in the browser's developer tools to have the following attributes:

position: relative;
height: 1000px;

The map element is obstructed on mobile by the URL bar​

On mobile devices it's important to give the map as much space as possible for the best user experience. If the map is relatively positioned on mobile, and height is based on viewport and not a full screen height (i.e. 80vh), the map can be obstructed by the title bar of the browser. Using Small Viewport Height (svh) can help to resolve this issue.

Small Viewport Height (svh) refers to the page space available when dynamic toolbars are visible. This value does not change when toolbars are shown or hidden.

By using svh instead of vh, it ensures that the map will be fully visible when initially loaded on a mobile device and not be blocked by the URL bar. To learn more about svh and lvh, look at the web.dev blog post: The large, small, and dynamic viewport units

An alternative proposed by CSS Tricks uses Javascript to calculate a custom viewport height value and then set an additional height value on the element, keeping the old one as a fallback if a browser doesn’t support CSS variables:

function recalculateHeight() {
	document.documentElement.style.setProperty('--vh', window.innerHeight / 100 + 'px');
}

window.addEventListener('resize', recalculateHeight);
recalculateHeight();
element {
	height: calc(100vh - 100px);
	height: calc(calc(100 * var(--vh)) - 100px);
}

Is it possible to disable mouse scrolling on the map?​

No, this is not supported. The recommended approach is to place the map on a page with as little other content as possible. This ensures a better experience, especially on mobile devices where the map should have as much screen real estate as possible.

How to integrate Mappedin Web into an Angular application​

This StackOverflow post has several answers explaining different methods for loading dynamic scripts into an Angular application. As shown in the integration snippet, the following steps are required:

  1. Import styles with @import url("https://cdn.mappedin.com/web2/release/mappedin-web.css"); in the module CSS file.
  2. window.mappedin object with appropriate information on the page.
  3. The target HTML element <div data-key="externalId" id="mappedin-map"></div>.
  4. Then load mappedin-web.js dynamically.

How to fix conflicting behavior on mobile when pulling down to minimize store profile?​

If Mappedin Web is integrated to be a full page integration or an integration where the map is entirely visible without scrolling the page, the pull down action on the store profile could interfere with mobile browsers’ “Pull down to Refresh” functionality. Disable “Pull to Refresh” functionality of the browser with the following CSS:

body,
html {
	overscroll-behavior-y: contain;
}

The application UI is very small on mobile devices​

To scale the UI properly on mobile devices, Mappedin Web requires the following meta tag in the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8" />

Why is the font on the map very small?​

Mappedin Web expects a base font size of 16px. Using a smaller or larger base font size will affect the font size of the map. Failing to import the mappedin-web.css file will also affect the font of the map.

What configuration is required to use Mappedin's EU Servers?​

Mappedin has cloud servers hosted in both North America and Europe. Additional configuration is required to access Mappedin infrastructure hosted in Europe.

Maps are not mirrored in both locations. A single location must be chosen. Contact a Mappedin representative to change locations.

To use Mappedin's EU servers, useEUServer: true must be added as shown in the example below.

<script type="text/javascript">
	window.mappedin = {
		miKey: {
			id: 'your-id',
			key: 'your-key',
		},
		venue: 'your-venue',
		useEUServer: true,
	};
</script>

How to prevent Mappedin app from breaking when navigating away from and back to a page in a React framework like Next.js​

init and teardown functions on the window object help manage the Mappedin app's lifecycle in client-side rendered applications like those built with React (e.g., Next.js).

Use window.mappedinManager.init and window.mappedinManager.teardown to initialize and teardown the app appropriately.

The script id should be id="mappedin-web" so that the teardown can locate it correctly.

The following example demonstrates this approach in a React application using the useEffect hook:

import Link from 'next/link';
import Script from 'next/script';
import React, { useEffect } from 'react';

export default function Map() {
	useEffect(() => {
		if (window.mappedinManager?.init) {
			window.mappedinManager.init();
		}
		return () => {
			window.mappedinManager?.teardown();
		};
	}, []);

	return (
		<div>
			<link href="https://cdn.mappedin.com/web2/release/mappedin-web.css?venue=<YOUR-VENUE>" rel="stylesheet" />
			<div data-key="externalId" id="mappedin-map"></div>
			<Script id="mappedin" type="text/javascript">
				{`
                  window.mappedin = {
                    miKey: {
                      id: "5eab30aa91b055001a68e996",
                      key: "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1"
                    },
                    venue: "mappedin-demo-mall",
                  };
        `}
			</Script>
			<Script
				type="module"
				src="https://cdn.mappedin.com/web2/release/mappedin-web.js?venue=<YOUR-VENUE>"
				id="mappedin-web"
			></Script>
			<div style={{ position: 'fixed', top: 0, left: 0, backgroundColor: 'white' }}>
				<Link href={'/'}>Back</Link>
			</div>
		</div>
	);
}