Add Identify Capabilities

The following adds identifying capabilities to your application. On mouse click on a property the property will be outlined. To get a handle to the APN on identify look at the IdentifyObserver success method.

var vemap = null;                  
//  determines whether identify capability is enabled or disabled.
var isIdentifyEnabled = true;

// layer that the identified parcel will be on.
var identifyLayer = null;

function pageLoaded()         
{          
    vemap = new VEMap('myMap');
    vemap.LoadMap(new VELatLong(33.85, -117.8), 17 ,'a' ,false);
 
    // add events for identify
    vemap.AttachEvent("onclick",MouseHandler);
}

function MouseHandler(e)
{
    // converts screen coordinate to map latitude longitude
    var x = e.mapX;
    var y = e.mapY;
    pixel = new VEPixel(x, y);
    var latLng = vemap.PixelToLatLong(pixel);
        
    var queryControl = new DMCQueryControl();
        
    // create a geometry to use in query.
    var geo = new DMCPoint(latLng.Longitude, latLng.Latitude);
    queryControl.setGeometryFilter(geo);
        
    // execute query.
     queryControl.execute(new IdentifyObserver(),"success", "failure", "ID");
    
}
    
// observer to handle the identify response.
function IdentifyObserver()
{
    this.success = function(recordSet)
    {
	var record = recordSet.getByIndex(0);

	var apn = record.getByName("APN");
	var fips = record.getByName("FIPS");

	var geometry = record.getByName("GEOMETRY");
	drawPolygon(geometry, vemap);
    }
        
    this.failure = function(err)
    {
        //alert("Could not identify parcel at this location.");
    }
}
        
// draws the identified shape on the map.
function drawPolygon(dmcPolygon, map)
{
    if(map == null || dmcPolygon == null) return;
        
    var id = "_identifiedPolygon";
    var shape = DMCtoVEGeometry( id, dmcPolygon );

    //Set the line color       
    var lineColor = new VEColor(255, 0, 0, 1);         
    shape.SetLineColor(lineColor);                  
    //Set the line width         
    shape.SetLineWidth(5);
    
    // need to insert html to prevent 
    //the ve icon from being drawn on top of the polygon.
    shape.SetCustomIcon("<span/>");
    
    // add a new layer to stored the identified parcel.
    if(identifyLayer == null)
    {
	identifyLayer  = new VEShapeLayer();
	map.AddShapeLayer(identifyLayer );    
    }
    // only one identified parcel should be drawn at a time
    identifyLayer.DeleteAllShapes();
    identifyLayer.AddShape(shape); 
}

Query on Map Extent

The following example performs a geometry query using the map extent, returning all parcels visible on the map, up to a maximum of 200.

var vemap = null;
var progressBar = null;                   

// layer that the identified parcel will be on.
var identifyLayer = null;

function pageLoaded()         
{          
    progressBar = document.getElementById("progressBar");
	
    vemap = new VEMap('myMap');
    vemap.SetDashboardSize(VEDashboardSize.Tiny);
    vemap.LoadMap(new VELatLong(33.85, -117.8), 17 ,'a' ,false);
 
    // add events for identify
    vemap.AttachEvent("onchangeview",QueryMapExtent);
    QueryMapExtent();
}     

// observer to handle the identify response.
function IdentifyObserver()
{
    this.success = function(recordSet)
    {
	if (identifyLayer) identifyLayer.DeleteAllShapes();
		
	var record;
	var length = recordSet.getCount();
	for(var i = 0; i < length; i++)
	{
	    record = recordSet.getByIndex(i);
	    if(record != null)
	    {
		var apn = record.getByName("APN");

		var geometry = record.getByName("GEOMETRY");
		if(geometry == null)
		    continue;
					
		drawPolygon(geometry, vemap, apn);
	    }
	}
	progressBar.style.visibility = "hidden";
    }
    
    this.failure = function(err)
    {
        //alert("Could not identify parcel at this location.");
    }
}
    
// Get the lat/long positions of the four corners of the map and create a polygon to query on
function QueryMapExtent()
{
    var mapDiv = document.getElementById("myMap");
    var width = parseInt(mapDiv.style.width);
    var height = parseInt(mapDiv.style.height);
    var pixelPoints = [[0,0], [width,0], [width,height], [0,height], [0,0]];
    var geoPoints = new Array();
    for(var i = 0; i < 5; i++)
    {
	geoPoints[i] = new VEPixel(pixelPoints[i][0], pixelPoints[i][1]);
	geoPoints[i] = vemap.PixelToLatLong(geoPoints[i]);
	geoPoints[i] = new DMCPoint(geoPoints[i].Longitude, geoPoints[i].Latitude);
    }	    
    var geo = new DMCPolygon(geoPoints);

    // create query control object and point it to the query api url.
    var queryControl = new DMCQueryControl();    
    queryControl.setGeometryFilter(geo);
    queryControl.setMaxOutputRecords(200);

    // execute query.
    queryControl.execute(new IdentifyObserver(),"success", "failure", "ID");
    progressBar.style.visibility = "visible";	    
}    
        
// draws the identified shape on the map.
function drawPolygon(dmcPolygon, map, apn)
{
    var shape = DMCtoVEGeometry( id, dmcPolygon );
    
    // add a new layer to stored the identified parcel.
    if(identifyLayer == null)
    {
        identifyLayer  = new VEShapeLayer();
        map.AddShapeLayer(identifyLayer );    
    }
    identifyLayer.AddShape(shape); 
}

Geocode Address

The following example geocodes an address

    var queryControl = null;

    // executes the geocode.
    function executeGeocode()
    {
        if(queryControl == null)
            queryControl = new DMCQueryControl();

        var address = "575 Anton Blvd.";
        var city = "Costa Mesa";
        var state = "ca";

        queryControl.geocode(
             new Obs(),
             "success",
             "failure",
             address,
             city,
             state);
    }

    // Observer to handle the results of the geocode.
    function Obs()
    {
        this.success = function(recordSet)
        {    
            var length = recordSet.getCount();
            if(length == 0)
            {
                alert("No Results found");
                return;
            }
            
            var output = "";
            // iterates through geocode results and prints out all values.
            for(var i = 0; i < length; i++)
            {
                record = recordSet.getByIndex(i);
                if(record != null)
                {
                    for(var j = 0; j < record.getCount(); j++)
                    {
                        var value = record.getByIndex(j);
                        
                        if(value == null) continue;
                        var column = record.getNameByIndex(j);
                        output += column + "=" + value + "<br/>";                        
                    }
                }

            }
            
            document.getElementById("output").innerHTML = output;
        }

        this.failure = function(obj)
        {
            alert("error geocoding...");
        }
    }