Identify API function

Click on the map for the city name

Here we demo the Identify function of the api. Click here for detailed documention of the function

Example API RESTful URL: http://gis.drcog.org/REST/v1/ws_geo_identify.php?distance=50&format=json&fields=name&geotables=muni_2010&srid=2232&x=3138704.521018773&y=1699213.268416112

Here is the JSON response from the above URL


{

    "results": [
        {
            "geotable": "muni_2010",
            "total_rows": "1",
            "rows": [
                {
                    "row": {
                        "name": "Denver"
                    }
                }
            ]
        }
    ]
}  

 

This is the jquery Ajax call that is sending the request to the API after the click


   $.ajax({
   // Using ajax to call the api identify function.
    jQuery.ajax({
           url: "http://gis.drcog.org/REST/v1/ws_geo_identify.php",
           data: {
                        y: xy.lat,
                        x: xy.lon,
                        distance: '50',
                        format: 'json',
                        fields: 'name',
                        geotables: 'muni_2010',
                        srid: '2232'
         },
         dataType: "json",
         type: "POST",
      //successful AJAX request. Create a bubble with city name!.
       //IF USING .NET YOU MUST ADD THE LINE BELOW //
       // data = JSON.parse(data);  //     
         success: function(data, status, xhr) {
               $().trigger("ajax:success", [data, status, xhr]);
                      var htmllen = data.results;
   // if the are no results return a message
             if (htmllen.length == 0){
                   html = "No City Found"
                }

   // parse the json return to get the city name
             else{
                 html = data.results[0].rows[0].row.name;
                }

             if (currentPopup != null && currentPopup.visible()) {
                 currentPopup.hide();
                 currentPopup.destroy();
                }

              info = new OpenLayers.Popup.FramedCloud(

             "data",
              xy_900913,
              null,
              html, //this is where the data from api is put into the popup
              null,
              true
                 );
              currentPopup = info;
             //add the popup to the map
              map.addPopup(info);
                  },

       error: function(xhr, status, error) {
               $().trigger("ajax:failure", [xhr, status, error]);
                 if (xhr.status == 404) { 
                      alert("nothing found");
                     }      
                       }
              });

Here is all of the javascript used. This includes a few lines of code setting up the click control in OpenLayers


var map; 

$(document).ready(function () {  
    map = new OpenLayers.Map('map', {
	maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
         maxResolution: 156543.0399,
		 numZoomLevels: "auto",
         units: 'm',
         projection: new OpenLayers.Projection("EPSG:4326"),
         displayProjection: new OpenLayers.Projection("EPSG:900913")
	});
	
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    
    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", 
        {numZoomLevels: 20}
    );
	
	var gphy = new OpenLayers.Layer.Google(
        "Google Physical",
        {type: google.maps.MapTypeId.TERRAIN}
    );

    var ghyb = new OpenLayers.Layer.Google(
        "Google Hybrid",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
    );
    var gsat = new OpenLayers.Layer.Google(
        "Google Satellite",
        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
    );
    
     map.addLayers([gmap, gphy, ghyb, gsat]);

     map.setCenter(new OpenLayers.LonLat(-104.96, 39.75).transform(
        new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()), 9);
});

$(document).ready(function () {

var currentPopup;
//Setting the projections used 
var p4326 = new OpenLayers.Projection("EPSG:4326");
var p900913 = new OpenLayers.Projection("EPSG:900913");

//All of the data in the API are in 2232 which is Colorado State Plane Central, NAD 83. We define this for Proj4js here
Proj4js.defs["EPSG:2232"] = "+proj=lcc +lat_1=39.75 +lat_2=38.45 +lat_0=37.83333333333334 +lon_0=-105.5 +x_0=914401.8288036576 +y_0=304800.6096012192 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs"; 
var p2232 = new OpenLayers.Projection("EPSG:2232");

//We are setting up the control control in OpenLayers here
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
                defaultHandlerOptions: {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 4,
                    'stopSingle': false,
                    'stopDouble': false
                    
                },

                initialize: function(options) {
                    this.handlerOptions = OpenLayers.Util.extend(
                        {}, this.defaultHandlerOptions
                    );
                    OpenLayers.Control.prototype.initialize.apply(
                        this, arguments
                    ); 
                    this.handler = new OpenLayers.Handler.Click(
                        this, {
                            'click': this.trigger
                        }, this.handlerOptions
                    );
                }, 

	     //On click do this:
		trigger: function(e) {
                    
                    //get the lat long from the click
                    var longlat = map.getLonLatFromPixel(e.xy);
    
                   //transform the xy from google to 2232
		    var xy = new OpenLayers.LonLat(longlat.lon, longlat.lat).transform(new OpenLayers.Projection("EPSG:900913"), p2232);
                    var xy_900913 = new OpenLayers.LonLat(xy.lon, xy.lat).transform(p2232, p900913);
                           
                    id(xy);
		     function id(location) { 
                          var html;

                          $.ajax({
   // Using ajax to call the api identify function.
    jQuery.ajax({
           url: "http://gis.drcog.org/REST/v1/ws_geo_identify.php",
           data: {
                        y: xy.lat,
                        x: xy.lon,
                        distance: '50',
                        format: 'json',
                        fields: 'name',
                        geotables: 'muni_2010',
                        srid: '2232'
         },
         dataType: "json",
         type: "POST",
      //successful AJAX request. Create a bubble with city name!.
         success: function(data, status, xhr) {
                //IF USING .NET YOU MUST ADD THE LINE BELOW //
                 // data = JSON.parse(data);  //     
               $().trigger("ajax:success", [data, status, xhr]);
                      var htmllen = data.results;
   // if the are no results return a message
             if (htmllen.length == 0){
                   html = "No City Found"
                }

   // parse the json return to get the city name
             else{
                 html = data.results[0].rows[0].row.name;
                }
             //If there is a popup clear it when a new one comes up
             if (currentPopup != null && currentPopup.visible()) {
                 currentPopup.hide();
                 currentPopup.destroy();
                }
         //set up the popup cloud
      info = new OpenLayers.Popup.FramedCloud(

             "data",
              xy_900913,
              null,
              html, //this is where the data from api is put into the popup
              null,
              true
                 );
              currentPopup = info;
             //add the popup to the map
              map.addPopup(info);
                  },
        //if nothing is returned from the click return an alert
       error: function(xhr, status, error) {
               $().trigger("ajax:failure", [xhr, status, error]);
                 if (xhr.status == 404) { 
                      alert("nothing found");
                     }      
                       }
              });              
                          }                                                              
                      }                  
    })
 //Add the muni boundary wms from the DRCOG WMS server
    var wms = new OpenLayers.Layer.WMS("Muni Boundaries 2010",
		"http://gis.drcog.org/geoserver/gwc/service/wms?", 
		{layers: 'DRCOGPUB:muni_2010',
		 format: 'image/png',
		 transparent: 'true',
		 isBaseLayer: 'false',
		 projection: 'EPSG:2232',
		 reproject: 'true'
		});
    map.addLayer(wms);
    var click = new OpenLayers.Control.Click();
    map.addControl(click);
    click.activate();

});

Here are examples of server side languages actually using the api

PHP example


//Get the lat long from the click event

  $lat = $_POST["lat"];
  $long = $_POST["lon"];

 //Start building the url

  $base_url = "http://gis.drcog.org/REST/v1/ws_geo_identify?";
  $srid = '2232';
  $geotables = "muni_2010";
  $fields = "name";
  $distance = '50';
  $format = 'json';
  $values = "distance=".$distance."&format=".$format."&fields=".$fields."&geotables=".$geotables."&srid=".$srid."&x=".$long."&y=".$lat;
  $str_values = (string)$values; 
  $url = $base_url.$str_values;

 // Using PHP's curl library, I send the built url to the api server

  $get_data = curl_init($url);
  curl_setopt($get_data, CURLOPT_RETURNTRANSFER, 1);     
  $data = curl_exec($get_data);

 // echo my data back to my application

  echo $data;

C# Example


 public JsonResult IdentifyJson(string lat, string lon)
        {
            var base_url = "http://gis.drcog.org/REST/v1/ws_geo_identify.php?";
            var srid = "2232";
            var geotables = "muni_2010";
            var fields = "name";
            var distance = "50";
            var format = "json";

            base_url += "distance=" + distance + "&format=" + format + "&fields=" + fields + "&geotables=" + geotables + "&srid=" + srid + "&x=" + lon + "&y=" + lat;
            string result;
            object send;
            // Create the web request  
            HttpWebRequest request = WebRequest.Create(base_url) as HttpWebRequest;
            request.ContentType = "application/json; charset=utf-8";
            // Get response
            using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
            {
                // Get the response stream  
                using (var reader = new StreamReader(response.GetResponseStream()))
                {
                  //  JavaScriptSerializer s = new JavaScriptSerializer();
                    result = reader.ReadToEnd();
                }
            }
            return Json(result, "text/x-json", JsonRequestBehavior.AllowGet);
        }