SightMap

The SightMap® Developer Hub

Welcome to the SightMap Developer Hub. You'll find code snippets and example integrations to get you started. Let's jump right in!

Add SightMap® Embedded in-line

Overview

You can add SightMap directly on the page by embedding it in-line via an iframe.

Process

  1. The SightMap application is designed to be responsive. Create a container within the page and insert the HTML embed code (see below).
  2. Ensure the container is be large enough to show the entire embed plus 20+ pixel margins, so that ensure mobile users can scroll past the iframe.
<iframe width="100%" height="100%" src="https://sightmap.com/embed/e8ywkqrqwlx" frameborder="0"></iframe>

Need some practice?
If you don't have your SightMap embed link yet, you can use this one for testing purposes: https://sightmap.com/embed/e8ywkqrqwlx.

Embedded Maps on Mobile

Maps embedded-in line can be too tall on mobile. The user may not see the filters and the user can get stuck scrolling in the white space sorrounding the map. (See image #1 below.)

There are two ways to optimize the SightMap mobile experience:

A. You can keep the map embedded in-line and adjust the height of the container on mobile only. (See image #2 below.)

B. You can have the map open in a pop-up on mobile only. (See image #3 below.)

Code Samples

SightMap embedded in-line

A simple use case, where the software is embedded in the web page.

Heads up: Maps in the mirror will be larger than they appear.

The size of the map in these JSFiddles is scaled to the size of the example window. As such, the size of the map will be much larger on an actual website.

SightMap in Pure JS Modal on mobile

This is an example of a SightMap embedded in a pure JavaScript modal implementation. On screens small enough to be mobile devices, a link allows the user to open and close the SightMap on modal. On larger screens, the Sightmap is embedded in line, as normal.

Heads up: Maps in the mirror will be larger than they appear.

The size of the map in these JSFiddles is scaled to the size of the example window. As such, the size of the map will be much larger on an actual website.

SightMap in Wordpress FancyBox on Mobile

This code demonstrates how to embed a SightMap in a WordPress page, using the fancybox modal package. This version displays a modal activation link on screens small enough to be mobile, but switches to an inline embed on larger screens. Not that the JavaScript is still formatted as it would be in a WordPress CMS.

Heads up: Maps in the mirror will be larger than they appear.

The size of the map in these JSFiddles is scaled to the size of the example window. As such, the size of the map will be much larger on an actual website.

Add SightMap® Embedded in-line


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.