Standard Esri Map Control

Show Buildings on a Map

Technologies > User Interface Add-Ins> Geographic Information System (GIS) Views > Simple Map

This example shows a simple ArcGIS Map example with a building restriction showing buildings located in Pennsylvania. The map zooms into the location of the buildings. Each building is marked by a red dot. The building mouseover event opens up a tool tip information window listing the building address.

To use the map control in a view, include the following JavaScript and CSS files in the AXVW:

<js url="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"/>
<js file="ab-arcgis-map.js"/>
<css file="ab-arcgis-map.css"/>
<css url="http://serverapi.arcgisonline.com/js...dra/tundra.css" />

In the data source, include the building address, latitude, and longitude:

<dataSource id="bl_ds">
...
<field name="address1" table="bl"/>
<field name="city_id" table="bl"/>
<field name="state_id" table="bl"/>
<field name="ctry_id" table="bl"/>
<field name="lat" table="bl"/>
<field name="lon" table="bl"/>

The map appears inside a <div> element using a custom HTML panel:

<panel type="html" id="mapPanel">
<html>
<div id="map" style="width:100%; height:800px;">
</div>

In the JavaScript, create an instance of the ArcGISMap control, passing the panel id, <div> id, and a panel configObject :

this.map = new Ab.arcgis.ArcGISMap('mapPanel', 'map', configObject);

Assign markers to the map, first by setting marker properties:

var blMarkerProperty = new Ab.arcgis. ArcGISMarkerProperty (
'bl_ds',
['bl.lat', 'bl.lon'],
'bl.bl_id',
['bl.address1', 'bl.city_id', 'bl.state_id', 'bl.ctry_id']
);

Marker Property Parameters
Parameter Description
Data source name The data source associated with these markers
Geometry fields The geometry fields which define the geometry of markers. lat, lon.
infoWindow title field The data field which defines tool tip infoWindow title
infoWindow attributes The data fields which define attributes for the tool tip infoWindow

Assign the data source and its marker properties to the map by calling :

updateDataSourceMarkerPropertyPair()
this.map. updateDataSourceMarkerPropertyPair ('bl_ds', blMarkerProperty);

Refresh the map with a restriction to view the marker(s):

var restriction = new Ab.view.Restriction();
restriction.addClause('bl.state_id', 'PA', "=", "OR");
this.map.refresh(restriction);

Set the CSS class of the map using the referenced external style sheet:

mapPanel.className = 'tundra';

Sample view: http://localhost:8080/archibus/schema/ab-products/solutions/arcgismap/ab-arcgis-bl-simple-map.axvw