Bespoke Applications – Building your own website4.

4. Adding a map to Map.aspx

  1. Add new Web Form map.aspx
  2. Ensure doctype is set for html 5 (<!DOCTYPE html>)
  3. In the head element add:
Copy 
<link href="css/openlayers.css" rel="stylesheet" />
<script src="script/script.js"></script>

  1. Add onload event to body similar to the following:

Copy 
<body onload="ready();">

  1. Add the following to script.js

Copy 
function ready()
{
    Cadcorp.inittestMap();
}

  1. In the body, inside the form element create a container element for the map, we need to set the height and width for this element so the map will display.

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

  1. Now add a Cadcorp map to the map container:

Copy 
<Cadcorp:Map runat="server" ID="testMap" MapName="FirstMap" 
RenderContainer="true" RenderScriptTags="true">
 <OLControls>
  
 </OLControls> 
</Cadcorp:Map>

  1. Ensure the MapName property of the map control matches a configured map in the configuration database.

  1. When the project is run, a map with mouse pan and zoom will be displayed.

The code explained

<Cadcorp:Map runat="server" ID="testMap" MapName="FirstMap" RenderContainer="true" RenderScriptTags="true">
<OLControls>
 
</OLControls> 
</Cadcorp:Map>

The Cadcorp:Map tag provides a function into the page that will create an open layers map. The function is added to a global Cadcorp object. The name of the function is init + the id of the map object, in our sample this is testMap.

function ready()
{
    Cadcorp.inittestMap();
}

The above code is run when the document has loaded all content and it calls the function to create the map.

5. Adding Functionality