Embeddable maps

3. Adding a map to index.html (Embeddable Maps)

Add this code snippet inside the <body> element:

Copy 

<script src="http://localhost/SISWebMap9/GetMap.axd?mapid=myMap&mapname=
embedded&controlTag=MapPlaceholder" type="text/javascript"></script>
<div style="width:500px;height:500px;" id="MapPlaceholder"></div>

On loading the index.html page, you will see a map.

The code explained 

<div style="width:500px;height:500px;" id="MapPlaceholder"></div>

The div tag acts as a placeholder that is replaced by the map object when the creation script is triggered. It includes an ID so it can be identified by the code, and a height and width defined with inline styles.

The styles can be set in an external CSS file.


<script src="http://localhost/webmaplayers/GetMap.axd?mapid=myMap&mapname=
embedded&controlTag=MapPlaceholder" type="text/javascript"></script>

The script tag points towards the GetMap.axd virtual file in the WebMap instance. This generates the script needed to generate the map. The querystring has a number of parameters that can be appended to add more controls or set a default location.

There are 3 mandatory querystring parameters that need to be appended to the script URL- controlTag, mapid and mapname.

  • controlTag is the placeholder container ID (in this case we are using MapPlaceholder)
  • mapid is the identifier used to refer to the map in the JavaScript.
  • mapname is the name of the map used for the embedded map (in this case we are using the “embedded” map which is a default in the WebMap database.)

You can also set an initial location and specific methods to be triggered when the map is loaded. Use these parameters:

  • showsymbol: Set to true for the initial location to be marked
  • x: The initial x location
  • y: The initial y location
  • resolution: The initial resolution of the map. Use either resolution or scale, depending on how the map has been configured.
  • scale: The initial scale of the map
  • initialisedcallback: A JavaScript function to call when the map is initialised
  • initialisedcallbackscope: The context the JavaScript function will be called in

You can also specify which map controls are available on the embedded map.

  • keymap: Adds an overview map
  • ScaleLine: Adds a scale line
  • LayerSwitcher: Adds a basic layer switcher
  • MousePosition: Adds the mouse coordinates
  • PanZoom: Adds pan and zoom controls
  • Featureinfo: Add feature info

These are activated or deactivated by listing them on the script src attribute following the &controls= query string parameter, separated by a comma.

<script src="http://localhost/SISWebMap9/GetMap.axd?mapid=myMap&mapname=embedded&controlTag
=MapPlaceholder&x=530284&y=179551&resolution=1.2&showsymbol=true&controls=panzoom" 
type="text/javascript"></script>

Updating the script tag to include some of these additional parameters would change the location and allow the user to pan and zoom the map using displayed buttons.

The page should now have a working map that should allow panning and zooming. The next step is to add additional functionality to the map.

4. Adding functionality (Using the Initialisation method)