Embedding a map into a web page

Cadcorp SIS WebMap 9.1 allows you to embed mapping and controls into web pages.

  1. Create a new map using the WebMap Manager Interface.
  2. Enable Allow Map as Embedded.
  3. Under Site Settings enable Allow all CORS.
  4. WebMap is shipped with a sample embedded map page index.html and is available here: C:\inetpub\wwwroot\siswebmap9.1\wwwroot\embedded_sample
  5. For a preview of the file, double-click to open in a browser.
  1. To change the instance of WebMap used for the embedded map open index.html in any code editor of your choice. Navigate to line 9 and change the specifications.

SERVERNAME : Computer your website is being served from.

ROOT : Root URL or website name for WebMap.

The completed URL should point to the WebMap IIS application folder
(e.g. https://ws.cadcorp.com/webmap/Embedded/Map~)ON

To embed a map on a page on a different server to that hosting SIS WebMap 9.1, use the same method as above; simply change the src value to point to the correct WebMap server.

You can add parameters to the embedded map URL for greater ease and control.Related Topics Link IconRelated Topics

  • mapname: Defines the map to be embedded. Use the map name specified in the Manager Interface.
    mapname=FirstMap
  • baselayer: Defines the base layer you want displayed in the embedded map.
    &baseLayer=OSMAPS
  • X and Y coordinate pairs: Centres the map on the supplied X and Y coordinates.
    &x=123456,&y=123456
  • Resolution or scale: The initial view resolution/scale. Opens the map already zoomed to a defined view scale or resolution.
    &resolution=0.2 or &scale=1367
  • MapID: This defines the ID of the map object to be rendered. This defaults to testMap if not specified and will allow user to access the map object via code.
    &MapID=embeddedmap
  • ShowSymbol: This can be either true or false and places a point symbol on the X and Y coordinates specified earlier.
    showsymbol=true
  • Controls: a comma separated list of map controls.
    &controls=keymap,scaleline,layerswitcher,mouseposition,panzoom,featureinfo
keymap

Adds a keymap control to the map object.
scaleline\scalebar

Adds a scale bar to the map object.(either acceptable; both produce the same scale bar)
layerswitcher

Adds a control for the user to select which layers to turn on or off.
mouseposition

Adds a control displaying the coordinates of the mouse cursor. (Will be supported in future versions of WebMap)
panzoom

Adds a control to pan and zoom on the map (not necessary for mouse wheel zooming or click & drag panning).
featureinfo

Allows interaction with the embedded map to return information about a feature when it is selected. (Will be supported in future versions of WebMap)
popup

Allows layers with hover over enabled to be highlighted and display an attribute dialog as the mouse moves over the feature.

Embedded maps can be displayed in discrete iframes inside a browser window; these iframes are useful to contain and showcase other mapping apps, videos etc.

iframemap.html - This is the full page embedded map that will be referenced as the source (src) for the iframe. Open iframemap.html in a suitable editor and customise the embedded map path and parameters in this file. When different maps or paths are required, new versions of this page can be created.

script.js - Companion file for iframemap.html. Ensure this is downloaded into the same location as iframemap.html.

index.html - Sample page including an iframe.

All modern smartphones and tablets routinely make use of gestures to interact with their content.

SIS WebMap 9.1 is perfectly primed for this seamless smartphone experience; you can pan the map with your finger and pinch-to-zoom.

Any additional parameters added to the embedded map like the layer switcher or keymap can also be handled easily with touch screen gestures.