Properly embedding your map on your website is key to providing the best experience for map users across all devices and screen sizes. Following these guidelines and using the sample code as a reference will make for a seamless experience between your website and your Atlas3D or CampusBird map.
EMBEDDING YOUR MAP
1. Make sure the map is set with the proper default views. For example, you can have categories turned on by default, as well as specific lat/long and zoom level defaults. To check your default view, select the home icon on the map. You can also see which categories are on by default, with the "default" icon.
If you need to modify the default lat/long and zoom settings, position the map and select the Set View and Zoom button on the Options tab of the CMS. You will need to publish this update.
2. Within the CMS, access the Embed tab. Here you will find the iframe code that includes the map URL.
Tip: If you are looking to embed a specific view of the map, you can utilize the "get this view" function to generate a specific URL for the iframe. For example, maybe you are embedding the map on an event page or a sub page of your website.
Additionally, you can modify the embed code even further by adding query strings to the URL. By using the on/off toggle within the embed tab, the URL within the iframe code will be updated automatically.
3. Add embed code to the page you wish the map to live on.
EMBED BEST PRACTICES
Embed your map on a dedicated page
Separating the map embed from other site content makes for the best mobile and desktop experience. Giving the map its own page ensures that all the rich media and content within can be experienced at full size. Alternatively, use a link or thumbnail image to open the map in a new window or inside a modal.
Avoid Small iframes
If not embedding the map on a dedicated page, be mindful of the size of your iframe. Iframe embeds that are too small can limit the interactivity of the map. The Concept3D desktop interface is optimized for at least 1024px wide screens. If possible, iframes should be set to 100% width and height to provide full screen app-like experiences for users, especially for those on mobile and tablet devices.
Avoid Scrolling Dead Zones
If content is placed below a map embed, it can become difficult for a user to scroll down the page to it. On a desktop, a user attempting to scroll past the map may end up interacting with the map instead and zooming in or out. On a mobile or touch device, a user may be ‘stuck’ panning on the map and unable to scroll up or down. Serving the map on a dedicated page, in a new window, or in a modal will prevent this issue.
Basic Embed Template