ArcGIS JavaScript Web Dev Experienc

I want to document all encountered bugs, tricks, and solutions  during my web development with ArcGIS JavaScript API. 1. BUG: Query.where use LIKE SQL statement not working after ArcGIS Server 10.22 Use QueryTask, set Query.where = ‘PARAMETER LIKE %VALUE%’ will cause error: {“error”:{“code”:400,”message”:”Invalid or missing input parameters.”,”details”:[]}} SOLUTION: use Query.text = VALUE,  but make sure the display name in your ArcGIS web service is the PARAMETER you need to query. 2. TRICK: handle multiple unknow Asynchronous QueryTasks  I have to indicate multiple identify tasks running status, e.g. display loading gif when identifying many layers, after all done, then hide the loading status. Or to say, I want all query tasks running as synchronous, once all done to execute my function. QueryTask is asynchronous, can use promises with dojo deferredlist. My solution is using jQuery.

var deferredlist = []; 
$.each(queryTasks, function(index,queryTask){
     showLoading();
     var defer = function(){
      var def = $.Deferred();
      queryTask.execute(query,function(result){
        def.resolve();
        if (result){
         //show result}else{//show error
        }
      },function(err){def.resolve();});
   return def.promise();
}();
deferredlist.push(defer);
});
//after all done
$.when.apply($,deferredlist).done(function(){
    hideLoading();
});

3. SOLUTION: Get layer legend in plain Ajax from ArcGIS services You can use ArcGIS Legend widget to help you, but if you don’t like the default weird solution, here is one logic works in IE9+, Safari, and Chrome. You may need to add extra CSS to present legend nice.

var url = arcgis.mapserver.url/legend?f=json;
var layerIds = this.mapserver.layerids;
var dataType = (isIE() == true)?'jsonp':'json';
$.ajax({
      url:url,
      type:'GET',
      dataType:dataType,
      async:false,
      success:function(data){
        if (data){
          var layers = data.layers;
          $.each(layerIds,function(i,layerId){
            $.each(layers,function(l,layer){
                if(layer['layerId'] == layerId) {
                   var legends = layer.legend;
                   $.each(legends,function(le,legend){
                       var label = legend.label;
                       var img = legend.url;
                       var imgSrc = url + '/'+legend.layerId+'/images/'+img;
                    $('#legend-div').append('<img src="'+imgSrc+'"/><span>'+label+'</span>') 
                   });
                 }
             });
          });
        }else{
              //legend div to error msg
        }
      },
      error:function(error){ //legend div to error msg } });

4.KB: Tiled Layer, Dynamic Layer, Feature Layer, and Graphic Layer Tiled Layer is for ArcGIS map service which has pre-cached tiles in the server. Drawing on client is to request pre-generated image from server folders. Dynamic Layer is for ArcGIS map service which end with ‘/MapServer’, except cached service. Drawing is on server side per user extent query, sending image to the client to render. Feature Layer is for ArcGIS map service which end with ‘/MapServer/number’, having fours modes for quick rendering: MODE_AUTO,MODE_ONDEMAND, MODE_SELECTION, MODE_SNAPSHOT. Drawing is dynamic on the client side based on records query, and results are rendered in SVG. Graphic Layer is for general creation of customized graphic layer adding graphics to the map. You can set definitions to Dynamic Layer and Feature Layer to perform filtering function similar to SQL.

5. Search data points within selected point buffer distance
Say you already have thousands of points  retrieved from web service.
Then you need to perform a buffer on user mouse click on map, i.e. selected point. with distance 1KM.
Next you need to find out all the points within the buffer. You can use Geometry query to the ArcGIS server to get the results.
Alternatively, you can do a local search using the stored points.

After buffering done, you can get the extent of the buffer shape:  geometries[0].getExtent() from the buffer callback result.

var extent = gemoetries[0].getExtent();
var selected = point;
var result = [];
$.each(datapoints, function(value,index){
     if(extent.contains(value)){
         var distance = esri.geometry.getLength(point,value);
         if(distance <= 1000){
               result.push(value);      
         }
    }

});

6. Display graphic layer for different zoom level

For GraphicLayer, you can set minScale, and max Scale to let the map dynamically displaying itself when user zoom in/out.

see API: https://developers.arcgis.com/javascript/jsapi/graphicslayer-amd.html#maxscale

var small = new esri.layers.GraphicsLayer({id:type,maxScale:72224});
map.addLayer(small);//when zoom in map scale smaller than 72224, this layer will not show
map.getScale()//to determine current map scale
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s