Johnny Penet Blog

Using JSRender For creating ARCGIS related components

2013-10-22T11:35:00.000-07:00

1 Introduction

In a previous document I explained how you can use the JQuery template plug in for creating a legend component for the different layers used in a ArcGIS map application. However the bad news is that the JQuery template plug in is a beta release and will stay that way. Microsoft stopped new development on this JQuery template .

The good news is that there is an excellent library replacement JSRender for JQuery templates. This extension can be used as an independent library or as a plug in for JQuery. In this document I will explain the use of the JQuery plug in version of JSRender for creating a legend component.

One of the benefits of using JSRender for building legend or other modules is the use of the separation of the visual representation and the business logic through the use of models. So JSRender fits perfectly into the pattern separation of concerns as I already illustrated with the use of the JavaScript library KnockoutJS for using MVVM (Model View ViewModel) pattern.

Through the use of counters, I keep track of the different state of the asynchronous REST calls to know when to start the creation of the legend component with JSRender. As is the case for other components, the building of the legend component only starts after the map processing is completed. This is done using the event aggregate pattern publish and subscribe implemented in JavaScript that I described in a previous document.

The code illustrated is based on JavaScript files, template files and support for the ArcGIS framework outlined before when creating the model contents.

Below is an example of how a legend components looks after using JSRender plug in of JQuery.

2 Model

The first import JavaScript class I need for the legend is the model. The model is the blueprint that will be used in the template for building the legend. Its contents is built during the creation of the map with the layers specified in a configuration file. The model consists of an array of the type ‘LayerLegendInfo’ described below.

require(['dojo/_base/declare'], function (declare) {
   declare("gis.LayerLegendInfo", null, {
     constructor: function (url,id,title,renderer,renderType,
          serviceType,groupLayer,parentId,
          group, groupName,key) {
       this.url = url;
       this.id = id;
       this.parentId = parentId;
     this.renderer = renderer;
   this.renderType = renderType;
       this.serviceType = serviceType;
       this.title = title;
     this.groupLayer = groupLayer;
      this.group = group;
       this.groupName = groupName;
       this.sequence = Number(key.slice(-2));
     this.key = key;
     this.selected = true;
     }
});
});

It is important that all relevant data is filled in by the map initialization process as they will serve for the rendering process of the templates without interaction with the ArcGIS JavaScript API. The goal of module components is to be independent of the ArcGIS JavaScript API.

Important properties for the legend are :

Title Description of the layer

Sequence Used to sort the list into the correct sequence

on the legend component.

RenderType Definition of the different render types supported.

Possible values are :

ESRI defined types as of

· Simplefillsymbol /esriSFS

· Simplelinesymbol / esriSLS

· simplemarkersymbol

· picturemarkersymbol / esriPMS

Custom type : picturewmssymbol

Renderer Renderer object as defined by ESRI. The legend

template use the contents of this object to

display the symbols used in the layer,

including WMS layers defined outside the

ArcGIS JavaScript API.

3 Renderer information

For creating a legend, the most difficult part is to populate the renderer information for the different types of layers. The handling of the retrieving of renderer data is split into three types of layers. This is done because of the nature of the layers. Non ArcGIS layers have restricted data available for the rendering of templates. This is the case for WMS layers which are integrated into the legend component.

3.1 WMS Layer

As I stated earlier, the creation of the legend is based on the definition of the renderer class defined in the ARCGIS JavaScript API. In the case of WMS layer a custom renderer is used, the ArcGIS JavaScript API has no standard support for the legend of a WMS layer.

To simplify the building of a renderer for a WMS layer, I simplified two things.

· First to get to the layer symbols, I added an URL in the layer configuration file for each sub layer pointing to the legend image from the sub layer of the WMS layer. This could be done dynamic through a call to the WMS service using GetLegendGraphic, but this need asynchronous REST service calls. Doing REST service calls introduce extra complex processing, a direct link seems more simpler and result in better performance because no processing is required.

· Second, I need to create a renderer derived from an ESRI class to unify the processing for renderer symbols used in the templates. WMS layers have a picture symbol as legend symbol,. The renderer symbol used for WMS layers is derived from a picture symbol of the ArcGIS API. As renderer type I defined a new symbol type : picturewmssymbol, this will be used to verify the type of symbol linked to the layer. I only need to overwrite the type property.

Dojo class definition of the symbol class :

// Create a new class named "esri.symbol.PictureWmsSymbol"
dojo.declare("esri.symbol.PictureWmsSymbol", [
    esri.symbol.PictureMarkerSymbol
],
{
    type: "picturewmssymbol"
});

3.2 ARCGIS Dynamic Layer

Using the ArcGIS JavaScript API there is no direct possibility to retrieve the renderer information for the dynamic layer. Even after using the layer initialization event, renderer information is not returned at the client side. In the wake of a standard solutions from the ArcGIS API, we had to retrieve the rendering information exposed by the ArcGIS server through REST API calls.

The solution is doing a REST API call to the ARCGIS server for each layer of the ARCGIS Dynamic layer service. The best way for retrieving render information is after the initialization event. After the initialization event of the ARCGIS dynamic layer, a list of all layer id’s is returned. The id’s can be used for doing the REST API calls. Some filtering has to be done to limit the renderer information to feature layers only which have the symbol information.

The JSON object returned from the REST API call can be used as is, no transformation is required.

Step 1 : Loop through the list of dynamic layers and start a REST API for each sub layer.

Step 2: Extract the renderer data from the JSON object returned and update the legend model.

STEP 1

function updateLegend4DynamicServices(onFinished) {
/// <summary>
/// </summary>
/// <param name="onFinished"> Next step</param>
var baseMapLayerInfo;
dynamicLayerProcessed = 0;
dynamicLayerCount = 0;
dynamicProcessedComplete = onFinished;
var layerInfo;
try {
     $.each(layersSelectionInfos, function (index, layerSelection) {
     if (layerSelection.serviceType === layerTypes.Dynamic) {
         dynamicLayerCount++;
         if (commonData.DebugMode)
            logging.logMessage("I", "Get dynamic layer legend:" +
               layerSelection.url,
               "gisOperation/updateLegend4DynamicServices");
         var layersRequest = esri.request({
              url: layerSelection.url,
              content: { f: "json" },
              handleAs: "json",
              callbackParamName: "callback"
            });
            layersRequest.then(
               function (response) {
                updateLayerLegendList(response);
                verifyProcessDynamicServices();
               }, function (e) {
                 logging.logMessage("E", "legend request process
                 failed. " + e.message,
                 "gisOperation/updateLegend4DynamicServices");
            });
         }
     })
   } catch (e) {
    logging.logMessage("E", "process failed. " + e.name +
      " ini- " + e.message,
      "gisOperation/ updateLegend4DynamicServices");
}
}

STEP 2:

3.3 Feature layer

The handling of renderer for feature layers is a lot easier than the previous layer types. As soon as a feature layer has been initialized on the map all renderer information is available. The only thing that has to be done is handling the initialization event of a feature layer. As with other asynchronous processing a counter is used to know when all feature layers has been initialized. Here the selection model is also updated for the selection layer list component. To simplify the template processing of the model the class name of the renderer is used as render type.

4 Legend Templates

4.1 Template construction

Templates are the basic elements of JSRender. But besides simple templates, JSRender also allows a more complex usage of templates. With JSRender you can use a hierarchy of templates with conditional branches or loops.

In our implementation of a legend module the use of templates reflects the different layer types previous described. There are also a separate templates for the treatment of the rendering of the symbols used for the layers.

The structure of the templates is

· Main template (_legend.main.tmpl.html)

o Base layer template (_legend.baseLayer.tmpl)

§ Simple renderer template (_legend.simpleRender.tmpl.html)

§ Unique value renderer template (_legend.uniqueValueRender.tmpl)

o Feature layer template (_legend.featureLayer.tmpl)

§ Simple renderer template (_legend.simpleRender.tmpl.html)

§ Unique value renderer template (_legend.uniqueValueRender.tmpl)

The renderer templates are responsible for the creation of the different symbols for a layer. The legend model provides all the data needed to create the graphics for the legend. One of the useful features of JSRender is the possibility to create functions that can be used in a template. The use of template functions makes it possible to do transformation of contents during the rendering of the template.

The first thing you must do is the loading of the templates into memory, this results in quick processing of the templates. Because JSRender is integrated into JQuery, the whole loading of the templates can be done through one call as illustrated below. This way of working simplifies the asynchronous process.

You can add for each template additional methods using the property helpers of the template object.

$.when(
$.get(getPath('legend.main')),
$.get(getPath('legend.baseLayer')),
$.get(getPath('legend.featureLayer')),
$.get(getPath('legend.uniqueValueRender')),
$.get(getPath('legend.simpleRender'))
)
.done(function (main, baseLayer, featureLayer, uniqueValueRender,
                 simpleRender) {
      $.templates({
           mainTmpl: {
                markup: main[0],
                helpers: {
               }
           },
           baseLayerTmpl: {
                markup: baseLayer[0],
                helpers: {
                    clicked: {
                    }
                }
          },
          featureLayerTmpl: {
                markup: featureLayer[0],
                helpers: {
                     clicked: {
                         click: function () {
                              …

                          }
                     }
                }
          },
          uniqueValueRenderTmpl: {
                 markup: uniqueValueRender[0]
           },
           simpleRenderTmpl: {
                 markup: simpleRender[0]
           }
});

As an example of the use of templates and its possibilities, have a look at the simple renderer template. Its logic is simple and consists of a number of if then constructions.

<div style="display: table; margin: 0px 5px;">
{{if symbol.type == 'picturemarkersymbol' ||
symbol.type == 'esriPMS'}}
<div style="display: table; margin: 0px 5px;
align-content: flex-start;height:20px;">
<img style="padding-right: 10px; float: left;
display: inline-block;vertical-align:middle;"
src="data:{{:symbol.contentType}};base64,
{{:symbol.imageData}}" />
<span class="renderTitle">{{:~label}}</span>
</div>
{{else}}
{{if symbol.type == 'picturewmssymbol'}}
<div style="display: table; margin: 0px 5px;
align-content: flex-start;height:20px;">
<img style="padding-right: 10px; float: left;
display: table-cell;vertical-align:middle;"
src="{{:symbol.url}}" />
</div>
{{else}}
{{if symbol.type == 'simplefillsymbol' ||
symbol.type == 'esriSFS'}}
<div style="display: table; vertical-align: middle;
width: 16px;height: 16px;
background: {{colorConvert symbol/}};">
</div>
<span class="renderTitle">{{:~label}}</span>
{{else}}
{{if symbol.type == 'simplelinesymbol' ||
symbol.type == 'esriSLS'}}
<div style="margin: 8px 5px -15px 5px; width: 20px;
height: {{:symbol.width}}px;
background: {{colorConvert symbol/}};">
</div>
<span class="renderTitle">{{:~label}}</span>
{{else}}
{{if symbol.type == 'simplemarkersymbol' ||
symbol.type == 'esriSMS'}}
{{if symbol.style == 'STYLE_CIRCLE'}}
<svg id="circle" height="20"
xmlns="http://www.w3.org/2000/svg">
<circle id="greencircle" cx="10" cy="10" r="16"
fill={{colorConvert symbol.color/}}/>
</svg>
<span class="renderTitle">{{:~label}}</span>
{{/if}}
{{if symbol.style == 'STYLE_SQUARE'}}
<div style="display: table-cell;
vertical-align: middle;
width: 16px; height: 16px;
background: {{colorConvert symbol/}};
border: {{borderOutline symbol.outline/}};">
</div>
<span class="renderTitle">{{:~label}}</span>
{{/if}}
{{if symbol.style == 'STYLE_CROSS'}}
<div style="display: table-cell;
vertical-align: middle;
width: 16px; height: 16px;
color: {{colorConvert symbol/}};"></div>
<span class="renderTitle">{{:~label}}</span>
{{/if}}
{{if symbol.style == 'STYLE_X'}}
<div style="display: table-cell;
verticalalign: middle; width: 16px;
height: 16px;color: {{colorConvert symbol/}};">
</div>
<span class="renderTitle">{{:~label}}</span>
{{/if}}
{{if symbol.style == 'STYLE_DIAMOND'}}
<span class="renderTitle">{{:~label}}</span>
{{/if}}
{{if symbol.style == 'STYLE_PATH'}}
<span class="renderTitle">{{:~label}}</span>
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
</div>

To make the rendering working, I has to introduce a couple of template functions that will create the desired rendering for creating a symbol. An example of such a function is ‘colorConvert’. This function takes as input a color object and create as output the html code for a color symbol in the format of rgba(255,255,255,0) or rgb(255,255,255). Below is the JavaScript for this function.

$.views.tags({
….
colorConvert: function (symbol) {
var colorObject = symbol.color;
if (colorObject === null) {
colorObject = symbol.outline.color;
}
if ($.type(colorObject) === 'object') {
return buildColor(colorObject);
}
else {
if ($.type(colorObject) === 'array') {
return buildColorArray(colorObject);
}
}
},
….
});

A supporting function is also used for creating the string representation of the color. As you can see, JSRender give you a lot of possibilities for doing some extra processing during the rendering of the templates. Because symbols can have different formats, some checks are done to determine the nature of the symbol passed.

function buildColor(col) {
if (col === null) {
col = [0, 0, 0, 0];
}
var prefix =
($.support.opacity) ? "rgba" : "rgb",
color = (!$.support.opacity) ? col.r + "," + col.g + "," +
col.b : col.r + "," + col.g + "," + col.b + "," +
col.a;
return prefix + "(" + color + ")";
}

A more complex type of template is the one that handles the base map layers. Because there is a variety of layer types, a number of ‘if then else’ blocks are required. I also has to make a difference between group layer items and detail layer items that will contain legends if available. A template for the base map layers could look like this:

<li style="list-style: none; margin-left: -10px; padding: 0px;">
{{if !group}}
<br />
<div style="margin-left: 0px; align-content: flex-start;">
<input type="checkbox" class="oncheck" style="float: left"
id="{{:key}}" checked="{{checked selected/}}" />
<h3 class="legendTitle" id="G{{:key}}"
style="margin: 0 0 0 0px; padding: 0;">{{:title}}</h3>
</div>
{{else}}
{{if (group && sequence == 0)}}
<br />
<div style="margin: 0px; padding: 0px;
align-content: flex-start;">
<input type="checkbox" class="oncheck" style="float: left;"
id="GG{{:key}}" checked="{{checked selected/}}" />
<h3 class="agsLegendOpen legendTitle" id="G{{:key}}"
style="margin: 0 0 0 0px; padding: 0;">{{:groupName}}</h3>
</div>
{{/if}}
<div style="margin: 0 0 0 20px; padding: 0px;
align-content: flex-start" class="{{groupClass key/}}">
{{if serviceType == 2 || serviceType == 5}}
<input type="checkbox" class="oncheck" style="float: left;"
id="{{:key}}" checked="{{checked selected/}}" />
<h3 class="legendTitle" id="GT{{:key}}" style="">{{:title}}
</h3>
{{/if}}
{{if renderType == 'simple'}}
{{for renderer tmpl='simpleRenderTmpl' ~label=title/}}
{{else}}
{{if renderType == 'esri.renderer.UniqueValueRenderer' ||
renderType == 'uniqueValue'}}
<ul>
{{for renderer.uniqueValueInfos
tmpl='uniqueValueRenderTmpl'/}}
</ul>
{{else}}
{{/if}}
{{/if}}
</div>
{{/if}}
</li>

As you can see, the template represents one item of the legend model. The main tasks for this template is to call the different renderer templates based on the type of renderer associated with the layer in the legend model. By creating a hierarchical template structure you can simplify the logic of the templates. JSRender fits nice into the MVVM pattern as there is a clear separation of data and presentation. The only extra code required for the presentation of the legend is the use of template functions.

The legend module has more than simply displaying legends for the different layers. In the ArcGIS desktop application the legend representation is also used to perform action as hide or display layers, add or remove layers, zoom to layers and other custom actions.

Interacting with the legend can easily done through adding event handling to the different nodes of the legend. To do this I used the power of JQuery based on class selections. Below You can see how different actions has been implemented by connecting functions to different events :

· The setting of the visibility for a layer is done through adding the event handling to the change event of the check box of the layer legend.

· Clicking on the title is used to expand or collapse the different renderer symbols

· The right click on the title is used to display a pop up menu with additional actions possible for the layer concerned. Something similar exists on the ArcGIS desktop application.

$('input.oncheck').on("change", function (event) {
handleVisibility($(this).context.id,
$(this).context.checked);
});
$('.legendTitle').on("click", function (event) {
$target = $(event.target);
$("." + $target.context.id).toggle();
$target.toggleClass("agsLegendOpen")
.toggleClass("agsLegendClosed");
});
$('.legendTitle').on("mouseout", function (event) {
handleRightClick($(this).context.id);
});
// Collapse the legend to the minimum and add a popup menu
$('.legendTitle').each(function () {
if ($(this).hasClass("agsLegendOpen")) {
$("." + this.id).toggle();
$(this).toggleClass("agsLegendOpen")
.toggleClass("agsLegendClosed");
popupMenu.bindDomNode($(this).context);
}
});

The nice thing you can see here is that building of a legend component can be done without any use of the ArcGIS API. All the renderer is done through the use of the model with the template as blue print for the layout. Interacting can be done with standard JavaScript event handling. The heavy lifting processing of setting visibility or hiding can be done in separate functions. The function ‘handleVisibility’ takes as input the key value of the legend model and the value of the check box. Using this information the corresponding layer can be retrieved and using the GIS classes the appropriate action can be done.

4.2 Custom actions

As an example of adding extra functionality to a template is the adding of a pop up menu to the legend. For each legend line I will add the possibility to have a pop up menu displayed when the user is doing right click on the legend.

First, I create a pop up menu using the menu UI from DOJO. This looks like this :

// Create popup menu
popupMenu = new dijit.Menu({
targetNodeIds: [configuration.getConfig().LegendRegionDiv]
});
popupMenu.addChild(new dijit.MenuItem({
label: "Attribute List",
onClick: function (evt) {
attributeList(evt);
}
}));
popupMenu.addChild(new dijit.MenuItem({
label: "Zoom Layer",
onClick: function (evt) {
zoomLayer(evt);
}
}));
popupMenu.addChild(new dijit.MenuItem({
label: "Zoom to selected",
onClick: function (evt) {
zoomSelected(evt);
}
}));
popupMenu.addChild(new dijit.MenuItem({
label: "Select all",
onClick: function (evt) {
selectAll(evt);
}
}));
popupMenu.startup();

Next I have to connect the display of the pop up menu to the different legend items of the legend component. This can be done during the creation of the template as outlined earlier.

$('.legendTitle').each(function () {
if ($(this).hasClass("agsLegendOpen")) {
$("." + this.id).toggle();
$(this).toggleClass("agsLegendOpen")
.toggleClass("agsLegendClosed");
popupMenu.bindDomNode($(this).context);
}
});

Next we connect a right event handling to the legend component. The best thing is doing it through the use of a class used in the template.

$('.legendTitle').on("mouseout", function (event) {
handleRightClick($(this).context.id);
});

The actual processing is done on a separate function. This function simply set the layer selected so that when a click on the menu of the pop up menu the related action can be done on the selected layer.

function handleRightClick(key) {
// Handling of the different menu options
var legendLayers = gisOperation.getLayersLegendInfos();
layerSelected = $(legendLayers).filter(function () {
return this.key === key;
}).first();
}

The pop up menu action looks like the functions below, the implementation is left over. The functions are called on the click event of the pop up menu described earlier.

function zoomLayer(evt) {/// <summary>/// /// </summary>/// <param name="evt"></param>

... use layerSelected to do some action, the event passed is not relevant here.

}

function zoomSelected(evt) {/// <summary>/// /// </summary>/// <param name="evt"></param>

….

}

function selectAll(evt) {/// <summary>/// /// </summary>/// <param name="evt"></param>

….

}

5 Conclusion

The same technique can be used for other components. As an example is the layer selection tab for adding a functionality similar as what can be found on the selection tab of the ArcGIS desktop application. With the use of template files it is also easier to have a different look and feel of components with the same JavaScript code in the module. Most important of all is that JSRender fits into the pattern of MVVM with a clear distinction of the presentation and the model.

ArcGis JavaScript API - Extending an existing editing tool

2013-09-21T14:15:00.000-07:00

Extending an existing editing tool

1 Introduction

I got a question how an existing editing tool could be used for another type of geometric operation. In a previous document I showed how the use of the ‘cut’ method of the ArcGIS geometry service can be used to split a geometry into different parts. The tool consists of selecting a geometry and using a polyline drawn. A split operation can be initiated through a REST call to the ArcGIS geometry service with the two geometries or collection of geometries.

In this document I will explain how you can use the ‘cut’ method of the ArcGIS geometry service to do a similar operation but using a polygon instead of a polyline. You could consider this tool as a kind of punch tool for a geometry. Below is the illustration of the different steps involved in the special split command. I start with a geometry shown below:

After a polygon has been drawn inside the geometry to be split, the result is shown below:

The two polygons looks like this:

2 Using the ‘cut’ method

Given the polygon as input, I want to use to border line of the polygon for cutting a geometry out of the selected polygon. In the tool described hereafter I assumed that the polygon has a simple structure consisting of one solid block.

In the ArcGIS JavaScript API you can see that a polygon consists of an array of rings. A ring consists of an array of points. If we are looking at a polyline, you can see that a polyline consists of an array of paths. A path consists of an array of points. So the common data structure of polyline and polygon is that both consists of arrays of points. What we basically must do is converting the polygon drawn into a polyline. This can simply done by creating an empty polyline and adding a path consisting of the array of points of the first ring of the polygon.

var polyline = new esri.geometry.Polyline(polygon.spatialReference);

polyline.addPath(polygon.rings[0]);

And as in the split command, do a REST call to the cut command of the ArcGIS geometry service by using the previous defined split function based on a polyline and a set of polygons.

     this.splitOperation(featureLayer, selectGraphics, polyline,

       geometryServiceComplete, geometryServiceFailed);

3 Conclusion

In ArcGIS desktop you can use built-in tools and commands to write extensions on ArcGIS desktop to create more powerful tools and commands. This makes it for the user easier to do editing on geometries by using this custom tools and commands.

For web editing you can do exactly the same thing. For web, the built-in tools are the different geometry tools available in the ArcGIS geometry service. You can also create new tools on the server

Some interesting statistics from the development community of ArcGis Web applications.

2013-03-02T15:17:00.001-08:00

Over a period of 18 months I published two series of documents covering the creation of frameworks on top of ArcGis API libraries. The purpose was to illustrate how the legacy Web ADF can be replaced by a framework on top of the ArcGis API’s. The first series covers the development of ArcGis Silverlight applications. The second series covers the development of HTML 5 applications using JavaScript. Both series can be found at my blog http://jpenet.blogspot.com

Over a period of 20 months I gathered statistics about the daily number of page views on the different documents. Due to the nature of the contents, most of the viewers are developers. Below I show an overview of the statistics. A score is calculated based on the number of views and the number of days a document is online. A higher score shows the importance of topics as viewed by ESRI API developers.

The following trends I saw in these numbers:

There is more interest in doing development in JavaScript than Silverlight. The last 6 months I saw a rate of 90% JavaScript page views against 10% Silverlight views. This illustrate that the future lays in JavaScript development and that less applications in Silverlight and Flex will be developed. The fact that Silverlight is end of life and the scaled down development of flex is not strange to this direction of development.

Documents related to software architecture patterns scores very good for Silverlight. For JavaScript the use of the AMD pattern scores very well despite being one of the last documents created. The latter is also related to software patterns.

For JavaScript there is a huge interest in transformations of projections. The document is not purely development stuff, this could explain the high page views. Other more technical documents scores also good.

Creation Data	Score	Description
2011-07-25	1,47	USE OF PRISM AND MVVM IN ARCGIS SILVERLIGHT APPLICATIONS. PART I
2011-09-03	0,97	MAKE ARCGIS SILVERLIGHT CONTROLS MVVM ENABLED - PART VI
2011-08-22	0,83	LOGIN PATTERN USING MVVM AND PRISM IN COMBINATION WITH MAPSERVICES PART V
2011-07-27	0,62	USE OF PRISM AND MVVM IN ARCGIS SILVERLIGHT APPLICATIONS. PART II
2011-12-04	0,45	STUDY : USING the ArcGis API for Microsoft Silverlight/WPF to create an ArcGis Database edit solution.
2012-01-17	0,39	SIMPLE EDIT COMMANDS AND TOOLS - PART VII
2011-08-02	0,26	CREATION OF COMMANDS AND TOOLS - PART III
2011-08-10	0,23	CREATION OF COMMANDS AND TOOLS ADVANCED - PART IV
Global average Silverlight API	0,65

Creation Date	Score	Description
2012-08-07	2,19	Transformation between datum's in JavaScript – Part 1
2012-11-10	1,80	Using AMD pattern to create modular ArcGis JavaScript Applications
2012-12-05	1,67	ARCGIS JavaScript API – ADVANCED EDITING TOOLS PART VI – Part 1
2012-05-24	1,44	ARCGIS JavaScript API –Using Google Streetview with WMS
2012-07-04	1,24	Using different projections within ArcGis JavaScript Applications
2012-03-13	1,23	ARCGIS JavaScript API – BUILDING A LEGEND COMPONENT – PART II
2012-06-09	1,17	ARCGIS JavaScript API – BASIC EDITING COMMANDS SECTION 2 – PART V
2012-05-09	1,17	ARCGIS JavaScript API – BASIC EDITING COMMANDS SECTION 1 – PART V
2012-03-07	0,91	ARCGIS JavaScript API – CREATION OF AN APPLICATION FRAMEWORK – PART I.
2012-08-14	0,78	Transformation between datum’s in JavaScript – Part 2
2012-04-25	0,76	ARCGIS JavaScript API – USING BASIC GIS TOOLS AND COMMANDS – PART IV
2012-03-26	0,47	ARCGIS JavaScript API – ADDING A LAYER SELECTION – PART III
2012-07-22	0,42	ArcGis JavaScript API and Google Places API
2012-02-17	0,40	BUILD JAVASCRIPT APPLICATION FRAMEWORK WITH ARCGIS API
Global average JavaScript API	1,12

ARCGIS JavaScript API – ADVANCED EDITING TOOLS PART VI – Part 1

2012-12-05T14:28:00.003-08:00

1. Introduction

In this document I will treat the creation of more advanced editing tools. In the ArcGis JavaScript API it is difficult to perform geometric operations on geometry in code. However to perform advanced geometry operations we can use the geometry services available at an ArcGis server. Using this technique you are able to perform actions as split and merge of geometries. By combining geometry service methods you can even more complex operations. Some tools will using the basic edit commands as building blocks for creation of advanced tools is. In another example I will show how you can use the JavaScript API to build tools in native JavaScript code without geometry services.

Another solution for extending editing by using Service Object Extensions (SOE). They can play the same role as does the geometry services of the ArcGis Server.

2. Primary geometry tools

Two important tools in web editing are the split and merge tool. Like other commands explained in previous documents, the tools are triggered through the use of the MVVM (Model View ViewModel+) library and buttons on the web page.

2.1 Split tool

The split tool for a polygon was implemented by doing the following steps:

·         Select a feature (polygon)
·         Draw a polygon that is used for the split action
·         Perform the method cut of the geometry service
·         Update the feature with one part of the split
·         Add the remaining parts as new features to the layer, attribute information is copied from the
        selected feature.

The first two actions are already part of the framework. I only has to implement the use of the geometry service ‘cut’ with a callback method. The update and add of features are implemented in the callback method.

The split command in the ViewModel looks contains the following code:

splitCommand: function () {
   try {
   // Verify a polygon is selected on the layer specified
     var featureLayer = null;
     if (commonData.ViewModel.selectedLayer() != null)
          featureLayer = gisOperation.getMap().getLayer(
     commonData.ViewModel.selectdLayer().layerName);
    if (featureLayer == null
       || featureLayer.geometryType != "esriGeometryPolygon"
       || featureLayer.getSelectedFeatures().length < 1) {
     // Invalid choice
       commonData.ViewModel.setEditActive(false);
       return;
     }
     // Draw line
     gisCommon.drawGeometry(esri.toolbars.Draw.POLYLINE, splitLineComplete);
   } catch (err) {
     logging.logMessage("E", "error in splitCommand ->" + err.name + " - "
          + err.message, "editToolbarAdvancedVM");
   }
}

After the line has been drawn, in the callback the cut operation is executed through a call to the gisEditing class. A callback method is added in case some past processing is needed at the business level. All tools contains also an error processing method, very important there are errors during the geometry service method calls.

The procedure outlined in this split tool is used for all the advanced tools I implemented. In general what I do is

1.       Do the necessary selection of features.
2.       Activate the tool , in general done through a button click.
3.       If needed, start a drawing action through the general draw tool.
4.       Use a callback to step to a next action.
5.       Repeat step 4 if different actions are required.

This is in general the steps you will do if you would add a tool to ArcMap as an extension. In development of extension you will use events instead of callback methods.

It is also very important to encapsulate all code into a try catch structure. During writing tools often the asynchronous working of geometry operations can results in unexpected behaviors.

2.2 Merge tool

The merge tool can be considered as a command in terms of ArcMap. This tool is much simpler than the split tool. For the merge I only require the selection of a number of features of a feature layer. As is the case with the split tool, the geometry service of an ArcGis server will do the hard work of doing a union of the geometries.

The only asynchronous process required after the merge is the post processing of the features on the feature layer, consisting of an update of a feature (geometry) and a delete of a feature.
The startup of the merge tool is similar as that with the split tool:

unionGeometries: function (featureLayer, selectGraphics, geometryServiceComplete,      geometryServiceFailed) {
   try {
     if (geometryServiceFailed == null)
       geometryServiceFailed = defaultErrorHdl;
     currentCallBack = geometryServiceComplete;
     currentFeatureLayer = featureLayer;
     var selectGeometries = new Array();
     for (var i = 0; i < selectGraphics.length; i++) {
       selectGeometries.push(selectGraphics[i].geometry);
     }
     gisOperation.getGeometryService().union(selectGeometries,
     unionGeometriesCompleted, geometryServiceFailed);
   } catch (err) {
      logging.logMessage("E", "merge polygons failed -->"
       + err.message, "gisEditing/unionGeometries");
   }
} As you can see, a lot of code is similar to the code used for the split tool. The most important line is the call to the geometry service ‘union’. The callback function will gives us the merged geometry. The only thing that remains is the update and delete of features so that only one feature remains as the result of the merge.

3. Native JavaScript tools

It is not always an easy job to create geometry tools entirely in JavaScript. However the ArcGis JavaScript API offers some possibilities through the composition of the polygon and polyline classes. One example of a tool from ArcMap that can be reproduced in JavaScript is the explode tool. The principle is very simple :

· For polygons, isolate each ring into a separate geometry (polygon)
· For polylines, Isolate each path into a separate geometry (polyline)

You only need to delete the original feature and replace it by a number of new features corresponding to the number of rings or paths. No round trip is required to the ArcGis server for creating the different geometries, only an asynchronous operation is required to update the feature class with the new features.

explode: function (featureLayer, feature, callback) {
   try {
     var updateFeatures = new Array();
     var addFeatures = new Array();
     var deleteFeatures = new Array();
     var actionRequired = false;
     var newGeometry;
     var newGraphic;
     currentAttributes = clone(feature.attributes);
     currentAttributes[featureLayer.objectIdField] = null;
     currentSymbol = feature.symbol;
     currentFeatureLayer.clearSelection();
     switch (feature.geometry.type) {
     case "polygon":
     // Create number of features of rings in the geometry
       if (feature.geometry.rings.length > 1) {
         actionRequired = true;
         var ringCount = feature.geometry.rings.length;
         for (var i = 0; i < ringCount; i++) {
         newGeometry =
           new esri.geometry.Polygon(feature.geometry.spatialReference);
         newGeometry.addRing(feature.geometry.rings[i]);
         newGraphic =
           new esri.Graphic(newGeometry, currentSymbol, currentAttributes);
         addFeatures.push(newGraphic);
         }
         deleteFeatures.push(feature);
      }
      break;
    case "polyline":
    // Create number of features of paths in the geometry
      if (feature.geometry.paths.length > 1) {
        for (var i = 0; i < feature.geometry.paths.length; i++) {
          newGeometry =
            new esri.geometry.Polyline(feature.geometry.spatialReference);
          newGeometry.addPath(feature.geometry.paths[i]);
          newGraphic =
            new esri.Graphic(newGeometry, currentSymbol, currentAttributes);
          addFeatures.push(newGraphic);
        }
        deleteFeatures.push(feature);
        actionRequired = true;
      }
      break;
    default:
      break;
    }
    if (actionRequired) {
      featureLayer.applyEdits(addFeatures, updateFeatures, deleteFeatures,
      function (addResults, updateResults, deleteResults) {
        var updateCount = updateResults.length + addResults.length;
        callbackExplode(updateCount, callback);
        }, function (err) {
          logging.logMessage("E", "explode failed -->" +
            err.message, "gisEditing/explode");
       });
    }
    else {
      callbackExplode(0, callback);
    }
  } catch (err) {
      logging.logMessage("E", "explode failed -->" +
       err.message, "gisEditing/explode");
  }
}

As you can see not very complex to realize. This tool will work in polygons and polylines that consist of simple multipart geometries. If the geometry consist of a complex structure, this tool could fail, in the current implementation failures are logged.

Another example of a tool that can be realized in JavaScript is the lengthening or shortening of a polyline over a given distance ,at the start or at the end of the polyline. This is a tool that I previous developed as an ArcMap tool. Here you can use methods exposed in the esri.geometry namespace.

4. Complex geometry tools

A first tool is the creation of a polygon based on points added on the map. This tools involves two buttons, one to start creation of points on the map. A second button will create the polygon using the method convexHul l of the geometry service of an ArcGis server. Even as the tool looks complex, the implementation is very simple, thanks to the geometry service of an ArcGis server.

createConvexHull: function (featureLayer, pointList, geometryServiceComplete,
   geometryServiceFailed) {
   try {
     gisOperation.disableDrawMode();
     if (geometryServiceFailed == null)
       geometryServiceFailed = defaultErrorHdl;
     currentCallBack = geometryServiceComplete;
     currentFeatureLayer = featureLayer;
     var points = new Array();
     for (var i = 0; i < pointList.length; i++) {
       points.push(pointList[i].geometry);
     }
     gisOperation.getGeometryService().convexHull(points, convexHullCompleted,
        geometryServiceFailed);
   } catch (err) {
      logging.logMessage("E", "ConvexHull failed -->"
        + err.message, "gisEditing/createConvexHull");
   }
}

In the callback we can now add the resulting geometry as new feature to the feature class selected using default values for the attributes.

5. Conclusion

In this first part I illustrated how easy you can add custom tools to an editing ArcGis application. Doing some advanced editing requires the use of a geometry service at an ArcGis Server. When you required some functionality not found in the geometry service, you can move towards the creation of Server Object Extensions(SOE) and use them in the same way as using geometry services. Knowledge of ArcObjects is a must when starting with writing Server Object Extensions. Use always rest services when using SOE’s, you don’t want XML from a SOAP web service, but Json. Adding SOE’s is best done in a separate Dojo class, so it can only be loaded when needed through AMD.

Using AMD pattern to create modular ArcGis JavaScript Applications

2012-11-10T04:54:00.001-08:00

1. Introduction

As from Dojo 1.7, the pattern of using modular JavaScript classes was introduced to load JavaScript files asynchronous, no longer requiring loading the files at the retrieve of a html files or at least create a much simpler approach of this pattern. With the version 3.2 of the ArcGis JavaScript library ESRI introduced AMD for its portal API. ESRI will extend the use of AMD in other modules with later releases.

In this document I will illustrate how we can use this pattern to refactor the GIS framework described in earlier documents. You will also see how popular other libraries can fit into this pattern.

2. The modular approach

In modular languages the last years new design patterns has been introduced to create modular and maintainable applications. Two patterns that emerged are separation of concerns and loose coupling. In the picture below I outlined the flow of the different modules with the dependencies between them. The way Dojo AMD works can at a certain stage be compared to the use of PRISM for Silverlight/WPF applications which is a library that implements the two patterns separation of concerns and loose coupling .

Dojo AMD is responsible to create classes and inject there dependencies into the modules which helps us to create the modular concept. One of the goals of AMD is to restrict the use of global variables and encapsulate as much as possible into the created classes this covers the separation of concerns.

In the previous version of my framework I heavenly relied on global variables that were created at the startup. With AMD this will no longer be the case, as they will be maintained by Dojo and can be compared to the pattern of loose coupling.

In PRISM on Silverlight/WPF there is component container that contains all objects which can be defined with a single or multiple occurrence.

Most of the modules we will need does not require multiple instances, but rather requires to be a singleton. Dojo AMD does not have a definition singletons. The map module, legend module and others requires only a single instance. Below you will find the blue print of a module definition that we can use to implement a singleton class in Dojo AMD . You can find more information on this pattern at

http://unscriptable.com/2011/09/22/amd-module-patterns-singleton/

A typical singleton module has the structure outlook below.

define ([…],function () {

                var instance;
                // Add here the local variables and the local functions
                function Singleton() {

}

                Singleton.prototype = {
                // Add here your public methods
                 }
                return (instance || (instance || new Singleton()));
});

When the require function create the class it always returns the same object. In our application all component modules as map, legend, toolbars are created as a singleton. This is also the case for the viewmodels in the MVVM pattern, except the main viewmodel , that I will explain later.

In a future document I will illustrate a regular AMD class that will create a new type of layer derived from the graphic layer that I called ‘sqlLayer’ and can have multiple instances. This class will make it possible to add SQL tables that have a geometry element and that are not managed by an ArcSde server. A REST service is responsible for doing the CRUDQ actions. A typical example is the use of a Microsoft SqlGeometry attribute in a table.

3. Before and after AMD illustrated

In the diagram illustration of the different modules, you can see the different components of a typical GIS application. With the help of KnockoutJS the demo application gives us the possibility to make a separation between the GUI and the business logic. I wanted also separate the GIS modules from the Business modules. The best solutions is when you can also separate the business components from the ArcGis JavaScript API.

First look at the situation before using AMD.

As you can see, this looks horrible if you not try to group the JavaScript files into more global files, but then you lose the modularity when you try to replace one module by another version. The AMD is clearly a solution to this issue. After transferring to AMD, the same code now looks like this:

var dojoConfig = {

async: true,

tlmSiblingOfDojo: false,

parseOnLoad: true,

packages: [

{ "name": 'jtSoftware', "location": "/Scripts/Gis" },

{ "name": 'helper', "location": "/Scripts/Helper" },

{ "name": 'viewModels', "location": "/Scripts/ViewModels" },

{ "name": 'modules', "location": "/Scripts/Modules" },

{ "name": 'common', "location": "/Scripts", main: "globalDefs" },

{ "name": 'google', "location": 'https://maps.googleapis.com/maps/api/js?

sensor=false'},

{ "name": 'jquery', "location": 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2', main: 'jquery.min' },

{ "name": 'jqueryui', "location": 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0', main: 'jquery-ui.min' },

{ "name": 'jquerytmpl', "location": "/Scripts", main: 'jquery.tmpl'},

{ "name": 'jqueryxml', "location": "/Scripts", main: 'jquery.xml2json'},

{ "name": 'ko', "location": 'http://ajax.aspnetcdn.com/ajax/knockout', main: 'knockout-2.1.0' }]

};

</script>

As you can see, all dependencies defined by require before AMD are gone and are now defined in the different modules as happens in high level programming languages.

With the use of packages, you now can group different JavaScript files together like you use libraries into high level programming languages.

The result is now a HTML page with little JavaScript code embedded. This makes a more clear separation between code behind (JavaScript embedded) and the business logic. Adapting the GUI for different environments (Mobile, Pad, Desktop) is no longer requiring adapting the different JavaScript definitions but can be done at module loading.

The loading of external libraries is defined also with the packages option. Popular libraries as ‘jquery’ and ‘knockoutJS’ can make use of AMD and are ether AMD compliant or are either support AMD loading as is the case of ‘jquery’. For jquery you must explicit define a property.

define.amd.jQuery = true;

4. The flow of processing

In the HTML besides the loading of the ArcGis JavaScript API library, only one other JavaScript file is included in the HTML page, the ‘bootstrapper.js’. All will start with this module which after loading the configuration file kicks of the whole loading process of the different components of the HTML page. In the picture shows earlier, I illustrate how all different modules interact with each other. The following order is executing :

·         Document ready
·         Get configurations
·         Create viewmodel(s
·         Map module initialization
·         Legend Module
·         Layer Selection module
·         Toolbar modules

During the loading of the modules, the needed GIS modules are loaded through the AMD pattern. Another important aspect is the asynchronous starting of the initialization of the modules. To manage this asynchronous behavior the observer pattern is needed in pour application. For this I use a custom class ‘EventAggregator’ explained in an earlier document

http://jpenet.blogspot.be/2012/03/arcgis-javascript-api-creation-of.html

The use of publish and subscribe can also be used with the Dojo library, but for now I stick to this simpler solution. It is very important, at least in the development stage, to add a lot of logging information for tracking the asynchronous process. With AMD, you now have two dimensions into the asynchronous process :

· Asynchronous processing of GIS operations

· Asynchronous loading of the AMD classes

In the first version of the JavaScript implementation I mostly used the closure pattern .The refactoring of the modules for AMD (Singleton pattern) is not a hard job, there is already a separation of local variables, only some renaming is required.

5. Separation of concern

In the flowchart of the modules, you see there are three main parts

· GUI interface

· Business logic

· GIS modules

o GIS Framework

o ESRI ArcGis JavaScript API

With the use of MVVM through the library ‘knockoutJS’ I already separated the GUI interface from the business logic implemented with the map module, legend module, select layer module and the different viewmodel modules.

It is also useful to separate the Business logic from the ESRI ArcGis JavaScript API. In the current implementation this Is not the case, but it is not a hard work to encapsulate all the direct use of ESRI components into the GIS framework. Although it was not the purpose in this study to replace the ESRI GIS solution by another GIS solution, by doing a clear separation of the business logic from the ArcGIS JavaScript library you could create an application based on another GIS implementation (OpenLayers , GeoServer) by replacing the GIS framework modules.

For the moment there are a limited number of modules in the GIS framework. A split into core functionality and separate functional modules is a next step in implementing AMD. You can by example put all Google functionality into one separate module. Editing could also be split into base editing and more advance edit functionality.

6. A first look at the AMD modules

To illustrate what the look is from the singleton modules created for the AMD version, I will show what I did with the map module. The creation of the map module is at the heart of the bootstrap process. All modules depends on the creation of a map module.

Before we had this as

var mapModule = (function () {

Now the header this looks as:

define(["helper/logging", "helper/eventAggregator",

"jtSoftware/configuration", "jtSoftware/gisOperation", "jtSoftware/gisEditing", "modules/legendModule"],

function (logging, eventAggregator, configuration, gisOperation, gisEditing, legendModule) {

The header shows now the dependency of the different classes. Through the parameters the Dojo library performs the dependency injection.

The method functions defined in the map module in the closure pattern is coded as

return {

init: function (divElement, mapLayersInitialized) {

try {

esri.config.defaults.map.slider = { left: "30px", top: "30px", width: null,

height: "200px" };

var mapControl = new esri.Map(divElement, {});

In AMD with the singleton pattern looks now like

MapModule.prototype = {

init: function () {

try {

gisOperation.setSlider("30px", "30px", null, "200px");

gisOperation.setMap(commonData.MapRegion);

mapControl = gisOperation.getMap();

In the code above you can see how de dependency of the ArcGis library in the earlier version was removed by encapsulating the creation of the map object within the GIS framework. This is the job to be done for making the business layer independed of the GIS architecture choosen.

The loading of the ESRI components will be kicked off by the GisOperation module of the GIS framework through AMD pattern.

In a next document I will illustrate more of the practical aspects in detail to move towards AMD implementation.

Transformation between datum’s in JavaScript – Part 2

2012-08-14T04:48:00.002-07:00

1. Introduction

In part 1 I explained the software architecture used for doing transformations between two different coordinates systems. In this document I will show you how in JavaScript you can develop the different functions (conversions and translations) needed for the transformations. All the functions showed here are not related to ArcGis , so you can use them on all situations when You need to convert local coordinates.

The transformation that will be implemented here is those between the WGS 84 geographic coordinates systems and the Lambert 72 projected coordinates systems. As you already seen in part 1, the transformation happens through different steps. Some of these steps can be used in the transformations of other coordinates systems than Lambert 72. However some of the functions used are only valid for the Lambert 72 projected coordinates systems.

When writing a transformation yourself, you will need some form of unit testing. This will only partial covered here, but in the document OGP Publication 373-7 there are test values that can be used with simple function calls. It is important of doing unit tests on each different function before a complete integration can be done of the different steps. An error on one of the steps results in inaccurate coordinates and makes it difficult to debug a wrong transformation.

2. Software algorithm outlined

Transformation between WGS 84 geographic coordinates system and Lambert 72 projected coordinates systems consist of 4 steps to be executed. Two types of coordinates are involved in the transformation, latitude , longitude expressed in degrees (radians) and x, y, z coordinates expressed in meters.

To support different conversions and translations, two tables of JSON objects are used. One table defines the ellipsoid parameters and another table defines the translation parameters, mainly the Helmert 7 parameters.

Below is an example of some values in the tables.

// ellipse parameters

CoordTransform.ellipse = {
GRS80:     {
            a: 6378137,
            b: 6356752.3141,
           f: 1 / 298.2572215381486,
           e: 0.08181919111988833,
           e2: 0.006694380035512838
    },
Intl1924: {
           a: 6378388.000,
           b: 6356911.946,
           f: 1 / 296.9999982305938,
           e: 0.0819918902228546,
          e2: 0.006722670062316669
   },
Agd66:     {
          a: 6378160.0,
          b: 6356774.719,
          f: 1 / 298.25,
          e: 0.08182018036905428,
          e2: 0.006694541915624534
   },
WGS84:     {
          a: 6378137,
          b: 6356752.3142,
          f: 1 / 298.2572229328697,
          e: 0.08181919092890624,
          e2: 0.006694380004260827
    }
};

// Transformation parameters (Helmert + Conic Conformal SP2 (Belgium)

CoordTransform.datumTransform = {
       toLambert72: {
                                   tx: 106.868628, ty: -52.297783, tz: 103.723893,
                    rx: -0.33657, ry: 0.456955, rz: -1.842183,
                    s: -1.2747,
                    latF: 1.57079633,
                    lngF: 0.07604294,
                    lat1Par: 0.86975574,
                    lat2Par: 0.89302680,
                    eastF: 150000.01256,
                    northF: 5400088.4378
       },
       fromLambert72: {
                                   tx: -106.868628, ty: 52.297783, tz: -103.723893,
                    rx: 0.33657, ry: -0.456955, rz: 1.842183,
                    s: -1.2747,
                    latF: 1.57079633,
                    lngF: 0.07604294,
                    lat1Par: 0.86975574,
                    lat2Par: 0.89302680,
                    eastF: 150000.01256,
                    northF: 5400088.4378
     },
            toWGS72: {
                        tx: 0, ty: 0, tz: 4.5,
              rx: 0, ry: 0, rz: 0.554,
             s: 0.219
       },
     toAGD66: {
                       tx: -134, ty: -48, tz: 149,
             rx: 0, ry: 0, rz: 0,
             s: 1.0
       },
       fromAGD66: {
                       tx: 134, ty: 48, tz: -149,
             rx: 0, ry: 0, rz: 0,
             s: 1.0
       }
}

To simplify the functions of translation using the Helmert 7 parameters, two entries in the table are used, having only a difference in sign.

3. Functions used in the transformation process

This section gives the different functions that are required in doing transformation between coordinate systems. Not all of these functions are generic for all transformations but it gives an idea how to create specific transformations. Some functions depends on the local coordinates system involved.

3.1 Geographic coordinates to geocentric coordinates transformation

This method will convert the WGS 84 geographic coordinates into x, y, z geocentric coordinates. The method requires as input a point expressed in latitude ,longitude and height together with the ellipsoid. The method returns the geocentric coordinates x, y, y expressed in meters. This method is generic for all ellipsoid.

function geographic2Geocentric(lat, lon, h, e) {

/// <summary>
/// Transformation of geographic x,y coordinates to geocentric coordinates
/// </summary>
/// <param name="lat">lat source</param>
/// <param name="lon">lon source</param>
/// <param name="h">hight</param>
/// <param name="e">eclipsoide parameters</param>
/// <returns type="">x,y geocentric coordinates</returns>
var a = e.a, b = e.b, f = e.f;
var sinPhi = Math.sin(lat);
var cosPhi = Math.cos(lat);
var sinLambda = Math.sin(lon);
var cosLambda = Math.cos(lon);
var H = h; // standard hight
var eSq = (a * a - b * b) / (a * a);
var nu = a / Math.sqrt(1 - eSq * sinPhi * sinPhi);
var x1 = (nu + H) * cosPhi * cosLambda;
var y1 = (nu + H) * cosPhi * sinLambda;
var z1 = ((1 - eSq) * nu + H) * sinPhi;
return { x: x1, y: y1, z: z1 }
}

3.2 Geocentric transformation

In the figure you can see the different Helmert 7 parameters consisting of the delta of the origin of the ellipsoid , angle of rotation of the axes and a scale factor.

In the case of WGS 84 geographic coordinates system to Lambert 72 projected coordinates systems I need the Helmert 7 parameter translation. For other geocentric transformations it is possible you will need the Molodensky-Badekas 10 parameter translation. Here I will illustrate the Helmert 7 parameter translation. This translation is generic for all transformation that requires Helmert 7. The Molodensky-Badekas 10 parameter translation is similar as the Helmert 7, adding some offset based on the extra three parameters.

The Helmert 7 parameter translation is mainly a matrix multiplication. Input are the geocentric coordinates x, y, z and the transformation parameter defined in the supporting table.

function helmertTransform(point, t) {

/// <summary>

/// Helmert -7 parameter transformations between two elipsoides
/// </summary>
/// <param name="point">x,y coordinates of the source</param>
/// <param name="t">transformation with the 7 parameters</param>
/// <returns type="">x,y coordinates</returns>
var tx = t.tx, ty = t.ty, tz = t.tz;
var rx = (t.rx / 3600).toRad(); // normalise seconds to radians
var ry = (t.ry / 3600).toRad();
var rz = (t.rz / 3600).toRad();
var s1 = (t.s / 1e6); // normalise ppm to (s+1)
// apply transform
var x2 = tx + (point.x - point.y * rz + point.z * ry) + s1 * point.x;
var y2 = ty + (point.y + point.x * rz - point.z * rx) + s1 * point.y;
var z2 = tz + (point.z - point.x * ry + point.y * rx) + s1 * point.z;
return { x: x2, y: y2, z: z2 }
}

3.3 Geocentric coordinates to geographic coordinates

This function is needed to transfer geocentric coordinates back to the geographic coordinates. Geocentric coordinates cannot been used in displayed on a map, so minimal this transformation is required for using the result after a transformation. The function required as input geocentric coordinates x, y, z and the ellipsoid parameters described earlier. The result of the function is a location expressed in latitude, longitude and height. This Is not a simple transformation but an iterating formula based on

function geocentric2Geographic(point, e) {

/// <summary>

/// Transformation of geocentric coordinates to geographic coordinates
/// </summary>
/// <param name="point">x,y,z geocentric coordinates</param>
/// <param name="e">eclipsoid parameters</param>
/// <returns type="">geographic coordinates latitude,longitude,height</returns>
var a = e.a, b = e.b, f = e.f;
var precision = 2 / a;
eSq = (a * a - b * b) / (a * a);
var p = Math.sqrt(point.x * point.x + point.y * point.y);
var lat2 = Math.atan2(point.z, p * (1 - eSq)), phiP = 2 * Math.PI;
while (Math.abs(lat2 - phiP) > precision) {
    nu = a / Math.sqrt(1 - eSq * Math.sin(lat2) * Math.sin(lat2));
    phiP = lat2;
    lat2 = Math.atan2(point.z + eSq * nu * Math.sin(lat2), p);
}
var lng2 = Math.atan2(point.y, point.x);
H = p / Math.cos(lat2) - nu;
  // h = X sec λ sec ϕ – ν
var eta = eSq / (1 - eSq);
b = a * (1 - f);
p = Math.sqrt(point.x * point.x + point.y * point.y);
var q = Math.atan2(point.z * a, p * b);
var latSimple =
     Math.atan2(point.z + eta * b * Math.sin(q) * Math.sin(q) * Math.sin(q),
                p - eSq * a * Math.cos(q) * Math.cos(q) * Math.cos(q));
return { lng: lng2, lat: lat2, h: H };
}

3.4 Lambert Conic Conformal two standard parallel (2SP) (Belgium)

In case of Lambert 72 projected coordinates system I need a conversion of geographic 3D coordinates into 2D projected coordinates based on a conic conformal transformation. When using other projected coordinates system you will need to verify the document OGP Publication 373-7 to select the formula to be applied. The function is based on the more generic Lambert Conic Conformal SP2 with a correction added for Belgium.

function conicConformalSP2(pointLatLng, e, t) {

/// <summary>

/// Conic Conformal SP2 transformation of geographic coordinates to Lambert 72 x,y
/// with correction for Belgium
/// Is only valid in case of Lambert 72 datum
/// </summary>
/// <param name="pointLatLng">Lambert 72 geographic coordinates</param>
/// <param name="e">Eclipsoid parameters for the datum</param>
/// <param name="t">Translation object containing the parameters</param>
/// <returns type="">x,y parameters of the projection</returns>
// m = [cosϕ/(1 – e²sin²ϕ)] 0.5
var m1 = Math.cos(t.lat1Par) / Math.sqrt((1 - e.e2 * Math.sin(t.lat1Par) * Math.sin(t.lat1Par)));
var m2 = Math.cos(t.lat2Par) / Math.sqrt((1 - e.e2 * Math.sin(t.lat2Par) * Math.sin(t.lat2Par)));
// t = tan(p /4 – ϕ/2)/[(1 – e sinϕ )/(1 + e sinϕ )]e/2
var t1 = Math.tan(Math.PI / 4 - t.lat1Par / 2) / Math.pow((1 - e.e * Math.sin(t.lat1Par)) / (1 + e.e * Math.sin(t.lat1Par)), e.e / 2);
var t2 = Math.tan(Math.PI / 4 - t.lat2Par / 2) / Math.pow((1 - e.e * Math.sin(t.lat2Par)) / (1 + e.e * Math.sin(t.lat2Par)), e.e / 2);
var tF = Math.tan(Math.PI / 4 - t.latF / 2) / Math.pow((1 - e.e * Math.sin(t.latF)) / (1 + e.e * Math.sin(t.latF)), e.e / 2);
if (Math.abs(tF) < 0.0000001)
tF = 0;
var tPt = Math.tan(Math.PI / 4 - pointLatLng.lat / 2) / Math.pow((1 - e.e * Math.sin(pointLatLng.lat)) / (1 + e.e * Math.sin(pointLatLng.lat)), e.e / 2);
// n = (ln m1 – ln m2)/(ln t1 – ln t2)
var n = (Math.log(m1) - Math.log(m2)) / (Math.log(t1) - Math.log(t2));
// F = m1/(nt1ⁿ)
var F = m1 / (n * Math.pow(t1, n));
// r = a F tn
var r = e.a * F * Math.pow(tPt, n);
var rF = 0;
if (tF > 0)
rF = e.a * F * Math.pow(tF, n);
// θ = n(λ – λF)
var tetra = n * (pointLatLng.lng - t.lngF);
var a = 0.00014204313635987700;
var x = t.eastF + r * Math.sin(tetra - a);
var y = t.northF + rF - r * Math.cos(tetra - a);
return { x: x, y: y };
}

3.5 Putting all the different steps together

In the previous sections the different steps needed for the transformation has been explained. Having developed these different steps, I now have the possibility to do the transformation into one function. As the name of the function suggests, this is only applicable between WGS 84 coordinates system and Lambert 72 projected coordinates system. Test done on the transformation results reveals an accuracy of 10 centimeters in x and y coordinates.

function convertWGS84toLambert72(pWGS84) {

/// <summary>

/// Convert lat/lon point in WGS84 to Lambert 72 x,y projection coordinates
/// </summary>
/// <param name="pWGS84"> WGS84 geographic lat/lon in degrees</param>
/// <returns type="x,y">Lambert 72 projection x,y </returns>
var eWGS84 = CoordTransform.ellipse.GRS80;
var eIntl1924 = CoordTransform.ellipse.Intl1924;
var txToLambert72 = CoordTransform.datumTransform.toLambert72;
var pLambert72h = convertEllipsoid(pWGS84, eWGS84, txToLambert72, eIntl1924);
// Convert lat lng towards X, Y in lambert 72
var pointXY = conicConformalSP2(pLambert72h, eIntl1924, txToLambert72);
return pointXY;
}

function convertEllipsoid(point, e1, t, e2) {

/// <summary>
/// Convert lat/lon from one ellipsoidal model to another
/// </summary>
/// <param name="point">lat/lng in source datum</param>
/// <param name="e1">source ellipsoide parameters</param>
/// <param name="t">Helmert 7 transform parameters</param>
/// <param name="e2">target ellipsoide parameters</param>
/// <returns type="">lat/lon in target reference datum</returns>
   // -- 1: convert polar to cartesian coordinates (using ellipse 1)
   var lat = point.lat * (Math.PI / 180.0);
   var lon = point.lng * (Math.PI / 180.0);
   var point1 = geographic2Geocentric(lat, lon, 100, e1);
   // -- 2: apply helmert transform using appropriate params
   var point2 = helmertTransform(point1, t)
   // -- 3: convert cartesian to polar coordinates (ellipse 2) browring algorithm
   var pointLatLng = geocentric2Geographic(point2, e2);
   return pointLatLng;
}

4. Creating another type of transformation

In the previous section we put all the functions together to have our transformation from WGS84 coordinates system to Lambert 72 projected coordinates system. Now I will illustrate how we can use the same function to go the other way in the transformation. I will now show you how we can make a transformation of Lambert 72 projected system to the WGS 84 coordinate system. The following figure illustrate how this must be done.

From the different steps described here for doing the transformation, we only misses the code for doing the transformation ‘Projected 2D to 3D geographic’ for Lambert 72 coordinate system. We need to do a transformation similar as described in section 6 but now the other way. In our famous document OGP Publication 373-7 you can find the formula needed for doing this.

4.1 Reverse Lambert Conic Conformal 2SP (Belgium)

For each transformation geographic 2D coordinates to projected 3D coordinates there exist a reverse formula. Hereafter you can find the reverse formula for the Lambert Conic Conformal 2SP. For Belgium we needs also a slightly modified version to perform a correction.

function conicConformalSP2Reverse(pointxy, e, t) {

/// <summary>

/// Reverse Conic Conformal SP2 (Belgium) transformation of Lambert 72 x,y to
/// geographic coordinates
/// </summary>
/// <param name="pointxy">x,y,h Lambert 72 projections</param>
/// <param name="e">Eclipsoid parameters for the datum</param>
/// <param name="t">Translation object containing the parameters</param>
/// <returns type="">Geographic coordinates lat/Lng</returns>
var m1 = Math.cos(t.lat1Par) / Math.sqrt((1 - e.e2 * Math.sin(t.lat1Par) * Math.sin(t.lat1Par)));
var m2 = Math.cos(t.lat2Par) / Math.sqrt((1 - e.e2 * Math.sin(t.lat2Par) * Math.sin(t.lat2Par)));
// t = tan(p /4 – ϕ/2)/[(1 – e sinϕ )/(1 + e sinϕ )]e/2
var t1 = Math.tan(Math.PI / 4 - t.lat1Par / 2) / Math.pow((1 - e.e * Math.sin(t.lat1Par)) / (1 + e.e * Math.sin(t.lat1Par)), e.e / 2);
var t2 = Math.tan(Math.PI / 4 - t.lat2Par / 2) / Math.pow((1 - e.e * Math.sin(t.lat2Par)) / (1 + e.e * Math.sin(t.lat2Par)), e.e / 2);
var tF = Math.tan(Math.PI / 4 - t.latF / 2) / Math.pow((1 - e.e * Math.sin(t.latF)) / (1 + e.e * Math.sin(t.latF)), e.e / 2);
if (Math.abs(tF) < 0.0000001)
      tF = 0;
   // n = (ln m1 – ln m2)/(ln t1 – ln t2)
   var n = (Math.log(m1) - Math.log(m2)) / (Math.log(t1) - Math.log(t2));
   // F = m1/(nt1ⁿ)
    var F = m1 / (n * Math.pow(t1, n));
    var rF = 0;
    if (tF > 0)
       rF = e.a * F * Math.pow(tF, n);
    var r = Math.sqrt(Math.pow((pointxy.x - t.eastF), 2) + Math.pow(rF - (pointxy.y - t.northF), 2));
    var tbis = Math.pow(r / (e.a * F), 1 / n);
    var tetra = Math.atan((pointxy.x - t.eastF) / (rF - (pointxy.y - t.northF)));
    var precision = 0.0000000001;
    // ϕ = π/2-2atan t'.
    var lat2 = Math.PI / 2 - 2 * Math.atan(tbis);
    var lat = 0;
    while (Math.abs(lat - lat2) > precision) {
      lat = lat2;
    lat2 = Math.PI / 2 - 2 * Math.atan(tbis * Math.pow((1 - e.e * Math.sin(lat)) / (1 + e.e * Math.sin(lat)), e.e / 2));
    }
    // λ = [(θ' + a)/n] + λF
    lng = (tetra + (29.2985 / 3600).toRad()) / n + t.lngF;
    lat2 = lat2 * 180 / Math.PI;
    lng = lng * 180 / Math.PI;
    return { lat: lat2, lng: lng, h: 100 }
}

More details how these function is build can be found in OGP Publication 373-7

4.2 Creating the full transformation

This is similar as the function described in section 7. The only difference is that we now has to add an initial transformation between projected coordinates and geographic coordinates.

function convertLambert72toWGS84(pLambert) {

/// <summary>

/// Convert x,y,h point in Lambert 72 projection to WGS84 geographic coordinates
/// </summary>
/// <param name="pLambert">x,y Lambert projection</param>
/// <returns type="">WGS84 geographic Lat,Lng in degrees</returns>
var eWGS84 = CoordTransform.ellipse.GRS80;
var eIntl1924 = CoordTransform.ellipse.Intl1924;
var txFromLambert72 = CoordTransform.datumTransform.fromLambert72;
var pointLatLng = conicConformalSP2Reverse(pLambert, eIntl1924, txFromLambert72);
var pLatLng = convertEllipsoid(pointLatLng, eIntl1924, txFromLambert72, eWGS84);
pLatLng.lat = pLatLng.lat * 180 / Math.PI;
pLatLng.lng = pLatLng.lng * 180 / Math.PI;
return pLatLng;
}

5. Conclusion

This illustrate how both transformation can be achieved with the same functions. In this way an important part of the functions are reusable across different transformations. In the JavaScript implementations of the formula’s no care was done to optimize the code but rather make it readable towards the formulas found in OGP Publication 373-7.

6. Testing

An important part for writing your own transformation between two coordinates systems is creating test procedures. Before you can write test procedures, you will need having test data. Important data can be found in the document OGP Publication 373-7.

Sometimes you can find sample data on the internet. In Belgium we have the desktop utility cConvert of NGI (Nationaal Geografisch Instituut) that make it possible to convert coordinates between WGS 84 and different Belgium projected coordinates systems.
Here are some examples of writing test procedure. The conversion of geographic to geocentric coordinates can be tested using a bidirectional conversion :

var pointLatLngInit = {

     lat: 0.939151102,
     lng: 0.037167659,
     h: 100
};

var pointXY = geographic2Geocentric(pointLatLngInit.lat, pointLatLngInit.lng,

       pointLatLngInit.h, CoordTransform.ellipse.GRS80);
//      Geodetic coordinates x,y,z after geographic2Geocentric
//          3771793.968, 140253.342, 5124304.349
pointLatLng = geocentric2Geographic(pointXY, CoordTransform.ellipse.GRS80);
var dif = Math.abs(pointLatLng.lat - pointLatLngInit.lat) +
          Math.abs(pointLatLng.lng - pointLatLngInit.lng);
//      Must be 0.939151102, 0.037167659
if (dif > 0.00001)
    alert("Error occurred during the geographic - geocentric transformation");

For testing the Helmet 7 parameter translation you can test it with given data as a first test. This is what is shown next.

var point = { x: 3657660.66, y: 255768.55, z: 5201382.11 };

var pointCentric = helmertTransform(point, CoordTransform.datumTransform.toWGS72);
//          XT = 3657660.78 m
//          YT = 255778.43 m
//          ZT = 5201387.75 m

However a more extensive can be done using a bidirectional tests doing a conversion between two geographic coordinates systems. This is illustrated in the code hereafter.

// WGS84 : 50.679013094° 5.808676779°

// WGS84 - Lambert 72 transformation
var pointLatLngInit = { lat: 50.679013094, lng: 5.808676779, h: 100 };
pointLatLng2 = convertEllipsoid(pointLatLngInit, CoordTransform.ellipse.GRS80,        CoordTransform.datumTransform.toLambert72, CoordTransform.ellipse.Intl1924);
pointLatLng2.lat = pointLatLng2.lat * 180 / Math.PI;
pointLatLng2.lng = pointLatLng2.lng * 180 / Math.PI;
// Lambert 72 : 50.679571311° 5.807373188°
pointLatLng = convertEllipsoid(pointLatLng2, CoordTransform.ellipse.Intl1924,
       CoordTransform.datumTransform.fromLambert72, CoordTransform.ellipse.GRS80);
//
pointLatLng.lat = pointLatLng.lat * 180 / Math.PI;
pointLatLng.lng = pointLatLng.lng * 180 / Math.PI;
// WGS84 : 50.679013094°   5.808676779°
var dif = Math.abs(pointLatLng.lat - pointLatLngInit.lat) +
       Math.abs(pointLatLng.lng - pointLatLngInit.lng);
if (dif > 0.00001)
   alert("Error occurred during the geographic - geographic transformation");

For some geographic transformations you can use the Abridged Molodensky formula. This is a transformation based on only three parameters , DX, DY, DZ.

// Abridged Molodensky transformations

var pointLatLngInit = { lat: -37.8, lng: 144.96666667, h: 50 };

var pointLatLng2 =
       molodenskyTransform(pointLatLngInit, CoordTransform.datumTransform.toAGD66,
       CoordTransform.ellipse.Agd66, CoordTransform.ellipse.GRS80);
//   Results -37.79848036    144.96798611   46.378
//           -0.659707935       2.530168668
pointLatLng2.lat = pointLatLng2.lat * 180 / Math.PI;
pointLatLng2.lng = pointLatLng2.lng * 180 / Math.PI;
var pointLatLng =
       molodenskyTransform(pointLatLng2, CoordTransform.datumTransform.fromAGD66,
       CoordTransform.ellipse.GRS80, CoordTransform.ellipse.Agd66);
pointLatLng.lat = pointLatLng.lat * 180 / Math.PI;
pointLatLng.lng = pointLatLng.lng * 180 / Math.PI;
var dif = Math.abs(pointLatLng.lat - pointLatLngInit.lat) +
       Math.abs(pointLatLng.lng - pointLatLngInit.lng);
if (dif > 0.000001)
alert("Error occurred during the geographic-geographic molodensky transformation");

Above test procedure is based on a transformation between geographic coordinates system of Great Britain and WGS 84. As in a previous test procedure, it can also been used in bidirectional calls.

For doing this test You need the Abridge Molodensky formula function implementation. Only three parameters are required for this transformation.

function molodenskyTransform(point, t, eFrom, eTo) {

/// <summary>

/// Molodensky transformation between geografic coordinates of two eclipsoides
/// </summary>
/// <param name="point">lat,lng of source</param>
/// <param name="t">transformation between the eclipsoides</param>
/// <param name="eFrom">eclipsoide parameters of source</param>
/// <param name="eTo">eclipsoide parameters of destination</param>
/// <returns type="">lat,lng transformed</returns>
var lat = point.lat * Math.PI / 180;
var lng = point.lng * Math.PI / 180;
var da = eTo.a - eFrom.a;
var df = eTo.f - eFrom.f;
var sinLat = Math.sin(lat);
var cosLat = Math.cos(lat);
var sinLng = Math.sin(lng);
var cosLng = Math.cos(lng);
var sin2Lat = sinLat * sinLat;
var esqr = eFrom.f * (2 - eFrom.f);
var nu = eFrom.a / Math.sqrt(1 - esqr * sin2Lat);
var ro = eFrom.a * (1.0 - esqr) / Math.pow((1.0 - esqr * sin2Lat), 1.5);
var dlat = (1 / (ro + point.h)) * (-t.tx * sinLat * cosLng - t.ty * sinLat * sinLng
       + t.tz * cosLat + da * (nu * esqr * sinLat * cosLat) / eFrom.a
       + sinLat * cosLat * df * ((ro / (1 - eFrom.f)) + nu * (1 - eFrom.f)));
var dlng = (-t.tx * sinLng + t.ty * cosLng) / ((nu + point.h) * cosLat);
var dh = t.tx * cosLat * cosLng + t.ty * cosLat * sinLng + t.tz * sinLat - da +
       sin2Lat * (eFrom.f * da + eFrom.a * df);
return { lat: lat + dlat, lng: lng + dlng, h: point.h + dh };
}

7. Possible extensions

In the transformation function illustrated here, no action is implemented to handle spatial distortion. Although you can find on the documents of the bibliography in part 1 some formula’s that will handle this distortion like Tissot, it is possible that at country level specific translation is put in place. This kind of correction is only needed if you need an accuracy of centimeters.

Example of such a situation is Belgium where NGI has defined regions, which each region has its own Helmet 7 parameters.

Some examples.

zone	dx	dy	dz	rx	ry	rz	s
zone01	170,194330	-23,319088	98,006431	-0,132903	1,272427	2,691469	0,999995501
zone02	154,854804	-24,618147	65,952209	0,006332	1,547517	2,851635	1,000000934
zone03	168,604000	-19,720000	59,218000	-0,036000	2,036000	3,046000	1,000000373
zone04	153,029709	-18,859783	84,124233	0,022832	1,137474	3,146639	0,999998870
zone05	158,041429	-15,912627	73,921469	-0,094578	1,470761	3,161524	0,999999603
zone06	135,404412	-13,372664	82,710991	-0,146833	0,722672	3,241832	1,000000767
zone07	148,388053	0,104964	86,472784	-0,256388	0,983121	3,778806	0,999998948
zone08	158,411443	-15,389660	67,316637	0,206397	1,632895	3,568474	1,000000369
zone09	168,285000	-18,249000	63,917000	0,027082	1,936736	3,194554	0,999999823
zone10	155,950000	-19,541000	71,852000	0,031006	1,462467	3,136918	1,000000081

Transformation between datum's in JavaScript – Part 1

2012-08-07T13:15:00.003-07:00

1. Introduction

In part 1 of a two parts article I will outline the architecture involved in the transformation of projected coordinate systems. In the second part a detailed explanation will be done with the transformation between the projected coordinate system WGS 84 and the projected coordinate system Belgium Lambert 72 (ESPG 31370). Not all of the formulas showed here are generic for all local (country) projected coordinate systems, however the same steps has to been implemented for other transformations.

In the JavaScript framework for ArcGIS JavaScript API I added the possibility for adding Google Places to a map using the Google API. All locations retrieved have WGS 84 coordinates. In case the spatial reference of the base map is not a WGS 84 (geographic or web Mercator ) projection a transformation is required for adding points representing the Google locations to the map.

The idea for implementation a projection transformation in JavaScript comes from the problems when using the project method of the geometry rest service. As from 10.1 the project method of the geometry rest service now supports the use of a transformation parameter. However when using the rest service for doing transformation between WGS 84 and Belgium Lambert 72, I encountered the following issues:

· Using 20 points (number of locations returned from Google API) returns an error in the rest service. This could be a problem caused by the proxy service. So I had to split the result from the Google API into two parts. Because using the Google maps API is asynchronous, the handling of results makes it more tricky. Adding to that is also the use of a token to be able to retrieve the next trunk of 20 results of the Google places API until a maximum of 60 locations have been retrieved.

· The transformation from WGS84 to Belgian Lambert 72 gives me an error of around 200m. I suspect that not the full datum transformation is used.

Strange enough the transformation from Belgium Lambert 72 to WGS 84 works correct.

2. Different transformation situations

The transformation between projections consists of different situations depends on the input projection in geographic or Cartesian coordinates and the output projection in geographic or Cartesian coordinates . The following pictures illustrates the different situations. Later I illustrate through examples each of the different steps.

The most complex situation is when input is a projected coordinate system and output a projected coordinate system are in Cartesian coordinates.

A less complex situation is when the input is a geographic coordinate system and output is a projected coordinate system. This is the case when WGS84 geographic coordinates are involved. For the transformation from WGS 84 to Belgium Lambert 72 this is the steps that are needed to transform coordinates from WGS84 degrees to Lambert 72 x and y expressed in meters.

A much simpler transformation is the situation when you need to transform between two geographic coordinate systems. Here only one step is required.

Other possibilities are showed in the next pictures. I will not handle this kind of transformation.

3. Steps involved in transformations

In this section I show an overview of the different steps involved in the transformation between two coordinate systems. There exists interested literature on all this individual steps. In the section bibliography at the end of this expose some important url ‘s are listed. In the figure hereafter you can see the classification of the different methods that we need to implement in JavaScript to complete a transformation between two projected coordinate systems.

3.1 Inverse mapping

This step is responsible for the transformation of Cartesian coordinates x , y expressed in distances (meters, feeds) to geographic coordinates latitude and longitude φ ,λ expressed in degrees. Transformations needed here depends on the local (country) projected coordinate system.

3.2 Forward mapping

This step is responsible for the transformation of geographic coordinates latitude and longitude φ ,λ expressed in degrees to Cartesian coordinates x , y expressed in distances (meters, feeds) . Transformations needed here depends on the local (country) projected coordinate system.

3.3 Geographic coordinates to geocentric coordinates translation

To be able to transform coordinates from one ellipsoid to another ellipsoid, coordinates must be expressed into geocentric coordinates relative to the center of the ellipsoid. In a projected coordinate system, an ellipsoid is always specified. This formula is geographic or projected coordinate system not depended. Different parameters that define an ellipsoid are used to calculate the x, y and z in meters.

3.4 Geocentric coordinates to geographic coordinates translation

As with the translation explained in 3.3, the formula for geocentric to geographic coordinates does not depends on the coordinate system involved. The same set of parameters for the ellipsoid is used in the formula.

3.5 Geocentric transformations

Transformations between coordinate systems has been defined through the Helmert 7 parameters or the Molodensky -Badekas 10 parameter. In case of the transformation for WGS 84 geographic coordinate system to Lambert 72 projected coordinate system the Helmert 7 parameter transformation is used and will be illustrated. Implementing the Molodensky –Badekas transformation is not much deferent than the Helmert 7 version.

4. Parameters required

In order to do the transformation a number of parameter values are needed. These parameters depends on the ellipsoids involved and the projection transformation required. Because some methods required special parameters depending on the local (country) projected system used, the transformation between WGS84 to Belgium Lambert 72 is not generic. Also some methods in the transformation process are local depended. Still the procedure illustrated gives You an idea how this can be extended to support other projected systems. One document is very important to help you choose the correct formulas and can be found in the bibliography.

The ellipsoid is defined through the parameters showed hereafter as an example. A more complete list can be found in the bibliography.

a Semi-Major Axis (Equatorial Radius)

b Semi-Minor Axis (Polar Radius)

f Flattening = (a-b)/a

e First Eccentricity = sqrt(1-(b²/a²))

Constants for Reference Ellipsoids used for Datum Transformations
Ellipsoid	(a)	(b)	f	e
GRS 80	6378137	6356752.3141	0.0033528106875095227	0.08181919111988833
INTERNATIONAL 1924	6378388	6356911.946	0.003367003387062615	0.0819918902228546
WGS 84	6378137	6356752.3142	0.0033528106718309896	0.08181919092890624
AUSTRALIAN 1965	6378160	6356774.719	0.003352891899858333	0.08182018036905428

Another table required is the Helmert 7 parameters defined for a transformation between two Cartesian coordinates systems. At the website of Esri you can find a list of transformations, most are between WGS 84 or ETRS 1989 and a local projected coordinate system.

Geographic (datum) Transformation Name	WKID	dx	dy	dz	rx	ry	rz	ds
Belge_1972_To_WGS_1984_3	15929	-106.868628	52.297783	-103.723893	-0.33657	0.456955	-1.842183	-1.2747

5. Bibliography

http://www.arsitech.com/mapping/geodetic_datum

List of all ellipsoids used in projected coordinate systems together with the parameters that define the ellipsoid.

http://downloads2.esri.com/support/TechArticles/Geographic_Transformations_10.1.pdf

List of the transformations as has been defined by ESRI Inc. Most important are the Helmert 7 parameter table and the Molodensky –Badekas 10 parameter table.

http://www.epsg.org/guides/docs/G7-2.pdf

I consider this document as the bible of the transformations between projected coordinate systems. You will find all the different formulas that you will need explained in detail. It is not an easy reading for a developer, but it is an absolute must when you want to create a transformation in code yourself. The document also includes examples of input and output, making it much easier to create unit testing for your code. Other interesting documents at this site is G7-1.pdf.

http://plone.itc.nl/geometrics/Introduction/introduction.html

For those who likes some didactical material, this site from the Dutch ITC Faculty of Geo-Information Science and Earth Observation of the University of Twente gives a very readable explanation of transformation of projected coordinate systems. A must if you want more about different projections and transformations.

http://www.mekonginfo.org/assets/midocs/0002217-utilities-communications-an-arcgis-tutorial-concerning-transformations-of-geographic-coordinate-systems-with-a-concentration-on-the-systems-used-in-lao-pdr.pdf

Another educational tutorial about transformation between coordinate systems illustrated with ArcGIS desk products of ESRI Inc.

Some useful tools:

http://www.csgnetwork.com/degminseccalc.html

Sometimes you will need a translation between degrees and radians. This web site is an excellent tool for doing the conversion of degrees, minutes and seconds into a decimal degrees and radians.

For the Belgian developer

At the site of http://www.ngi.be you can find a tool called cConvert. This is a great tool when doing transformations between WGS 84 projected coordinate systems and Belgian projected coordinate systems. It helped me a lot to see at what level of accuracy the JavaScript transformation method works. The tool also allow to see the effects of adding a correction for the scale distortion. It was not needed in the transformation to Lambert 72 to include this type of correction because with the regular formulas I had already an accuracy around 10 centimeters.

ArcGis JavaScript API and Google Places API

2012-07-22T10:46:00.005-07:00

1. Introduction

Google exposes its database of places for use with GIS applications. Places can be queried through a spatial query or through attribute queries. In this document I will only illustrate the use of the spatial query in Google places API. Before you can use the API you must create a Google account and activate the Google API places API for your account.
The Google API used here is the one illustrated below.

https://maps.googleapis.com/maps/api/place/search/output?parameters

More details about parameters can be found at the URL:

https://developers.google.com/places/documentation/#PlaceSearchRequests

In this example I will only use two parameters, the location and the distance. Information returned is a list of maximum 60 places in trunks of 20 items. All results are returned in WGS 84 coordinates.

2. Using Place API on a map with a base layer of 102100 SR

Using the spatial reference 102100 makes it very easy to convert the WGS 84 coordinates into map points of the ArcGis map. The result of this example looks like this on our map :

Integrating the places with an existing ArcGis JavaScript application can be done using the following steps:

1. Start a point selection on the map returning a point.

2. With the point , start a first call to the Google API with the location specified in WGS84 coordinates.

3. Use the resulting array of maximum 20 results to add the contents to the graphic layer of the map. You can use the Google icons as symbol, and use the Google attributes for displaying of an info window

4. If a next token is returned, you can use it to request another 20 results. Repeat this until the next token is not defined. Current a maximum of 60 locations are returned.

In this implementation I used the XML version because I have already a cross domain AJAX method available for XML output. The Google places API implementation into the JavaScript framework looks like this:

findPlaces: function (point, radiusAPI, callback) {

try {
     findPlacesCallback = callback;
     fullResults = new Array();
     location = point.y.toString() + "," + point.x.toString();
     radius = radiusAPI;
     queryPlacesByToken(null);
} catch (e) {

logging.logMessage("E", "error in Google place API interface ->" + err.message, "GisExtra/findPlaces");

}

findPlacesByToken: function (token, callback) {

try {
     findPlacesCallback = callback;
     queryPlacesByToken(token);
} catch (e) {
     logging.logMessage("E", "error in Google place token API interface ->" + err.message, "GisExtra/findPlacesByToken");
}
}

The first method is used to start the Google places search, the second is called when a next token is available in the result indicating that more results can be retrieved. The actual initiation of the Google API is done in the method ‘queryPlacesByToken’. A callback method must be provided by the calling method for returning the Google places data.

function queryPlacesByToken(token) {

   var data;
   if (token == null) {
     data = {
        location: location,
        sensor: false,
        radius: radius,
        rankBy: 'distance',
        key: GoogleAPIKey
     };
   } else {
     data = {
        sensor: false,
        pagetoken: token,
        key: GoogleAPIKey
     };
   }
   var url = googleUrlPlaces + "?" + $.param(data);
   var doneOnce = false;
   requestCrossDomain(url, function (result) {
     try {
       if (!doneOnce && findPlacesCallback != null) {
         doneOnce = true;
         var jsonContents = $.xml2json(result.results[0]);
         if (jsonContents.status == "OK") {
           findPlacesSuccess(jsonContents.result, jsonContents.next_page_token);
         } else {
           findPlacesSuccess(null, jsonContents.status);
         }
       }
    } catch (e) {
        logging.logMessage("E", "error in requestCrossDomain ->" + e.message, "GisExtra/queryPlacesByToken");
     }
   });
}

When the result is returned from the Google API GET the status must be OK otherwise an error occurred. Beside the list of places, a next token is also returned to the calling method (function).

I noticed that requesting to quickly for the next array of results from the Google places API, the same results were returned. To solve this issue, I first let the calling method build the graphics for the map and only at the end call for the next array of results. A wait is also introduced until all graphics are add to the graphic layer before a next array of places is retrieved. That is the reason why a token is returned and through the second method ‘findPlacesByToken’ in the GIS library, the application is able to request the next list of places.

timeout = setTimeout(nextResult, 2000);

function nextResult() {

if (GisOperation.getMap().graphics.graphics.length == googlePlacesCount) {
    if (nextToken) {
       GisExtra.findPlacesByToken(nextToken, processResults);
    } else {
  }
    clearTimeout(timeout);
}
}

3. Using Place API on a map with a base layer of EPSG:31370

The real problems comes when you use a projection based on another datum than WGS84.

After the selection of a point in step 1, you need to do a project transformation from 31370 to WGS84 because Google requires a point in latitude and longitude coordinates for doing the spatial query.

As from ArcGis 10.1 you can add a transformation to the rest call to the project method of the geometry service. In case of 31370 spatial reference you can use Belge_1972_To_WGS_1984_3 datum transformation. And this works fine.

However when using the inverse functionality of the datum transformation, the method gives me two problems.

First, when requesting the transformation of 20 points the rest service gives an error, using i.e. 15 points does returns results. This could be a proxy problem. This can be solved by a workaround through splitting the datum transformation into maximum 15 points, using maximum two calls to the rest service for transforming the points.

The biggest problem is that the results have a serious offset from the actual point locations.

So I started by creating a datum transformation in JavaScript, you can find more of this on the next sections. These are the results of one point.

Green point: correct location, based on a map projection of 102100.
Yellow point, map projection 31370 : horizontal: 197m, vertical: 120m, distance: 214m
Bleu point, map projection 31370: horizontal: 71m, vertical: 22m, distance: 74,5m

The yellow point is the result of the use of the method project of the geometry rest service. The bleu point corresponds to the custom JavaScript method used. Still not an exciting result, but already a lot better by using the ESRI transformation. I put a thread on the ESRI JavaScript forum, but as for now no respond.

4. Creating a project transformation WGS84 to EPSG:31370

The illustration below shows how we can create a custom projection transformation in JavaScript, client side.

The following steps has to be done for doing the project transformation from WGS84 to Lambert 72 (31370).

1. Transform geographic coordinates of the geodetic datum into geocentric coordinates.

2. Perform a translation on the geocentric coordinates using the Helmert 7-parameter transformations (position vector or coordinate frame). There are other transformations possible depending on the required country projections.

3. Transform geocentric coordinates back into geographic coordinates.

4. Transform the geographic coordinates into the projection coordinates, in this example this is Lambert 1972 (31370).

There is a lot of literature that is useful for this kind of transformation. At the end you can find URL’s to some documents. A lot of these are purely mathematic formula’s, not exiting stuff for a developer, but lucky I studied mathematics, and this was a great help.

4.1 Doing transformations from geographic to geocentric coordinates

This kind of transformation depends on the eclipse (geodetic datum) used in the geometric coordinates and requires some parameter values. The nature of the required parameter looks like:

// ellipse parameters

    CoordTransform.ellipse = {
      WGS84: { a: 6378137, b: 6356752.3142, f: 1 / 298.257223563, e: 0.081819191, e2: 0.0066943800158945 },
      Intl1924: { a: 6378388.000, b: 6356911.946, f: 1 / 297.0, e: 0.08199189, e2: 0.00672267002 }
    };

If the geodetic datum is different of the ones above, you will certainly find it on the internet.
Given a point with latitude and longitude, this is how you can create the geocentric coordinates. Input is an eclipse e1. More details of this can be found on the URL’s at the end of the document.

var lat = point.lat * Math.PI / 180;

       var lon = point.lng * Math.PI / 180;
        var a = e1.a, b = e1.b;
        var sinPhi = Math.sin(lat);
        var cosPhi = Math.cos(lat);
        var sinLambda = Math.sin(lon);
        var cosLambda = Math.cos(lon);
        var H = 200; // standard hight
        var eSq = (a * a - b * b) / (a * a);
        var nu = a / Math.sqrt(1 - eSq * sinPhi * sinPhi);
        var x1 = (nu + H) * cosPhi * cosLambda;
        var y1 = (nu + H) * cosPhi * sinLambda;
        var z1 = ((1 - eSq) * nu + H) * sinPhi;

4.2 Translate the geocentric coordinates from one datum to another

For doing this I use the Helmert 7 parameter transformation. At the site of ESRI you can find a list of all defined transformations with the 7 parameters.

http://downloads2.esri.com/support/TechArticles/Geographic_Transformations_10.1.pdf

More information is available on the internet.
Input are the 7 parameters of the transformation. For Lambert 72 this is :

// helmert transform parameters from WGS84 to other datums

            CoordTransform.datumTransform = {
                // Helmert parameters
                toLambert72: { tx: 106.868628, ty: -52.297783, tz: 103.723893, //
                    rx: 0.33657, ry: -0.456955, rz: 1.842183, // sec
                    s: -1.2747,
               // Other parameters for step 4
                    latF: 1.57079633,
                    lngF: 0.07604294,
                    lat1Par: 0.86975574,
                    lat2Par: 0.89302680,
                    eastF: 150000.01256,
                    northF: 5400088.4378
                }
            }

The result is returned in x2,y2,z2

        var tx = t.tx, ty = t.ty, tz = t.tz;
        var rx = (t.rx / 3600).toRad(); // normalise seconds to radians
        var ry = (t.ry / 3600).toRad();
        var rz = (t.rz / 3600).toRad();
        var s1 = (t.s / 1e6) + 1;          // normalise ppm to (s+1)

// apply transform

        var x2 = tx + s1 * (x1 - y1 * rz + z1 * ry);
        var y2 = ty + s1 * (y1 + x1 * rz - z1 * rx);
        var z2 = tz + s1 * (z1 - x1 * ry + y1 * rx);

This is a simple matrix transformation.

4.3 Doing transformations from geocentric to geographic coordinates

This is the inverse operation of 4.1. Input is here the eclipse parameters from to target datum. In our case this is the International 1924 which is the datum of Lambert 72.

The transformation is based on the Browring Algorithm, an takes as input the eclipse parameters of the target eclipse. The result of the calculation is latitude lat2 and longitude ln2. The height H is not important.

a = e2.a, b = e2.b;

        var precision = 2 / a; // results accurate to around 2 metres
        eSq = (a * a - b * b) / (a * a);
        var p = Math.sqrt(x2 * x2 + y2 * y2);
        var lat2 = Math.atan2(z2, p * (1 - eSq)), phiP = 2 * Math.PI;
        while (Math.abs(lat2 - phiP) > precision) {
            nu = a / Math.sqrt(1 - eSq * Math.sin(lat2) * Math.sin(lat2));
            phiP = lat2;
            lat2 = Math.atan2(z2 + eSq * nu * Math.sin(lat2), p);
        }
        var lng2 = Math.atan2(y2, x2);
        H = p / Math.cos(lat2) - nu;

4.4 Transform the geographic coordinates into the projection coordinates

The calculation needed to create the projection coordinates out of geographic coordinates depends on the projection. What is illustrated here is only valid for the projection Lambert 72 (31370) but can you give some indication how to do the transformation.
As mentioned earlier, some extra parameter values has been added to the transformation parameters of Lambert 72.
Transformation from geographic coordinates into projection coordinates are based on a method that is specified in the same table as you could find the Helmert parameters (see 4.2). In our case you will see the value CF which means coordinate frame. In our case we will use. The full name of the transformation is regular Lambert Conic Conformal (2SP Belgium) .
Input is a point with latitude and longitude, eclipse and transformation parameters. The transformation parameters are those added after the Helmert parameters. The result are the north and east values of a point in Lambert 72.

function conicConformalSP2(pointLatLng, e, t) {

        var m1 = Math.cos(t.lat1Par) / Math.sqrt((1 - e.e2 * Math.sin(t.lat1Par) * Math.sin(t.lat1Par)));
        var m2 = Math.cos(t.lat2Par) / Math.sqrt((1 - e.e2 * Math.sin(t.lat2Par) * Math.sin(t.lat2Par)));
        var t1 = Math.tan(Math.PI / 4 - t.lat1Par / 2) / Math.pow((1 - e.e * Math.sin(t.lat1Par)) / (1 + e.e * Math.sin(t.lat1Par)), e.e / 2);
        var t2 = Math.tan(Math.PI / 4 - t.lat2Par / 2) / Math.pow((1 - e.e * Math.sin(t.lat2Par)) / (1 + e.e * Math.sin(t.lat2Par)), e.e / 2);
        var tF = Math.tan(Math.PI / 4 - t.latF / 2) / Math.pow((1 - e.e * Math.sin(t.latF)) / (1 + e.e * Math.sin(t.latF)), e.e / 2);
        if (Math.abs(tF) < 0.0000001)
            tF = 0;
        var tPt = Math.tan(Math.PI / 4 - pointLatLng.lat / 2) / Math.pow((1 - e.e * Math.sin(pointLatLng.lat)) / (1 + e.e * Math.sin(pointLatLng.lat)), e.e / 2);
        var n = (Math.log(m1) - Math.log(m2)) / (Math.log(t1) - Math.log(t2));
        var F = m1 / (n * Math.pow(t1, n));
        var r = e.a * F * Math.pow(tPt, n);
        var rF = 0;
        if (tF > 0)
            rF = e.a * F * Math.pow(tF, n);
        var tetra = n * (pointLatLng.lng - t.lngF);
        var a = 0.00014204;
        var x = t.eastF + r * Math.sin(tetra - a);
        var y = t.northF + rF - r * Math.cos(tetra - a);
        return { x: x, y: y };
    }

5. Conclusion

As you saw earlier, doing the transformation in code instead of doing a project with the geometry services results in better accuracy but still is a large difference with the actual position. Only using a map with as spatial reference 102100 results in a correct location. I don’t know why there is still a visible offset of the real location, I suspect that the Helmert transformation lacks precision. There exist also a 10 parameter transformation ‘Molodensky -Badekas method’ but I could not find the parameters for Lambert 72.

The use of JavaScript transformation with greater accuracy solves a lot of asynchronous handling of data that is needed in case geometry services are used.

I cannot explain why from Lambert 72 to WGS84 the transformation in the geometry service is correct and in the other direction gives a large offset.

6. Interesting links

Example of datum conversion for WGS84 to OSGB36 (Great-Britain). Some JavaScript code is based on the example.

http://www.movable-type.co.uk/scripts/latlong-convert-coords.html

Theoretical explanation the different eclipses that is used for the geographic coordinates and different transformation towards projections.

Visual explanation about geographic coordinates , translation and formulas.

http://plone.itc.nl/geometrics/Coordinate%20transformations/coordtrans.html

Eclipse parameters for different datums.

http://geoengine.nga.mil/geospatial/SW_TOOLS/NIMAMUSE/webinter/geotrans2/help/elliptab.htm

Using different projections within ArcGis JavaScript Applications

2012-07-04T03:02:00.001-07:00

1. Introduction

Did you ever have a displacement of points of 100m on your map, then you clearly run into problems with datum corrections. This document explains how I tackle this issue , and how ArcGis 10.1 helps you.

Public geo databases as ‘Openstreet map’ , ‘Google maps’ or ‘Google Streetview’ are all based on the spatial reference WGS84 and this is in most cases not the spatial reference of the map. When trying to integrate this information with a custom ArcGis JavaScript, you will need to project your data towards WGS 84 spatial reference coordinates.

To project your data into WGS 84 spatial reference, ESRI expose a project transformation service through the method project of the geometry service of an ArcGis server. As from ArcGis 10.1 and JavaScript API 3.0 the project method has added a transformation parameter. The list of all transformations can be found at the URL http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/dattrans.htm

In pre version 3.0, if a transformation is required, a SOAP web service must be used, however using this in JavaScript requires some extra data processing, a JSON approach is more practical.

Sometimes you will need using more than one transformation in the case no direct transformation of projection to another projection is available as outlined in the figure below.

2. Transformation between WGS84 and WebMercator (102100/3857)

Because I could not find a transformation in the list on the URL specified in the ‘Introduction’ I wrote two functions that handle this transformations in both directions based on some C++ code I found. Doing so, I did not need an async REST call to the ArcGIs Geometry service, speeding up the transformation.

The code for doing these transformations are :

function toGeographic(xMercator, yMercator) {

if (Math.abs(xMercator) < 180 && Math.abs(yMercator) < 90)
     return null;
if ((Math.abs(xMercator) > 20037508.3427892) || (Math.abs(yMercator) > 20037508.3427892))
      return null;
var x = xMercator;
var y = yMercator;
var w1 = x = x / 6378137.0;
var w2 = x * 57.295779513082323;
var w3 = Math.floor((x + 180.0) / 360.0);
x = w2 - (w3 * 360.0);
y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * y) / 6378137.0)))) * 57.295779513082323;
return {
    x: x,
    y: y
}
}

function toWebMercator(xlon, ylat) {

if ((Math.abs(mercatorX_lon) > 180 || Math.abs(mercatorY_lat) > 90))
    return null;
var num = xlon * 0.017453292519943295;
var x = 6378137.0 * num;
var a = ylat * 0.017453292519943295;
var y = 3189068.5 * Math.Log((1.0 + Math.Sin(a)) / (1.0 - Math.Sin(a)));
return {
     x: x,
     y: y
}
}

3. Other Project transformation

Creation of a generic function for doing projection transformation requires as input either a wkid or wkt of the transformation that corresponds to an item of the transformation list found at the URL specified earlier. In a real world application a transformation happens between an input spatial reference (wkid) and an output spatial reference (wkid).

I could not find a relation between the transformation list wkid’s and the wkid’s of spatial references.
The only solution for this lack of automatic solution based on the two wkid’s was to add a parameter at the layer configuration specifying the transformation needed for the WGS 84 spatial references conversion. This solves all my issues for the transformation of country spatial references to WGS 84 spatial reference, making integration with Google Streetview possible and other WGS 84 related geographical data.
I also had a spatial reference problem in case WMS layers are used for doing spatial queries. A WMS query requires the same spatial reference as the WMS service expose. A solution is to add a parameter to the WMS configuration specifying the transformation needed for modifying the base layer spatial reference to the WMS spatial reference for the geometry involved.
The result of the project conversion consist of two cases, one that looks if it involves a Webmercator / WGS 84 transformation, and a second that will use the geometry service of the ArcGis server. The method requires version 3.0 of the ArcGis JavaScript API and ArcGis Server 10.1.

convertProjection: function (points, toSpacialReference, transformation, callback) {

4. Transformation in an application

The above transformation worked well for me having as spatial reference of Lambert 72 (31370) of the map, and using Google Streetview to show the location selected. The transformation used was 1610.

Linq2ArcObjects basic version

2012-06-10T09:08:00.001-07:00

Introduction

Due to lack of time and also because I have no longer ArcGis desktop on my development environment I made the code public. This library allows the use of Microsoft Linq to access rows from attribute tables and feature classes.

To-do’s

I did only limited testing on this library, writing some unit tests could help to stabilize the development of future versions.

A more important job to do is the adding of spatial query possibility. Therefor a special keyword like ‘whereSpatial’ must be added to the Linq syntax. Not a lot of work, you can look how the attribute query is constructed from the query functionality of the ArcObjects library. To help the parsing, you have to add special attributes like geometry at the class definition for a feature. This will be needed at the table level and also at attribute level to specify which field contains the geometry contents.

Microsoft has a GUI interface for his Linq to SQL implementation. To eliminate the writing of the table classes, a tool written with ArcObjects engine is useful for generating the classes in C# (or VB.NET). Not a hard job for one that has some experience in processing geodatabases. All information needed in the class definitions is available using ArcObjects methods.

Basic knowledge

The code is written in c#, no VB.NET version is available

You need to have knowledge in the use of attributes defined for classes and properties. Attributes are the driving engine within the Linq parsing.

You need to have knowledge of reading and writing of feature classes. The library can be used with every SDE database. I did no check for the use of file GDB , Access database or shape files.

Code access

I used GIT to make the code public, I did not found another solution. As I am new with GIT , I hope all is correctly transferred.

The repository has the name ‘jpenet / Linq2ArcObjects’ and can be found at https://github.com/

Have a lot of programming fun,

Johnny Penet

10/6/2012 Lokeren, Belgium

ARCGIS JavaScript API – BASIC EDITING COMMANDS SECTION 2 – PART V

2012-06-09T13:28:00.000-07:00

1. Introduction

Until now we saw how we can create and update geometries (points, polylines and polygones) using the edit and draw widgets. Using the save button we transfer the modification to the ArcGIS server which in turn updates the SDE database. Also important is the data entry of attribute data of a feature. I will illustrate how we can use the attribute template widget to create a general attribute editor for features.

The navigation within the tab control and the accordion control inside a tab will be done with the help of custom bindings as defined in the knockoutJS framework. As we illustrated in previous commands, the handling of the GUI components will be kept out of the ArcGIS framework.

2. Attribute edit

To simplify the attribute editing we can use the attribute inspector of the ArcGIS JavaScript API. This is a dojo widget that covers the full editing of attributes for a feature. Depending on the attribute field type different input editors are activated in the Dojo component.

The attribute inspector is encapsulated in some general edit attribute method added into the GisEditing class. The only parameter needed for the tool is the list of fields that needs to be updated. In the implementation a general editing application, we called this method with a null value as field list. Using a null value as field list results in adding all attribute fields of the feature. The object ID is always masked out by the attribute inspector. and does not appears on the input form.

editAttributes: function (fieldInfos) {

try {
if (currentFeatureLayer == null)
       return;
   currentOperation = "EditAttributes";
   if (fieldInfos == null)
       fieldInfos = [];
   var layerInfos = [{
      'featureLayer': GisOperation.getMap().getLayer(currentFeatureLayer.name),
      'showDeleteButton': false,
      'isEditable': true,
      'fieldInfos': fieldInfos
   }];
   if (attributeInspector == null) {
      var contentHolder = "<div id='" + attributesDiv + "'></div>";
      require(["dojo/dom-construct"], function (domConstruct) {
         domConstruct.place(contentHolder, "attributeDetails", "first");
      });
      attributeInspector = new esri.dijit.AttributeInspector({

layerInfos: layerInfos

}, attributesDiv);

dojo.connect(attributeInspector, "onAttributeChange", function (feature, fieldName,

newFieldValue) {

//store the updates to apply when the save button is clicked

currentFeatureLayer.getSelectedFeatures()[0].attributes[fieldName] = newFieldValue;

});

}

this.selectFeatures();

} catch (err) {

logging.logMessage("E", "editAttributes failed -->" + err.message, "gisEditing");

}

To include the attribute inspector widget into the web page, the best implementation I found is using the dom contructor of the dojo library. I found out that this is the most stable creation of this component into the web page. This result of the display within the tabular control looks like this:

The nice thing is that with the attribute inspector widget , you get a rich input controls which handles the different input data types of the feature. The ‘onAttributeChange’ event of the attribute inspector is responsible for the update of the modified attributes into the selected feature. The attribute inspector add also support for the usage of attachments. As you can also see, the attribute inspector add multi language support., but as I did with Silverlight I did not add some multi language support.

3. Move point

Although we add a separate tool button to move a point, the implementation of the tool is exactly the same as modifying the vertices of a polygon or polyline. In the main view model class the implementation of the edit tools looks like this :

Edit of the vertices:

this.editExecute = function () {

editToolbarGeneralViewModel.editCommand(setEditActive);

};

Move of a point:

this.movePointExecute = function () {

editToolbarGeneralViewModel.editCommand(setEditActive);

};

The underlying edit command will handle the different feature types, and in case of a map point you are allow the move of the point with a drag operation.

4. Save feature

The save action has been split into the three different actions that can be done on a feature layer, namely create, update and delete. The code below shows that with the current API you can have the full control over editing on feature layers and how the results are save at the ArcGIS server.

saveAll: function () {

try {
      var updateGraphic;
    if (currentOperation == "EditVertices") {
         var graphicNew = editTool.getCurrentState();
         if (graphicNew.isModified) {
             updateGraphic = currentFeatureLayer.getSelectedFeatures()[0].setGeometry(graphicNew.graphic.geometry);
             currentFeatureLayer.applyEdits(null, [updateGraphic], null, function (addResults, updateResults, deleteResults) {
             var updateCount = updateResults.length;
             }, function (err) {
                 logging.logMessage("E", "saveAll applyEdits failed -->" + err.message, "gisEditing");
             });
         }
         editTool.deactivate();
      }
      else if (currentOperation == "EditAttributes") {
        try {
          attributeInspector.destroy();
          attributeInspector = null;
          updateGraphic = currentFeatureLayer.getSelectedFeatures()[0];
          currentFeatureLayer.applyEdits(null, [updateGraphic], null, function (addResults, updateResults, deleteResults) {
              var updateCount = updateResults.length;
          }, function (err) {
              logging.logMessage("E", "saveAll applyEdits failed -->" + err.message, "gisEditing");
          });
        } catch (err) {
            logging.logMessage("E", "saveAll failed EditAttributes-->" + err.message, "gisEditing");
        }
      }
      else if (currentOperation == "CreateFeature") {
        if (currentGeometry != null) {
           var symbol;
          if (currentFeatureLayer.geometryType == "esriGeometryPolygon") {
               symbol = gisOperation.getSelectionFillSymbol();
          }
          else if (currentFeatureLayer.geometryType == "esriGeometryPolyline") {
               symbol = gisOperation.getSelectionLineSymbol();
          }
          else if (currentFeatureLayer.geometryType == "esriGeometryPoint") {
               symbol = gisOperation.getSelectionMarkerSymbol();
          }
          var addGraphic = new esri.Graphic(currentGeometry, symbol, currentAttributes);
          currentFeatureLayer.applyEdits([addGraphic], null, null, function (addResults, updateResults, deleteResults) {
              var addCount = addResults.length;
              }, function (err) {
                 logging.logMessage("E", "saveAll apply add failed -->" + err.message, "gisEditing");
           });
        }
        gisOperation.getDraw().deactivate();
      }
      else if (currentOperation == "DeleteFeatures") {
        try {
         var deleteFeatures = new Array();
         require(["dojo/_base/array"], function (array) {
           array.forEach(currentFeatureLayer.getSelectedFeatures(), function (feature, ind) {
              deleteFeatures.push(feature);
           });
         });
         currentFeatureLayer.applyEdits(null, null, deleteFeatures, function (addResults, updateResults, deleteResults) {
            var deleteCount = deleteResults.length;
            }, function (err) {
              logging.logMessage("E", "saveAll applyEdits failed -->" + err.message, "gisEditing");
          });
        } catch (err) {
          logging.logMessage("E", "saveAll failed DeleteFeatures -->" + err.message, "gisEditing");
        }
      }
      currentOperation = "";
      currentAttributes = new Array();
      this.clearSelectFeatures();
      gisOperation.getSelectLayer().clear();
   } catch (err) {
       logging.logMessage("E", "saveAll failed -->" + err.message, "gisEditing")
}
},

In the save there is a lot of asynchronous processing. By hiding this asynchronous functionality, it makes the job easier at the GUI development. It is also important to add extensive error handling to have a trace in case of errors occurred during the save operation.

5. Undo modifications

As long as you did not a save with the save button, nothing is modified on the ArcGIS server. Simply clear the graphic layer, as it holds the modification or creation. In case of attribute update, destroy the attribute inspector.

6. Summary

In the edit tools I showed you how you can implement some simple basis editing of feature layers. Editing, updating or delete of feature can be performed in the same way that is done with ArcGIS Desktop. With the attribute inspector you even get a powerful attribute editor. In the future I hope to illustrate how you can create more complex edit tools as already illustrated in the Silverlight ArcGIS framework illustrated in previous documents. The basic idea will be creating basic building blocks of editing tools that can be put together to create more complex edit tools. This approach is not special, probably a lot of you has already built ArcMap extensions with the main purpose to create extended edit tools to simplify the job of GIS editors.

Based on my experience of writing ArcMap extension for enhanced GIS editing, I will later illustrate how some of this more complex editing tools I implemented in the past as ArcMap tools or commands can be written as tools or commands in JavaScript as part of an ArcGIS Application framework.

ESRI inc. did a real good job by putting an ArcGIS API framework in place to encapsulate the REST services for the ArcGIS Server together with the 10.01 editing functionality for feature layers. This gives us as GIS developers an

ARCGIS JavaScript API –Using Google Streetview with WMS

2012-05-24T12:33:00.003-07:00

1. Introduction

Before writing section 2 of editing, I first did a small experiment of integrating non ESRI GIS data into a HTML5 application based on the ArcGis JavaScript API, mainly to show how easy this can be done in a structured way.

As an example I will show the usage of the popular Google Streetview in combination with a WMS service that contains addresses from a region in Belgium. The following steps will be walked through :

· Load WMS service that contains the address contents. When you look in ArcGis Online, a lot of maps are available for the Flanders region. One I was interested is the ‘GDI-Flanders - INSPIRE View Service – Addresses’ map. This is maintained by AGIV, a governmental organization. I am not sure the contents will stay for free, but for now I can use it to implement WMS support.

· Because I need a spatial query on the WMS layer, I had to implement a query task for WMS layers.

· Based on the result of the address selected by the spatial query on the address layer, we implement the Google Streetview based on the Google Streetview API.

What we see here is that there are layers coming from different sources, resulting in different spatial references. Lucky, ESRI helps us to transform geometries from one spatial reference to another through geometry services, that will be covered to in this document.

The final result looks like this, based on my home address :

With the WMS address layer from AGIV

2. WMS Service

In my initial version of the ArcGis application framework there was no support build in for WMS services. In the ArcGis JavaScript API I found only limited support build in for WMS services.

Creation of a WMS service to be added to the map can be done in two ways. You can use either only the URL as parameter, or you can use a layer info object with the URL. In case you only use the URL, the ESRI API will use the proxy defined in the application, as is required for doing editing. I first tried this approach because it requires little parameters. However I got an error when using a local proxy defined as explained in an earlier document. So I moved to the second approach, specifying a layer info data in the XML configuration as showed below.

</WmsLayerInfos>

</Layer>

Implementing this in the configuration component results in only adding a couple of lines in the REST service. The only point of importance is the retrieval of the information needed to fill in the XML configuration for the WMS service. There are a couple of ways to retrieve the needed information. A first procedure you can use is using the “GetCapabilities” method of the rest service. The drawback of this procedure is that you get a large XML with a mess of properties. A second method is the use of a free utility “Gaia”. This utility is very easy to get information like the name or the spatial reference of a WMS layer. At the same time you can also visualize the WMS layers.

Another issue I encountered was during the initializing of the WMS layer with the ArcGis JavaScript API. In my GIS framework the building of the tables was done in the onload event of the layers. However in the case of WMS layers, no onload event is triggered. I should expect that as with other layers, the full data of the layer is available after the onload. A solution could be by doing a GetCapabilities on the WMS service to retrieve more information. This approach was used in the build of the list of selectable layers to get more information of the WMS service.

function _addNewWmsLayer(baseLayer, serviceType, index) {

try {

var layerInfos = new Array();

var layerNames = new Array();

for (var i = 0; i < baseLayer.LayerInfos.length; i++) {

var layer = new esri.layers.WMSLayerInfo({ name: baseLayer.LayerInfos[i].Name, title: baseLayer.LayerInfos[i].Title });

layerInfos.push(layer);

layerNames.push(baseLayer.LayerInfos[i].Name);

}

var resourceInfo = {

extent: new esri.geometry.Extent(baseLayer.WmsExtent.xmin, baseLayer.WmsExtent.ymin, baseLayer.WmsExtent.xmax, baseLayer.WmsExtent.ymax,

{ wkid: baseLayer.WmsExtent.spatialReference }),

layerInfos: layerInfos

};

mapLayer = new esri.layers.WMSLayer(baseLayer.RESTURL, { resourceInfo: resourceInfo, visibleLayers: layerNames });

mapLayer.setImageFormat("png");

mapLayers.push(mapLayer);

map.addLayer(mapLayer);

baseMapLayerInfos.push(new baseMapLayerInfo(baseLayer.RESTURL, mapLayer.id, baseLayer.Title, baseLayer.LayerInfos[0].Name, serviceType));

verifyInitialisationMap();

} catch (e) {

throw new Error("wmslayer " + baseLayer.RESTURL + " initialize process failed. " + e.name + "\n" + e.message);

}

The only extra information that you can get at this stage is the id of the layer, only after the WMS layer is added to the map. This is wy I only save the layer information after it has been added to the map. Other information as name, spatial reference comes from the configuration.

As you can see, not very exciting for adding WMS layer information to our map. I did need to take some additional steps in order to have the possibility to make spatial querying the WMS service possible.

if (layerLegendInfo.serviceType == ArcGISServiceType.Wms) {

// Wms file

urlGet = layerLegendInfo.url;

viewModel.wmsUrl = layerLegendInfo.url;

viewModel.wmsSpatialReference = GisOperation.getMap().getLayer(layerLegendInfo.id).spatialReference;

var data = {

VERSION: '1.1.1',

REQUEST: 'GetCapabilities',

SERVICE: 'WMS'

};

$.ajax({

type: 'GET',

url: urlGet,

data: data,

dataType: "xml",

success: function (xml) {

var jsonContents = $.xml2json(xml);

viewModel.wmsName = jsonContents.Capability.Layer.Layer.Name;

if (jsonContents.Capability.Layer.Layer.queryable == '1') {

// Layer is querable and can be used for selection

for (var j = 0; j < GisOperation.getBaseMapLayerInfos().length; j++) {

if (GisOperation.getBaseMapLayerInfos()[j].baseMapLayerId == viewModel.wmsName && GisOperation.getBaseMapLayerInfos()[j].serviceType == 5) {

selectionInfo = new layerSelectionInfo(GisOperation.getBaseMapLayerInfos()[j].url, GisOperation.getBaseMapLayerInfos()[j].id, GisOperation.getBaseMapLayerInfos()[j].name, null, "", GisOperation.getLayersSelectionInfos().length, null, ArcGISServiceType.Wms);

GisOperation.getLayersSelectionInfos().push(selectionInfo);

}

terminateLayerInitialize();

error: function (jqXHR, textStatus, errorThrown) {

logMessage("E", "error in selectBuild AJAX call ->" + textStatus + "\n" + errorThrown, "layerSelectionModule");

}

})

}

The main thing here is that we use the getCapabilities method to extract some additional information about the WMS layer. The most important here is that we use the querable attribute to know if we can query this WMS layer.

3. WMS query task

Once we added the WMS layer into our map, we can start creating a WMS query task. If you look at the WMS documentation, it looks simple. However there are some problems around the corner. When you click at a location in the map, you will get coordinates based on the spatial reference from the map, and this is based on the first base map layer loaded. But as you saw in the WMS layer definition, the WMS expect us to return the coordinates based on the spatial reference of the WMS layer. So there is the need for doing a projection conversion. Using the ESRI API you will need to call the projection conversion method of a geometry service running on an ArcGis server.

So before we can start implementing a WMS query task, we will first need to add a projection conversion method, I will use therefor the GisGeoProcessing class. It is not an exciting method, but must be done asynchronous.

convertProjection: function (points, toSpacialReference, callback) {

GisOperation.getGeometryService().project(points, toSpacialReference,

function (projectedPoints) {

callback(projectedPoints);

}, function errorprojected(err) {

logMessage("E", "projection convertion failed -->" + err.message, "GisGeoProcessing");

callBack(null);

});

}

The geometry service has already been initialized during the startup of the application and is available in the GIS framework.

I created a new GIS class ‘GisExtra’ that contains the new methods needed to illustrate the use of WMS queries and Google Streetview. The implementation of the WMS query is mainly the use of a REST service that will return the features from the spatial query.

wmsQuery: function (url, layerName, screenPoint, callBack) {

var extent = gisOperation.getMap().extent;

var points = new Array();

points.push(new esri.geometry.Point(extent.xmin, extent.ymin, extent.spatialReference));

points.push(new esri.geometry.Point(extent.xmax, extent.ymax, extent.spatialReference));

GisGeoProcessing.convertProjection(points, viewModel.wmsSpatialReference,

function (convertedPoints) {

var extent = new esri.geometry.Extent(convertedPoints[0].x, convertedPoints[0].y, convertedPoints[1].x, convertedPoints[1].y, convertedPoints[0].spatialReference);

var urlGet = GisOperation.getLayersLegendInfos()[i].url;

var data = {

REQUEST: 'GetFeatureInfo',

SERVICE: 'WMS',

VERSION: '1.1.1',

LAYERS: layerName,

STYLES: '',

FORMAT: 'image/png',

BGCOLOR: '0xFFFFFF',

TRANSPARENT: 'TRUE',

SRS: 'EPSG:' + extent.spatialReference.wkid.toString(),

BBOX: extent.xmin.toString() + "," + extent.ymin.toString() + "," + extent.xmax.toString() + "," + extent.ymax.toString(),

WIDTH: gisOperation.getMap().width.toString(),

HEIGHT: gisOperation.getMap().height.toString(),

QUERY_LAYERS: layerName,

X: screenPoint.x.toString(),

Y: screenPoint.y.toString()

};

$.ajax({

type: 'GET',

url: urlGet,

data: data,

dataType: "xml",

success: function (xml) {

var jsonContents = $.xml2json(xml);

callBack(jsonContents);

error: function (jqXHR, textStatus, errorThrown) {

logMessage("E", "error in GetFeatureInfo AJAX call ->" + textStatus + "\n" + errorThrown, "GisExtra/wmsQuery");

}

});

We first start an asynchronous operation for converting the extent coordinate of the map into coordinates that corresponds with the spatial reference of the WMS service. The other information is related to screen information. Apparently, WMS service do a calculation base on the map screen coordinates and screen point coordinates together with the map extent expressed in geo coordinates.

As you can see, simple querying a WMS services results in three asynchronous actions. The purpose of a good framework is hiding this complexity from the interface.

4. Google Streetview API

After I have written the WMS query task, I am ready to implement the visualization of Streetview for an address selected. To simplify the GUI, I added an extra tab to the on the web page. I called it “Extra”. With the help of DOJO, I will add dynamically the Google output on the page.

With the help from knockoutJS , the command is initiated and I start the focus of the tab control on the tab ‘Extra’. Then we initiate a draw point operation.

streetviewCommand: function () {

try {

viewModel.tabIndex(3);

// Build the contents

var tabDigit = dijit.byId(tabNames[3]);

if (dojo.byId("titlestreetviewId") == null) {

var contentTitle = "<div id='titlestreetviewId'><pan class='extraTitle'>Streetview information, select address</pan></div>";

require(["dojo/dom-construct"], function (domConstruct) {

domConstruct.place(contentTitle, "extraContents", "first")

});

}

// Start gis operations

GisOperation.getSelectLayer().clear();

GisOperation.getMeasurement().clearResult();

GisCommonTasks.setFinishedInfoEvent(handleAddressResults);

GisCommonTasks.drawGeometry("point")

} catch (e) {

logMessage("E", "streetviewCommand", e.Message);

}

The callback of the draw action will bring us to the next step, doing a spatial query on the WMS layer to get detailed information from the address layer.

function handleAddressResults(geometry) {

try {

GisCommonTasks.setFinishedInfoEvent(null);

if (geometry != null) {

if (geometry.type == "point") {

// Execute spatial query

wmsPoint = geometry;

var screenPoint = GisOperation.getMap().toScreen(geometry);

GisExtra.wmsQuery(viewModel.wmsUrl, viewModel.wmsName, screenPoint, wmsQueryComplete);

}

} catch (e) {

logMessage("E", "error in handleAddressResults->" + e.name + "\n" + e.message, "commonToolbarVM");

}

Not much coding needed for the spatial query on the WMS layer. Again the callback method will guide us to the final step, executing the Google API to get the Streetview on the web page. Because Google Maps use WGS-84, we need another projection conversion before we can get to the result. So again an asynchronous operation will be needed. To separate the business logic for the Streetview functionality, I put the method into the newly created GisExtra class.

First I put some extra data coming from the WMS layer on the tab. This is not the correct way in the MVVM model, but I could find another solution, certainly with the Google Streetview coming.

Next we convert the point geometry into the WGS-84 equivalent.

Then we called the Google API.

function wmsQueryComplete(featureInfo) {

try {

if (featureInfo.FIELDS) {

// Add contents to the window

$("#wmsInfoId").remove();

$("#streetviewId").remove();

var contentPosition = "<div id='wmsInfoId'><span>NisCode:" + featureInfo.FIELDS.NISCODE + " CapaKey:" +featureInfo.FIELDS.CAPAKEY + "</span></div>";

require(["dojo/dom-construct"], function (domConstruct) {

domConstruct.place(contentPosition, "extraContents", "last")

});

var infoTemplate = new esri.InfoTemplate("Agiv Location", "");

var wmsSymbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE).setColor(new dojo.Color([255, 0, 0, 0.5]));

graphic = new esri.Graphic(wmsPoint, wmsSymbol, {}, infoTemplate);

GisOperation.getSelectLayer().add(graphic);

}

// Interface to google streetview use 4326 (wgs 84)

GisGeoProcessing.convertProjection([wmsPoint], new esri.SpatialReference({ wkid: 4326 }), function (point) {

if (point[0] != null) {

// clearTabContents(3);

if (dojo.byId("streetviewId") == null) {

var contentPosition = "<div id='streetviewId' style='width: 360px; height: 360px'></div>";

require(["dojo/dom-construct"], function (domConstruct) {

domConstruct.place(contentPosition, "extraContents", "last")

});

}

GisExtra.initStreetView(point[0], dojo.byId("streetviewId"), 50);

}

});

} catch (e) {

logMessage("E", "wmsQueryComplete", e.Message

}

Again a nice chaining of callback’s guide us to the ultimate action to be done, calling the Google API. As you can see, not a lot of parameters are needed. We need a point in WGS-84, a div that will contain the image and a radius that will help us solve the facts that the address points need not to be on the street itself but may have an offset to the street, as is the case in the AGIV address locations.

The method creating the image is simple and examples can be found on the Google documentation.

initStreetView: function (point, divCtrl, radius) {

try {

pointStreetView = point;

locationGoogle = new google.maps.LatLng(point.y, point.x);

// Set up the map and enable the Street View control.

var mapOptions = {

center: locationGoogle,

zoom: 16,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var mapGoogle = new google.maps.Map(divCtrl, mapOptions);

var panorama = mapGoogle.getStreetView();

// Set up Street View and initially set it visible. Register the

var panoOptions = {

position: locationGoogle,

visible: true

};

panorama.setOptions(panoOptions);

// Create a StreetViewService object.

var streetviewService = new google.maps.StreetViewService();

// Compute the nearest panorama to the Google Sydney office

// using the service and store that pano ID

streetviewService.getPanoramaByLocation(locationGoogle, radius,

function (result, status) {

if (status == google.maps.StreetViewStatus.OK) {

// We'll monitor the links_changed event to check if the current

// pano is either a custom pano or our entry pano.

google.maps.event.addListener(panorama, 'links_changed',

function () {

});

}

});

} catch (e) {

logMessage("E", "error in Google streetview API interface ->" + err.message, "GisExtra/initStreetView");

}

The great thing here is that you can create almost the same streetview functionality as that Google Maps expose, maybe not at the same speed. You can explore the street. I wonder if it is not possible to synchronize the Google window with the ArcGis Map. What I show here has certain usage restriction, keeps this in mind.

The biggest job was supporting WMS layers and query functionality. This tokes the most of my time. But after all not so much code is required to support Google Streetview and WMS services. You can still add a lot more functionality to WMS services, but who wonders, maybe one day they will be added to the ArcGis JavaScript API.

Walking into my street from a ArcGis JavaScript Application looks like.

ARCGIS JavaScript API – BASIC EDITING COMMANDS SECTION 1 – PART V

2012-05-09T05:56:00.001-07:00

1. Introduction

In this document I will explain how basic editing can be done through the ArcGis JavaScript API. With the Silverlight API, basic editing is much sampler than in Javascript. The edit tool in Silverlight offers much more methods than does the editor in the JavaScript API. So in the JavaScript implementation I do not use the editor tool dijit but instead I use the edit toolbar. The only dijit used in the editing is the template picker, which is used for creating features. Simple feature creation is done by the draw toolbar component.

In the coming 10.1 version you will be able to use versioning when doing web editing. I hope later to add support for this new important feature.

Basic feature editing consists of the following commands:

· Select features for a feature class

· Clear all selected features for a feature class

· Select the feature layer for editing

· Create new features

· Delete selected features

· Edit attribute data for a feature

· Save update or creation of a feature

· Undo changes

· Create features from a symbol template

Below is the schema how the JavaScript application framework is build. The basic idea is separation of the GUI from GIS commands and tools and the ArcGis Javascript API. The main webpage has almost no Javascript code embedded. Only some initialization code for the dojo library can be found on the page.

To keep the GIS framework library independent from the application, there is no interaction between the view model and the ArcGis Javascript API. knockoutJS plays an important role for the exchange of data between the web page and the view models.

Before you can do editing on feature classes, a proxy URL must be installed to handle a POST that exceed the 2048 character size limit. Lucky, ESRI provide us the full source code for the implementation of the proxy URL that replace the POST request with a GET when the maximum size is reached. The GET request has no size limitations. You find all the information for implementing the proxy URL at http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm .

The toolbar used for doing the basic editing consists of a dropdown list,9 buttons and a checkbox used for displaying a template of symbols. All this elements interact with the view model of the web page.

2. Selections

Before editing can be done, an editable layer must be selected. This can be done through a combo box that is built with the feature layers. The data source of the combo box is an observable collection from knockoutJS. By using an observable collection the selection is automatically reflected in the view model. The implementation is illustrated below :

HTML :

View model :

this.editLayers = ko.observableArray();

this.selectedLayer = ko.observable();

The array editLayers contains the title and the layer id of the feature layer. Using the layer id we set the layer information in the GisEditing class. In setting the layer information, I also add at the same time the selection symbols so that after drawing the result it is always visible even if the feature is not saved in the database yet.

setEditLayer: function (featureLayerName) {

var featureLayer = GisOperation.getMap().getLayer(featureLayerName);

if (featureLayer != null) {

currentFeatureLayer = featureLayer;

if (currentFeatureLayer.geometryType == "esriGeometryPolygon") {

currentFeatureLayer.setSelectionSymbol(gisOperation.getSelectionFillSymbol());

currentDrawGeometryType = esri.toolbars.Draw.POLYGON;

currentSymbol = gisOperation.getSelectionFillSymbol();

}

else if (currentFeatureLayer.geometryType == "esriGeometryPolyline") {

currentFeatureLayer.setSelectionSymbol(gisOperation.getSelectionLineSymbol());

currentDrawGeometryType = esri.toolbars.Draw.POLYLINE;

currentSymbol = gisOperation.getSelectionLineSymbol();

}

else if (currentFeatureLayer.geometryType == "esriGeometryPoint") {

currentFeatureLayer.setSelectionSymbol(gisOperation.getSelectionMarkerSymbol());

currentDrawGeometryType = esri.toolbars.Draw.POINT;

currentSymbol = gisOperation.getSelectionMarkerSymbol();

}

return true;

}

else

return false;

Now everything is ready for doing the creation and editing of features.

3. Create feature

As of all command and tools, the processing starts at the main view model using two exposed methods : execute and canexecute using the same technique used in the viewmodel of Silverlight.

this.addExecute = function () {

editToolbarGeneralViewModel.addCommand(setEditActive, this.selectedLayer().layerName);

};

this.addCanExecute = ko.computed(function () {

return !this.isEditActive();

}, this);

The canexecute is used to enable or disable commands. The reason for adding this extra method is to block some command during the processing of commands and tools. When you press create a feature, you expect that only the save or undo button is available, other buttons like edit a feature or delete a feature must be disabled. The use of knockoutJS will help us to enable or disable this without a lot of coding.

First I create an observable isEditActive that will reflect if some Create / Update / Delete is active. By setting this observable to a new value all properties CanExecute get also a new value.

Instead of using jQuery to do the dom processing for enable / disable buttons, a much simpler solution is the use of the view model implementation of knockoutJS.

In Javascript I used the draw toolbar component for doing the drawing of new features. In Silverlight I could use the editor for doing the creation of features. As I explained earlier, the edit dijit has only limited methods exposed, so making it not suitable for custom edit toolbars. Still creating a feature is only a couple of lines.

startCreateOperation: function (editOperationComplete) {

if (currentFeatureLayer == null)

return;

try {

currentOperation = "CreateFeature";

currentGeometry = null;

drawCreateEndHandlerHandle = dojo.connect(gisOperation.getDraw(), "onDrawEnd", drawCreateEndHandler);

gisOperation.getDraw().activate(currentDrawGeometryType);

} catch (err) {

logMessage("E", "startCreateOperation failed -->" + err.message, "gisEditing");

}

After creation of the geometry, a callback is defined to display the result. Because we don’t do directly save, the geometry is first put on the graphics layer. Only during a save the actual feature is displayed on the map.

// Eventhandler for the end of a geometry drawn

function drawCreateEndHandler(geometry) {

try {

currentGeometry = geometry;

// Drawn graphic with the geometry drawn

if (currentOperation == "CreateFeature") {

var newGraphic = new esri.Graphic(currentGeometry, currentSymbol, currentAttributes);

gisOperation.getMap().graphics.add(newGraphic);

gisOperation.getMap().graphics.refresh();

// start attribute editing

}

if (drawCreateEndHandlerHandle != null)

dojo.disconnect(drawCreateEndHandlerHandle);

} catch (err) {

logMessage("E", "drawCreateEndHandler failed -->" + err.message, "gisEditing");

}

Because this result is only a geometry, the feature contains null values for all its attributes. I will add later attribute editing during the creation of geometries. This will only result in the calling of an attribute edit.

4. Edit of the geometry of a feature

The command consist of the combination of two actions. First, select a feature with the select button. Next press the edit vertices button to activate the display of vertices.

The editing of vertices makes use of the edit toolbar component. Initialization is done during the init of the GisEditing component.

editTool = new esri.toolbars.Edit(gisOperation.getMap());

To start editing of vertices, activate the edit toolbar with the correct parameters for the selected feature.

startEditOperation: function (editOperationComplete) {

if (currentFeatureLayer == null)

return;

try {

if (currentFeatureLayer.getSelectedFeatures().length == 1) {

currentOperation = "EditVertices";

currentAttributes = currentFeatureLayer.getSelectedFeatures()[0].attributes;

editTool.activate(esri.toolbars.Edit.MOVE | esri.toolbars.Edit.EDIT_VERTICES,

currentFeatureLayer.getSelectedFeatures()[0]);

}

} catch (err) {

logMessage("E", "startEditOperation failed -->" + err.message, "gisEditing");

}

Ending of the edit is done through a save or undo command. This version only handle single edit operations.

5. Creation of features

As part of the basic editing functionality, we support two ways to create features :

· Simple create new feature

· Create feature based on a template of feature types

The use of templates is only a front end for a simpler creation of features with some attribute values already filled in. This functionality relies entirely on the simple feature creation.

The creation of feature is not build upon the editor dijit but rather on a simple draw action using the draw toolbar. At the end of the draw operation a new feature is build based on the geometry and on the contents of initialized attributes. In the case of a simple feature creation, the attribute table is empty, for use of template, attributes are prefilled with values coming from the exposed templates of the feature service.

startCreateOperation: function (editOperationComplete) {

if (currentFeatureLayer == null)

return;

try {

currentOperation = "CreateFeature";

currentGeometry = null;

drawCreateEndHandlerHandle = dojo.connect(gisOperation.getDraw(), "onDrawEnd", drawCreateEndHandler);

gisOperation.getDraw().activate(currentDrawGeometryType);

} catch (err) {

logMessage("E", "startCreateOperation failed -->" + err.message, "gisEditing");

}

As you can see, the creation is based on the draw action. At the end of the draw action, control is passed to a callback method. This method does not do a lot of processing, simple save the geometry for later use in the save and display the result on the graphic layer so that you can see what has been drawn.

// Eventhandler for the end of a geometry drawn

function drawCreateEndHandler(geometry) {

try {

currentGeometry = geometry;

// Drawn graphic with the geometry drawn

if (currentOperation == "CreateFeature") {

var newGraphic = new esri.Graphic(currentGeometry, currentSymbol, currentAttributes);

gisOperation.getMap().graphics.add(newGraphic);

gisOperation.getMap().graphics.refresh();

// start attribute editing

}

if (drawCreateEndHandlerHandle != null)

dojo.disconnect(drawCreateEndHandlerHandle);

} catch (err) {

logMessage("E", "drawCreateEndHandler failed -->" + err.message, "gisEditing");

}

I will later add support for attribute editing at the end of the creation of the feature. As you can see now this will be done in the callback method.

Use of templates

Creation of feature with the help of a template of feature types is a special way of creating features. The main difference is that by using feature types, you can use attribute values that has been prefilled in and exposed by the feature service.

To simplify the job, I use the template picker dijit from the ArcGis JavaScript API. This dijit can be used independent of the editor dijit and makes the creation of a template having all the different feature types much easier.

Because the template picker is a visual object, I have to create a div that will serve as container for this object. The creation of the template is done in the view model of the edit toolbar. In principle this violates the MVVM rules, but because we don’t have the same possibilities as in Silverlight this was the easiest way to do. You could try to build it yourself with a knockoutJS template, but displaying symbols will result in much more code to write.

By using this ESRI dijit, we still need to do some extra work to handle the selection on the template.

· We must keep track of the attribute values that are related to the feature type.

· Start the create feature on the feature class of the feature type

This is not so difficult to do as you can see in the code below

initializeTemplatePicker: function (templateDiv, setEditActive) {

try {

setEditActiveEdit = setEditActive;

viewModel.visibleTemplates(true);

var contentHolder = "<div id='" + templateDiv + "'></div>";

require(["dojo/dom-construct"], function (domConstruct) {

domConstruct.place(contentHolder, "editTemplates", "first");

});

templatePicker = new esri.dijit.editing.TemplatePicker({

featureLayers: GisOperation.getFeatureLayers(),

rows: "auto",

columns: "auto",

showTooltip: true,

style: "height: 100%; width: 250px;"

}, templateDiv);

templatePicker.startup();

dojo.connect(templatePicker, "onSelectionChange", function () {

var selected = templatePicker.getSelected();

GisEditing.initAttributes(selected.template.prototype.attributes);

editToolbarGeneralViewModel.addCommand(setEditActive, selected.featureLayer.name);

});

} catch (err) {

logMessage("E", "error in initializeTemplatePicker ->" + err.name + "\n" + err.message, "editToolbarGeneralVM");

}

The template dijit is created in code and added to the DOM and not in the HTML code because of problems with the destroy method of the ESRI dijit component. By creating the dijit in code you can dynamically add and delete the template in code. All the prefilled attributes can be found in the template prototype property.

The checkbox will create the edit templates by adding the template picker to the corresponding window. Simply clicking on the icon will start the create functionality.

Another possibility is creating a custom template from scratch by using the items object in the constructor. This will however include more coding at the selection level. In our general approach for implementing an webmap editor, using the template picker based on edit layers is the more straightl solution.

Putting ESRI objects by code into an accordion container can be tricky. Elements of the container are only available after it has been selected. So you must use the selectChild event to create the template picker.

var accResults = dijit.byId("leftAccordion");

dojo.connect(accResults, "selectChild", function (childPane) {

if (childPane.id == "editTemplates" && viewModel.useTemplates()) {

if (!editToolbarGeneralViewModel.isTemplatePickerInitialized()) { editToolbarGeneralViewModel.initializeTemplatePicker(TemplatePickerDiv, setEditActive);

}

});

In a next document I will explain in detail how the save or undo commands work.

ARCGIS JavaScript API – USING BASIC GIS TOOLS AND COMMANDS – PART IV

2012-04-25T01:15:00.001-07:00

1.     Introduction

In previous articles I showed you how we can setup a map infrastructure for consuming different dynamic layers and feature layers. I showed you how we can build different tables with information coming from these layers. In this article I will introduce you in the creation of some basic command and tools that will interfere with the layers in the map. In the implementation of these actions I will use more actively the ViewModel pattern found in the knockoutJS javascript library.

2.     Toolbar

The toolbar that will be discussed in this article consist of the following toolbar items :

·         Zoom In tool
·         Zoom out tool
·         Pan command
·         Inspect tool
·         Measure tools

All these tools and commands have their main implementation in the common ViewModel but have a more detailed implementation in a ‘common toolbar’ ViewModel. Doing so, the main ViewModel is a light weight class with little or no logic behind, and it sole purpose is to interact with the view (the html page). New here is also the use of templates from the knockoutJS javascript library.

3. Logging

To make debugging easier, I introduced a logging component. The logging happens through a rest service and is stored in a log file at the server. This approach can be useful to trace all errors that occurs in the application. However for debugging purpose this can also be very useful. Because a lot of methods works asynchronous, having an extended log file can help you debug errors due to inconsistent sequence of operations. Below you can see an example of a log file. I use a debug variable to enable or disable extended logging. Important is adding logging when asynchronous actions occurs. As you can see in de log file example, initialization does not always happens in the sequence of the call to the rest services.

24/04/2012 - 18:05:30 - I - startup - getconfiguration start

24/04/2012 - 18:05:30 - I - startup - getconfiguration finished

24/04/2012 - 18:05:30 - I - eventAggregator-subscribe - mapLoaded

24/04/2012 - 18:05:30 - I - eventAggregator-subscribe - legendBuild

24/04/2012 - 18:05:30 - I - addNewDynamicLayer - http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer

24/04/2012 - 18:05:30 - I - addNewDynamicLayer - http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer

24/04/2012 - 18:05:30 - I - mapModule - init finished

24/04/2012 - 18:05:30 - I - startup - startup finished

24/04/2012 - 18:05:30 - I - layer_Initialized - http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer

24/04/2012 - 18:05:30 - I - addNewFeatureLayer - http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0

24/04/2012 - 18:05:30 - I - addNewFeatureLayer - http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/1

24/04/2012 - 18:05:30 - I - layer_Initialized - http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer

24/04/2012 - 18:05:31 - I - featureLayer_Initialized - http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/1

24/04/2012 - 18:05:31 - I - featureLayer_Initialized - http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0

24/04/2012 - 18:05:31 - I - eventAggregator-publish - mapLoaded - initializeVM

24/04/2012 - 18:05:31 - I - eventAggregator-publish - mapLoaded - legendBuild

24/04/2012 - 18:05:31 - I - legendModule - start legend build

24/04/2012 - 18:05:33 - I - legendModule - build legend done

24/04/2012 - 18:05:33 - I - eventAggregator-publish - legendBuild - selectBuild

4. Navigation tools

The migration of the Silverlight C# implementation of Zoom in and Zoom out is very easy. As you can see by comparing the two implementations, a lot of coding is similar between C# and JavaScript.

Button commands

JavaScript Code

/// <summary>

/// Zoom In task

/// </summary>

zoomInTask: function () {

currentCommand = "ZoomIn";

iGisOperation.setCompleteDrawEvent(drawComplete);

iGisOperation.setDrawMode(esri.toolbars.Draw.EXTENT); // Start draw tool with a rectangle

/// <summary>

/// Zoom Out task

/// </summary>

zoomOutTask: function () {

currentCommand = "ZoomOut";

iGisOperation.setCompleteDrawEvent(drawComplete);

iGisOperation.setDrawMode(esri.toolbars.Draw.EXTENT); // Start draw tool with a rectangle

}

C# Code

/// <summary>

/// Zoom In task

/// </summary>

public void ZoomInTask()

{

currentCommand = "ZoomIn";

gisOperations.SetCompleteDrawEvent(DrawComplete);

gisOperations.SetDrawMode(DrawMode.Rectangle); // Start draw tool with a rectangle

}

/// <summary>

/// Zoom out task

/// </summary>

public void ZoomOutTask()

{

currentCommand = "ZoomOut";

gisOperations.SetCompleteDrawEvent(DrawComplete);

gisOperations.SetDrawMode(DrawMode.Rectangle); // Start draw tool with a rectangle

}

Activation of the zoom action

JavaScript code

iGisOperation.mapZoom(currentCommand, args.getExtent());
iGisOperations.setDrawMode(esri.toolbars.Draw.EXTENT);

C# code

gisOperations.MapZoom(currentCommand, args.Geometry);

gisOperations.SetDrawMode(DrawMode.Rectangle);

Next I use the zoom in the map method, this is the main method used for the zoom in and the zoom out actions. Below is the comparison between the JavaScript and C# code.

Zoom action

JavaScript Code

mapZoom: function (action, geometry) {

try {

var multiplier;

if (action == "ZoomIn") {

map.setExtent(geometry.getExtent());

}

Else if (action == "ZoomOut") {

var currentExtent = map.extent;

var zoomBoxExtent = geometry.getExtent();

var zoomBoxCenter = zoomBoxExtent.getCenter();

var whRatioCurrent = currentExtent.getWidth() / currentExtent.getHeight();

var whRatioZoomBox = zoomBoxExtent.getWidth() / zoomBoxExtent.getHeight();

var newEnv = null;

if (whRatioZoomBox > whRatioCurrent) {

// use width

multiplier = currentExtent.getWidth() / zoomBoxExtent.getWidth();

var newWidthMapUnits = currentExtent.getWidth() * multiplier;

newEnv = new esri.geometry.Extent(zoomBoxCenter.x - (newWidthMapUnits / 2), zoomBoxCenter.y,

zoomBoxCenter.x + (newWidthMapUnits / 2), zoomBoxCenter.y, map.spatialReference);

}

else {

// use height

multiplier = currentExtent.getHeight() / zoomBoxExtent.getHeight();

var newHeightMapUnits = currentExtent.getHeight() * multiplier;

newEnv = new esri.geometry.Extent(zoomBoxCenter.x, zoomBoxCenter.y - (newHeightMapUnits / 2),

zoomBoxCenter.x, zoomBoxCenter.y + (newHeightMapUnits / 2), map.spatialReference);

}

if (newEnv != null)

map.setExtent(newEnv.getExtent());

}

} catch (e) {

throw new Error("zoom action failed. " + e.name + "\n" + e.message);

}

C# code

/// <summary>

/// Zoom in and out task

/// </summary>

/// <param name="action">ZoomIn or ZoomOut</param>

/// <param name="geometry">Rectangle to be zoomed</param>

public void MapZoom(string action, ESRI.ArcGIS.Client.Geometry.Geometry geometry)

{

try

{

if (action.Equals("ZoomIn"))

{

mapControl.ZoomTo(geometry as Envelope);

}

Else if (action.Equals("ZoomOut"))

{

Envelope currentExtent = mapControl.Extent;

Envelope zoomBoxExtent = geometry as Envelope;

MapPoint zoomBoxCenter = zoomBoxExtent.GetCenter();

double whRatioCurrent = currentExtent.Width / currentExtent.Height;

double whRatioZoomBox = zoomBoxExtent.Width / zoomBoxExtent.Height;

Envelope newEnv = null;

if (whRatioZoomBox > whRatioCurrent)

// use width

{

double multiplier = currentExtent.Width / zoomBoxExtent.Width;

double newWidthMapUnits = currentExtent.Width * multiplier;

newEnv = new Envelope(new MapPoint(zoomBoxCenter.X - (newWidthMapUnits / 2), zoomBoxCenter.Y),

new MapPoint(zoomBoxCenter.X + (newWidthMapUnits / 2), zoomBoxCenter.Y));

}

else

// use height

{

double multiplier = currentExtent.Height / zoomBoxExtent.Height;

double newHeightMapUnits = currentExtent.Height * multiplier;

newEnv = new Envelope(new MapPoint(zoomBoxCenter.X, zoomBoxCenter.Y - (newHeightMapUnits / 2)),

new MapPoint(zoomBoxCenter.X, zoomBoxCenter.Y + (newHeightMapUnits / 2)));

}

if (newEnv != null)

mapControl.ZoomTo(newEnv);

}

catch (Exception ex)

{

messageBoxCustom.Show(String.Format("MapZoom-{0}", ex.Message),

GisTexts.SevereError,MessageBoxCustomEnum.MessageBoxButtonCustom.Ok);

}

As you can see for the two different language environment, the same logic can be used for the two projects. The fact that the same code can be used is mainly due that both environments are based on the ArcGis Api’s that on its turn is based on the rest services from the ArcGis server.

5. Inspect tool

With the inspect tool we come to a more sophisticated tool. The inspect tool will retrieve all features that intersects with the point indicated on the map using a predefined buffer. The layers used on the map for the query must be checked on the selection tab of the tab control. The results containing the attributes will be displayed on the query tab. To simplify the display, I used a html embedded template of knockoutJS that make use of dependency properties of the ViewModel easy to show.

Step 1 : Start a draw action of a point selection.

infoCommand: function () {

try {

iGisOperation.getMeasurement().clearResult();

iGisCommonTasks.setFinishedInfoEvent(handleInfoResults);

iGisCommonTasks.infoQuery(true);

} catch (e) {

logMessage("E", "IQ-01", e.Message);

}

Step 2: Start the draw action in the infoQuery method. When the tool is finished, the result will be returned in the callback function ‘handleInfoResults’

infoQuery: function (isSpatialQuery) {

// Info implementation , using ESRI API

iGisOperation.resetCompleteDrawEvent(drawComplete);

if (isSpatialQuery)

currentCommand = "Info";

else

currentCommand = "AddressInfo";

iGisOperation.setCompleteDrawEvent(drawComplete);

iGisOperation.setDrawMode(esri.toolbars.Draw.POINT);

}

Step 3: Start the spatial query for all the selected layers.

if (currentCommand == "Info" || currentCommand == "AddressInfo") {

// Use ESRI API for Info

var layer = null;

var i;

var query, queryTask;

iGisOperation.setDrawMode(null);

iGisOperation.resetCompleteDrawEvent();

result = new Array();

errorCount = 0;

errorMessages = '';

totalCountLayers = 0;

currentCountLayers = 0;

if (currentCommand == "Info") {

totalCountLayers = iGisOperation.getLayersSelectionInfos().length;

for (i = 0; i < iGisOperation.getLayersSelectionInfos().length; i++) {

if (iGisOperation.getLayersSelectionInfos()[i].selected && iGisOperation.getLayersSelectionInfos()[i].layer.type == 'Feature Layer') {

queryTask = new esri.tasks.QueryTask(iGisOperation.getLayersSelectionInfos()[i].url);

query = new esri.tasks.Query();

query.geometry = args;

query.outFields = ["*"];

query.spatialRelationship = esri.tasks.SPATIAL_REL_INTERSECTS;

queryTask.execute(query, function (features) {

currentCountLayers += 1;

if (!features.name) {

if (features.features.length > 0)

result.push(features);

}

queryInfosComplete();

}, function (e) {

currentCountLayers += 1;

errorCount += 1;

errorMessages += ">";

errorMessages += e.message;

errorMessages += "\n";

queryInfosComplete();

});

}

else

currentCountLayers += 1;

}

The function ‘queryInfosComplete’ is used to verify if all layers has been handled, if this is the case, the callback function is called to handle over the results to the view model.

function queryInfosComplete() {

if (currentCountLayers >= totalCountLayers) {

if (finishedInfoOperation != null)

finishedInfoOperation(result);

}

Step 4: Handle the results to the calling view model. We build here a list of all attributes found and that is used to scroll through.

var attributesResults;

var currentItem;

function handleInfoResults(results) {

try {

iGisCommonTasks.setFinishedInfoEvent(null);

attributesResults = new Array();

var attributeItem;

for (var i = 0; i < results.length; i++) {

var resultFeatures = results[i].features;

for (var j = 0; j < resultFeatures.length; j++) {

var attributes = new Array();

for (var item in resultFeatures[j].attributes) {

attributeItem =

new attribute(ko.observable(item), ko.observable(resultFeatures[j].attributes[item]));

attributes.push(attributeItem);

}

attributesResults.push(attributes);

}

if (attributesResults.length > 0) {

viewModel.resultAttributes(attributesResults[0]);

viewModel.resultCount((attributesResults.length));

currentItem = 1;

viewModel.resultIndex(currentItem);

viewModel.resultVisible(true);

}

else {

alert("No results found");

}

} catch (e) {

logMessage("E", "error in handleInfoResults->" + e.name + "\n" + e.message, "commonToolbarVM");

}

An array of attributes is extracted from the results is used to display attributes of one feature at a time.
Two buttons are used to scroll through the results. The query tab looks like the example below.

The html code that is used for displaying the result above with the knockoutJS data binding is :

<th scope="col">Field</th>

<th scope="col">Value</th>

</thead>

<tr>

</td>

</td>

</tr>

</tbody>

</table>

</div>

6. Measure tools

In the Silverlight ArcGis API, this is a simple tool that can be implemented without writing custom code. The implementation happens through the interaction library from blend.

In JavaScript the job is much harder if you don’t want to use the ESRI widget and create your own button implementation. Creation of a custom measurement consist of the following steps:

·         Add the measurement widget to the html page during the onload event of the map.
·         Activate the measure tools through button commands.
·         In the callback method the geometry drawn is returned.
·         Call the geometry service for calculating area and length of the drawn geometry.
·         Return the values to the ViewModel for displaying .

Step : Add measurement widget in the init method of the map module

dojo.connect(mapControl, 'onLoad', function (map) {

//resize the map when the browser resizes

dojo.connect(dijit.byId('map'), 'resize', map, map.resize);

initToolbar(map);

});

Step: Activate the measure tool in the widget.

measureCommand: function (tool) {

iGisOperation.getMeasurement().clearResult();

iGisOperation.getMeasurement().setTool(tool, true);

dojo.connect(iGisOperation.getMeasurement(), "onMeasureEnd", function

(activeTool, geometry) {

this.setTool(activeTool, false);

// calcuate the area or length of the geometry

if (activeTool == "area") {

iGisGeoProcessing.calculateAreaLength(geometry, function

calcResults(areaPolygon, lenPolygon) {

if (areaPolygon != null)

viewModel.message1("Area is " + areaPolygon.toFixed(0) + " m2 and the length is " + lenPolygon.toFixed(0) + " m");

else

viewModel.message1("Error occured during the calculation, see log file");

});

}

else if (activeTool == "distance") {

iGisGeoProcessing.calculateLength(geometry, function calcResults(lenPolyline) {

if (lenPolyline != null)

viewModel.message1("Length is " + lenPolyline.toFixed(0) + " m");

else

viewModel.message1("Error occured during the calculation, see log file");

});

}

});

}

Step Calculate the area or length.

Two methods are added to the geo processing class to calculate the area and / or length of geometries. Later I will add more methods to this class for supporting the feature editing to

calculateAreaLength: function (geometry, callBack) {

var areasAndLengthParams = new esri.tasks.AreasAndLengthsParameters();

areasAndLengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;

areasAndLengthParams.areaUnit = esri.tasks.GeometryService.UNIT_METERS;

iGisOperation.getGeometryService().simplify([geometry],

function (simplifiedGeometries) {

areasAndLengthParams.polygons = simplifiedGeometries;

iGisOperation.getGeometryService().areasAndLengths(areasAndLengthParams,

function outputAreaAndLength(result) {

var areaPolygon = result.areas[0];

callBack(result.areas[0], result.lengths[0]);

}, function errorAreaLength(err) {

logMessage("E", "calculate area failed -->" + err.message, "commonToolbarVM");

callBack(null,null);

});

}

7. Conclusion

By implementing these tools we already touched a lot of geometry processing. In the case of the inspect tool, I discover one important difference when executing spatial queries. In the Silverlight API you can add a tag to the query, so when the results are returned from the query, the tag can be used to identify the result set. In the JavaScript API, no tag can be added to the query. The result of this is that I could not identify the origin (layer) from the features. I will later see if there is a way to work around this lack of information in the JavaScript API.

The use of geometry services will play an important role when we start to do feature editing. In the next document I will introduce some basic editing functionality.

ARCGIS JavaScript API – ADDING A LAYER SELECTION – PART III

2012-03-26T12:50:00.000-07:00

1. Introduction

Before going to implementing different tools and commands from the toolbars for doing different GIS functions I add a list that contains all the layers that can be used for doing spatial and attribute queries. This list is similar to what can be found in the ArcGis desktop application AcMap on the second tab. As is the case of the legend module I used a jQuery extension in combination with a template to create a layer selection list. The actions needed for creation the layer selection list consists of the following steps

· Create a jQuery HTML template that is hosted on the web server and will serve as the blueprint for a list item. The template is retrieved through an AJAX request.

· Create a simple jQuery extension that will call the jQuery template plug-in.

· Build an array of layers with for each layer a number of useful attribute information. The creation of the array will consists of a call of a rest service for each layer. In the example outlined here, I will limit the array of layers to feature layers. This could easy be extended to all layers having a query capability and not necessary having attributes exposed.

To make the layer selection list available to all components, the list will be maintained in the gisOperation class.

2. Layer selection template

The template I use is much simpler than the one used in the legend. It can easy be customized by CSS to enhance the presentation of the list. In my example, the template looks like this:

<li>

<h3 class="agsSelect" style="margin:0 0 0 25px;padding:0;" >${title}</h3>

</li>

In this template I use two functions to calculate an unique ID and event handling of the checkbox checked.

3. Layer selection jQuery extension

The most important is the update of the array list with the selection set or reset. This is done by the code below that is linked to the click event of the checkbox.

// Handle the select toggle click event

function checkSelectLayer(ev) {

// We'll find the layer based on the select id, so capture it

  var selectId = this.id,select =this.checked;

  $.each(iGisOperation.getLayersSelectionInfos(), function (index, selectLayer) {

     if (selectLayer.selectId === selectId){

        iGisOperation.getLayersSelectionInfos()[index].selected = select;

     return;

});

4. Layer selection list creation

The creation of the layer selection list is largely done in a the layer selection module. In this module I put some initialization into it that will be responsible for the maintenance of the list. For its creation the layer selection list depends on the output of the legend module. To synchronize the maintenance of the layer selection list with the legend module, I used the event aggregator class to subscribe to the end of the legend build. After the legend is build, all extra information needed will be available.

The init of the layer selection module is responsible for the subscription process.

var layerSelectionModule = (function () {

    var i, j, k, l, index;

    var totalLayers2Check = 0;

    var totalLayersChecked = 0;

    var urlGet;

    var divLegend;

    var selectionInfo;

….

    return {

        init: function (divElement) {

            this.divLegend = divElement;

            iEventAggregator.subscribe("legendBuild", selectBuild, divElement);

});

The selectBuild function will actual create the layer selection list upon the end of the build of the legend.

function selectBuild() {

// Calculate number or layers

  for (i = 0; i < iGisOperation.getLayersLegendInfos().length; i++) {

    if (iGisOperation.getLayersLegendInfos()[i].layers != null)

      totalLayers2Check += iGisOperation.getLayersLegendInfos()[i].layers.length;

  // Start building the selection layer list

  for (i = 0; i < iGisOperation.getLayersLegendInfos().length; i++) {

    if (iGisOperation.getLayersLegendInfos()[i].layers != null) {

     for (j = 0; j < iGisOperation.getLayersLegendInfos()[i].layers.length; j++) {

     // Skip group layer

       if (iGisOperation.getLayersLegendInfos()[i].layers[j].parentLayerId > -1) {

         urlGet = iGisOperation.getLayersLegendInfos()[i].url + "/" + iGisOperation.getLayersLegendInfos()[i].layers[j].id + "?f=json&callback=?";

         $.getJSON(urlGet, function (data) {

            if (data.type == 'Feature Layer') {

              index = -1;

              for (k = 0; k < iGisOperation.getLayersLegendInfos().length; k++) {

                if (iGisOperation.getLayersLegendInfos()[k].layers != null) {

                  for (l = 0; l < iGisOperation.getLayersLegendInfos()[k].layers.length; l++) {

                    if (iGisOperation.getLayersLegendInfos()[k].layers[l].name == data.name) {

                       index = k;

                       break;

                   if (index > -1)

                     break;

               if (index > -1) {

                 selectionInfo =

                   new layerSelectionInfo(iGisOperation.getLayersLegendInfos()[index].url, data.id, data.name, data.fields, data.displayField, iGisOperation.getLayersSelectionInfos().length);

                   iGisOperation.getLayersSelectionInfos().push(selectionInfo);

             terminateLayerInitialize();

});

         else

           terminateLayerInitialize();

 function terminateLayerInitialize() {

   totalLayersChecked += 1;

   if (totalLayersChecked == totalLayers2Check) {

   // All layers has been retrieved, ready to move the contents to the list

     var selectLayers = $("#selectRegion").agsSelect({ autoLoadTemplates: true });

I use a simple counter system to know when all rest services has been processed. When this is done, the jQuery extension is called with the template plugin. During the processing of the rest services important information as fields are included into the layer selection list. This will be useful during the query command and tools. I also maintain the layer selection array into the gisOperation class for common use.

The final result looks like this:

ARCGIS JavaScript API – BUILDING A LEGEND COMPONENT – PART II

2012-03-13T12:41:00.002-07:00

1. Introduction

As we see in the ArcGis Desktop application (ArcMap), the use of the legend consists of more than just displaying the rendering information. Behind the legend extra functionality is exposed through context menus. In the Silverlight desktop application I wrote some of this functionality was added to the Silverlight API Legend. This extra functionality was done through extending the Silverlight API legend control with extra methods and attached in the XAML through commands. The Microsoft Silverlight framework and MVVM makes this possible.

In the JavaScript API however, the legend control has only limited functionality making it very difficult to create extended functionality. To solve this issue, a custom legend control must be created. A solution could be creating the legend with the help of the Dojo library, but for a generic solution this is not a simple job. Another solution is using jQuery templates. The jQuery templates is an extension created by Microsoft and added to the community. The interesting aspect is the use of html templates to define how a control is shown using all the power of CSS and a build-in processing syntax. There was an interesting session at ESRI in 2011 explaining this technique of building a custom legend control. To have a flexible solution, the template is saved on the server in a file that is downloaded and added to the legend region. The initial template I used has the following contents.

<li>

<input type="checkbox" style="float:left" id="${$item.getCheckboxID()}" checked="${$item.getChecked()}" />
      <h3 class="agsLegendOpen" style="margin:0 0 0 25px;padding:0;" >${title}</h3>
     {{if serviceType == 4}}
       {{if renderer.type=="simple"}}
          {{if renderer.symbol.type=='esriPMS'}}
            <div style="display:table; margin:10px 5px;" >
              <img style="padding-right:10px;
              float:left;
              display:inline-block;
              vertical-align:middle;"
              src="data:${renderer.symbol.contentType};base64,${renderer.symbol.imageData}"/>
            </div>
          {{else renderer.symbol.type=='esriSFS'}}
             {{if renderer.symbol.color == null}}
                  <div style="display:table-cell;
                    vertical-align:middle;
                    width:20px;
                    height:20px;
                    background-color:rgba(151,219,242,255);
                    border:${$item.getBorder(renderer.symbol.outline)};">
                  </div>
                {{else}}
                  <div style="display:table-cell;
                    vertical-align:middle;
                    width:20px;
                    height:20px;
                    background-color:${$item.getColor(renderer.symbol.color)};
                    border:${$item.getBorder(renderer.symbol.outline)};">
                  </div>
             {{/if}}
          {{else renderer.symbol.type=='esriSMS'}}
            {{if renderer.symbol.style=="esriSMSCircle"}}
            {{/if}}
          {{/if}}
        {{else renderer.type=='uniqueValue'}}
          <ul>
          {{each renderer.uniqueValueInfos}}
                  {{if $value.symbol.type=='esriPMS'}}
                          <div style="display:table;margin:5px 5px;">
                          <img src="data:${$value.symbol.contentType};base64,${$value.symbol.imageData}" style="vertical-align:middle;"/>
                          <span style="padding:0px 5px 0px 0px;display:table-cell;vertical-align:middle;">${$value.label}</span>
                          </div>
                  {{else $value.symbol.type=='esriSFS'}}
                          <li style="display:table; margin:5px 5px;" >
                                  <div style="display:table-cell;vertical-align:middle;width:20px;height:20px;background:${$item.getColor($value.symbol.color)};border:${$item.getBorder($value.symbol.outline)};" ></div>
                                  <span style="padding:0px 5px 0px 5px;display:table-cell;vertical-align:middle;">${$value.label}</span>
                          </li>
                  {{else $value.symbol.type=='esriSLS'}}
                    <li style="display:table;" >
                      <div style="margin:8px 5px -15px 5px;
                        width:20px;
                        height:${$value.symbol.width}px;
                        background:${$item.getColor($value.symbol.color)};">
                      </div>

<span style="padding:0px 5px 0px 5px;

                        display:table-cell;
                        vertical-align:middle;">
                        ${$value.label}
                      </span>
                    </li>
                  {{/if}}
          {{/each}}
        </ul>
       {{/if}}
     {{/if}}
</li>
<div style="clear:both"/>

As you can see, there are conditional statements and loop statements. To finalize this approach I encapsulate the template class into a custom jQuery plugin. All these classes makes part of the legend module.

2.     Legend in action

To handle this approach of program logic, I have to retrieve extra information of the ArcGis server using the REST API. This extra information is retrieved through the legend module and not during the map initialization process. Doing so we can loosely couple the map module from the legend module, allowing this module to handle all data needed for the legend. The communication between the map module and the legend module is done through our class eventAggregator that will inform the legend module when the map is initialized (loaded). During the initialization method of the legend module a callback functions is hooked to the map loaded event as you can see in the code below.

var legendModule = (function () {

    var divLegend;

    var layersCount;

    var layersTotal

    function legendBuild(eventName, eventData, tagData) {

…
       }
    return {
        initLegend: function (divElement) {
            this.divLegend = divElement;
            iEventAggregator.subscribe("mapLoaded", legendBuild, divElement);
        }
    }

Because the retrieving of all the legend information coming from the REST services is asynchronous, I use a simple counter to know when the last information is retrieved and all the legend information is available to be applied in the template. The code below shows how the build of the legend is started after the last legend has been processed. We simply called the custom legend jQuery plug-in

function buildLegend() {

        if (layersCount == layersTotal) {

            var legend = $("#legendRegion").agsLegend({ });

To activate the templates, this can be done through this method in the jQuery plug-in.

$.fn.agsLegend = function (options) {

        opts = $.extend({}, $.fn.agsLegend.defaults, options);

        if (opts.autoLoadTemplates) {

            getTemplate();

        return this.each(function () {

                $this = $(this);

                $this.delegate("input[type='checkbox']", "click", checkLayerVisibility);

                $this.delegate("h3","mouseup",rightClick);

                if (opts.isCollapsible) { makeCollapsible(this); }

}

Upload of the template from the server is done by this code through a AJAX call.

function getTemplate() {

        $.ajax({

            url: opts.templateFileURL,

            success: opts.onTemplateLoaded || handleTemplateResponse

});

To apply the template, you can do this by this function below. You simply insert the template into a script section of the head section. Using the tmpl method of the jquery template plug-in the data is inserted into the template.

    function handleTemplateResponse(data) {

        script = document.createElement("script");

        script.style.display = "none";

        script.type = "text/x-jquery-tmpl";

        script.id = opts.templateDOMId;

        script.text = data;

        $('head').append(script);

        $("#"+opts.templateDOMId).tmpl(iGisOperation.GetLayersLegendInfos(),

                    getColor: getColor,

                    getBorder: getBorder,

                    getChecked: getChecked,

                    getCheckboxID: getCheckboxID

                }).appendTo($this);

Some methods are needed to format the values in the template.The final result of all this, is a legend that looks like this.

The legend build here is a first simple implementation. I will show later how we can enhance the look and feel of the legend by adding concept as grouping using more advanced rendering support. All legend information will be maintained in the gisOperation class so that other modules can benefit from this data.

In the coming weeks I will add a toolbar to the application to allow different GIS operations on the map as zooming and selecting.

ARCGIS JavaScript API – CREATION OF AN APPLICATION FRAMEWORK – PART I.

2012-03-07T08:03:00.001-08:00

1. Architecture

In previous documents I explained how you can encapsulate the ArcGis Silverlight API’s into a component library to simplify the creation of application based on some high level functionality. At the same time there was also a strict separation between GUI and the functionality of tools and commands. In JavaScript I will outline how we can use the same patterns to create a more high level JavaScript component library and also make code free HTML pages.

The exercise I will do is the same as with the Silverlight application, namely I will produce a small general ArcGis Desktop Editor based on some of the functionality of ArcGis Desktop 10. To make the application ready for the future, a HTML5 environment is used. The configuration file is the same XML file as used in the Silverlight application.

The migration of the Silverlight components and classed consist of the following jobs to be done:

· Migrate the GIS services into a JavaScript class (function) implementing all methods that are defined in the interfaces. Because there is almost one to one relation between the ArcGis Silverlight API functionality and the ArcGis JavaScript API functionality, the migration path is relatively trivial, the latter is mainly because the two API’s are based on the REST services of ArcGis Server.

· Configuration of the application is based on the same XML configuration file of the Silverlight Application. The only difference is that I use a WCF service to convert the XML file into a JSON object. This is a very simple WCF service and can also be easy written into other languages as JAVA. You could also use a JSON file that is transferred to the client.

· In Silverlight I use a framework PRISM and a pattern MVVM that separates GUI and business logic and also implements IoC (inversion of control) and DI (dependency injection). MVVM is built into Silverlight, PRISM is an additional library. In JavaScript we can use MVVM through a library KNOCKOUTJS. The library will mainly be used to handle dependency properties (text and events) on the HTML pages. By stripping of the code from HTML pages, it will be a lot easier to use the same pages in other devices like mobiles. I hope later to illustrate this using some specific JavaScript libraries that will help us to achieve this. I will not use IoC and DI because we do not have the concept of modules as in Silverlight, and that it is also in JavaScript to make the GIS libraries global over the different modules. However some patterns found in PRISM will be implemented in JavaScript.

· In tise exercise, the different parts that makes up a solution will be implemented as module libraries. Examples are the map module, legend module and different toolbar modules. As in the Silverlight solution, the modules must be independent from each other, no reference is made to each other. A PRISM pattern will be used to communicate between the different modules.

· Mandatory JavaScript libraries used are jquery, DOJO and KNOCKOUTJS

· Use of CCS3 can be used to format the application. Because web design is not the focus of these series of documents, little attention will be done to the CSS formatting.

2. Application development structure

The application architecture consists of different JavaScript library organized in different folders as outlined below :

Gis gisCommonTasks.js

                                       gisEditing.js
                                       gisGeoProcessing.js
                                       gisOperation.js

Helper dataMapping.js

eventAggregator.js

Modules layerSelectionModule.js

                                       legendModule.js
                                       mapModule.js
                                       toolbarEditModule.js
                                       toolbarSimpleModule.js

ViewModels               mainViewModel.js

The GIS libraries corresponds to what I did in Silverlight. The main function is to encapsulate the ArcGis JavaScript API into more usable high level methods. Doing so, less experienced ArcGis developers can step into the GIS development team. The GIS libraries use the JavaScript pattern ‘enclosure’ to expose only the methods, similar to using interfaces in the Silverlight C# implementation of the GIS classes. By using this pattern it becomes more simple to migrate the Silverlight libraries I developed .

The Helper libraries are support libraries for GIS and modules. ‘dataMapping’ contains classes we need in the application.

Module libraries consists of an important part of the application. Because de ArcGis components must be created in JavaScript through DOJO, the main job will be the building of these visual components. Some hooks on events will be needed as we cannot use the view model to bind to these components. The only module that is needed, is the map module, all other modules are optional.

ViewModels consist of the view model needed for the HTML page. A big part of the view model will be interfacing with the different GIS services. Because there is no specific data handling, no models are defined. All interactions with the REST services happens through the GIS services as its nature is generic.

3. The application template

As previous explained, a lot of JavaScript libraries are needed at the startup of the page. Below you see an overview of the current JavaScript libraries used.

_{<script
type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>}

_{<script
type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>}

_{<script
type="text/javascript"
src="scripts/knockout-2.0.0.js"></script>}
_{<script
type="text/javascript"
src="scripts/Helper/dataMapping.js"></script>}
_{<script
type="text/javascript"
src="scripts/Helper/eventAggregator.js"></script>}
_{<script
type="text/javascript"
src="scripts/Gis/gisOperation.js"></script>}
_{<script
type="text/javascript"
src="scripts/Modules/legendModule.js"></script>}
_{<script
type="text/javascript"
src="scripts/Modules/mapModule.js"></script>}
_{<script
type="text/javascript" src="scripts/globalVars.js"></script>}
_{<script
type="text/javascript"
src="scripts/ViewModels/mainViewModel.js"></script>}
_{<script
type="text/javascript"
src="scripts/startup.js"></script>}

This comes after we loaded the Dojo and ArcGis API libraries.

The body has a very simple layout. The layout consist of Dojo containers organized in a classical way with a header, two columns consisting of a tab container and a simple container, followed by a footer.

The header will host different toolbars as it was the case in the Silverlight application. The tab container will host our legend, search layers and a query information. The right column will host the map. The footer will display different informations.

<body class="claro">
         <div id="appLayout" class="arcgisLayout"
                          data-dojo-type="dijit.layout.BorderContainer"
                          data-dojo-props="design: 'headline'">
                 <div class="edgePanel" id="header"
                          data-dojo-type="dijit.layout.ContentPane"
                          data-dojo-props="region: 'top'">
                          <div data-bind="html: applicationIcon"></div>
                          <label data-bind="text: applicationName"></label>
                 </div>
                 <div id="tocPanel" class="leftPane"
                          data-dojo-type="dijit.layout.TabContainer"
                          data-dojo-props="region: 'left', tabPosition: 'bottom'">
                          <div data-dojo-type="dijit.layout.ContentPane" title="Legend">
                                   <div id="legendRegion">
                                   </div>
                          </div>
                          <div data-dojo-type="dijit.layout.ContentPane" title="Select">
                                   <div id="selectRegion">
                                   </div>
                          </div>
                          <div data-dojo-type="dijit.layout.ContentPane" title="Query">
                                   <div id="queryRegion">
                                   </div>
                          </div>
                 </div>
                 <div id="mapPanel" class="edgePanel"
                          data-dojo-type="dijit.layout.ContentPane"
                          data-dojo-props="region: 'center'">
                          <div id="mapRegion">
                          </div>
                 </div>
                 <div class="edgePanel" id="footer"
                          data-dojo-type="dijit.layout.ContentPane"
                          data-dojo-props="region: 'bottom'">bottom
                 </div>
         </div>
</body>

The result will look something like this:

4. Startup

In Silverlight we use a bootstrapper class to start the application. The bootstrapper is part of PRISM an is responsible for the setup of the MEF container that will be used for IoC and DI. In JavaScript I will use a startup JavaScript that will kick off the application.

The first step in the startup is getting the configuration from the server. This will be done through an AJAX call to the server that hosts a WCF service. At return we will have the full configuration into a JSON object ‘configuration’. This is a global variable, making it easy to access configuration data through the whole project.

Next we need to create the GIS objects. Because the GIS objects are global, we can use them within modules and view models. Only the methods are exposed in the GIS objects.

Finally, the module objects are created and initialized. The map module must be initialized as last, this is because of the publish / subscribe pattern of the eventAggregator class used to communicate when the map has been loaded and the other modules.

5. Configuration

Through the ready function of jquery the configuration is retrieved doing an Ajax call. In the success method we get the configuration as a JSON object. Once this is done, we can start building the map dynamically from the layers defined in the configuration XML file. If modules have no dependency of the map, you can place them everywhere after the configuration assignment otherwise you must initialize and subscribe to the map loaded event before the map initialization.

$(document).ready(

         function () {

             try {

                 GetConfiguration();

             } catch (exception) { }

);

function GetConfiguration() {

    Type = "GET";

    Url = GetConfigURl;

    DataType = "jsonp";

    Data = 'application=' + applic;

    ProcessData = false;

    method = "GetAConfig";

    CallService();

function ServiceSucceeded(result) {

    if (DataType == "jsonp") {

        if (method == "GetAConfig") {

            configuration = result;

            // Create the Gis classes, making its interface available

            iGisOperation = new gisOperation();

            // Initialise the modules, start the map module as last

            legendModule = new legendModule();

            legendModule.initLegend("legendRegion");

            mapModule = new mapModule();

            // Configuration done, start creation of the map

            mapModule.initMap("mapRegion", mapLayersInitialized);

        else {

            resultObject = result.GetEmployeeResult;

            var string = result.Name + " \n " + result.Address;

            alert(string);

6. EventAggregator

To communicate between modules, without having a tight connection between the modules, I implemented some functionality in JavaScript similar to the EventAggregator class of PRISM in Silverlight.

This class uses two methods to realize the communication:

· Subscribe – This method will add to a list of event handlers a callback function that will be called when an event is triggered. Optional a tag can be saved at the same moment for use in the callback function. The event that is triggered, is defined by a name and can return data to the callback function.

· Publish - When this method executes, all callback functions related to the event are fired and optional data is passed.

This simple implementation makes it easier to communicate between modules, without the publisher having knowledge of who needed attention when the event is fired . A good example is the map module, which publish the map loaded event. Modules as the legend will only start populating the labels after the map has been loaded and all information about the layers is available. The same is true for the view model which can only update information related to the configuration or GIS information.

De eventAggregator class implementation :

var eventAggregator = (function () {

    var events = new Array();

    return {

        subscribe: function (eventName, eventAction, tagData) {

            events.push(new eventElement(eventName, eventAction, tagData));

},

        publish: function (eventName, eventData) {

            for (var i = 0; i < events.length; i++) {

                if (eventName == events[i].eventName) {

                    if (events[i].eventAction != null)

                        events[i].eventAction(eventName, eventData, events[i].tagData);

});

7. GIS Services

Migrating the Silverlight C# application towards a JavaScript application consist mostly of migrating the C# code of the services into JavaScript code. Lucky, because the Silverlight API and JavaScript API are an encapsulation of the REST services provided by the ArcGis server, much of the code is similar. In some cases data has to be retrieved in a different way with JavaScript API than in the case of the Silverlight API. Sometimes LINQ is used to replace loops in C#, resulting in more code to be written in JavaScript.

Let’s see how I convert the C# GisOperations.cs class in to a JavaScript Class.

First create a JavaScript class based on the ‘enclosure’ pattern like this :

var gisOperation = (function () {

         // Private variables

         var map;

         var ArcGISServiceType = { Unknown: 0, Cached: 1, Dynamic: 2, Image: 3, Feature: 4 };

         var geometryService = null;

         var layerCount = 0;

         var layerInitialised = 0;

         var mapInitialiseComplete = null;

         var baseMapLayerInfos;

         var featureLayerInfos;

         var layersData;

         var graphicsLayerSelect = null;

         var isFeatureLayersLoaded = false;

         var selectSymbol;

         var flInfo;

         return {

                 setMap: function (mapControl) {

},

                 getMap: function () {

},

                 initialize: function (geometryServiceUrl) {

},

                 getSelectLayer: function () {

},

                 getFeatureLayer: function (layerName) {

},

…

});

As you can see, it is very simple to use the interfaces I use in Silverlight C#, and put them into a JavaScript class. Only the functions in the return are exposed in the application, similar as interfaces are used in the Silverlight Application.

In Silverlight we had an interface IGisOperations that’s looks like

public interface IGisOperations

       {
             Map GetMap();
             void Initialize(string geometryServiceUrl);
             GraphicsLayer GetRoutingLayer();
             GraphicsLayer GetSelectLayer();
             FeatureLayer GetFeatureLayer(string layerName);
             void SetLayers(Map mapControl);
             void AddNewDynamicLayer(string layerUrl, bool visible, string layerName, ArcGISServiceType serviceType);
             void AddNewDynamicLayer(string layerUrl, bool visible, string layerName, int index, ArcGISServiceType serviceType);
             void AddNewFeatureLayer(string layerUrl, bool visible, string layerName);
             void RemoveDynamicLayer(string layerName);
             void AttributeQueryTask_Async(string whereValue, string whereField, string layerName, string fieldType, ESRI.ArcGIS.Client.Geometry.Geometry geometry);
             void AttributeQueryTask_ExecuteCompleted(object sender, QueryEventArgs args);
             void AttributeQueryTask_Failed(object sender, TaskFailedEventArgs args);
             void SetFinishedEvent(ResultsHandler finishedOperation);
             void SetCompleteDrawEvent(DrawCompleteHandeler drawComplete);
             void ResetCompleteDrawEvent(DrawCompleteHandeler drawComplete);
             void SetMapInitialiseCompleteEvent(InitialiseCompleteHandler mapInitialiseComplete);
             MarkerSymbol GetSelectionMarkerSymbol();
             LineSymbol GetSelectionLineSymbol();
             FillSymbol GetSelectionFillSymbol();
             void SetSelectionMarkerSymbol(MarkerSymbol symbol);
             void SetSelectionLineSymbol(LineSymbol symbol);
             void SetSelectionFillSymbol(FillSymbol symbol);
             void SetDrawMode(DrawMode drawMode);
             void SetDrawModeContinuous(DrawMode drawMode);
             void DisableDrawMode();
             void EnableDrawMode();
             void MapZoom(string action, Geometry geometry);
             FeatureLayerInfo GetFeatureLayerInfo(int id);
             FeatureLayerInfo GetFeatureLayerInfo(string layerName);
             GeometryService GetGeometryService();
             void CenterAndZoom(MapPoint point, double resolution);
             IList<LayerData> GetLayersData();
             double Resolution2Scale(double resolution);
             double Scale2Resolution(double scale);
             IList<FeatureLayerInfo> GetFeatureLayerInfos();
             IList<BaseMapLayerInfo> GetBaseMapLayerInfos();
             void CreateGeometry(DrawMode drawMode, DrawCompleteHandeler drawComplete);
             void SetMapSize(int offset);
             void SetTabControlVisible(bool tabControlVisible);
             int GetLayerTocSelected();
             void SetLayerTocSelected(int layerIndex);
             void ZoomTo(Geometry geometry);
             Envelope GetNormalizedExtent(Envelope extent);
       }

All this methods with the corresponding parameters must be added in the return of the gisOperation function. Functions used before the return statement are private functions in the class like the variables.

8. Migration of adding a dynamic layer

In this section you can see how the functionality for adding a dynamic layer in Silverlight / C# is transformed into JavaScript. The method that we will implement is AddNewDynamicLayer.

In Silverlight/C# we have :

public void AddNewDynamicLayer(string layerUrl, bool visible, string layerName, ArcGISServiceType serviceType)

{
      if (serviceType == ArcGISServiceType.Dynamic)
      {
            ArcGISDynamicMapServiceLayer mapLayer = new ArcGISDynamicMapServiceLayer()
            {
                  Url = layerUrl,
                  DisableClientCaching = true,
                  ID = layerName,
                  Visible = visible
            };
            mapLayer.Initialized += InitializedDynamicLayer;
            mapLayer.InitializationFailed += layer_InitializationFailed;
            mapControl.Layers.Add(mapLayer);

}

else if (serviceType == ArcGISServiceType.Image)

{

            ArcGISTiledMapServiceLayer mapLayer = new ArcGISTiledMapServiceLayer()
            {
                  Url = layerUrl,
                  ID = layerName,
                  Visible = visible
            };
            mapLayer.Initialized += InitializedDynamicLayer;
            mapLayer.InitializationFailed += layer_InitializationFailed;
            mapControl.Layers.Add(mapLayer);
      }
}

In JavaScript we the code looks like that:

function _addNewDynamicLayer(layerUrl, visible, layerName, serviceType) {

         var mapLayer;

         if (serviceType == ArcGISServiceType.Dynamic) {

                  mapLayer = new esri.layers.ArcGISDynamicMapServiceLayer(layerUrl,

                  {        id: layerName,

                          visible: visible

});

                 dojo.connect(mapLayer, "onLoad", function (layer) {

                          layer_Initialized(layer);

});

                 dojo.connect(mapLayer, "onError", function (err) {

                          layer_InitializationFailed(err);

});

         else if (serviceType == ArcGISServiceType.Image) {

                 mapLayer = new esri.layers.ArcGISTiledMapServiceLayer(layerUrl,

                 {        id: layerName,

                          visible: visible

});

                 dojo.connect(mapLayer, "onLoad", function (layer) {

                          layer_Initialized(layer);

});

                 dojo.connect(mapLayer, "onError", function (err) {

                          layer_InitializationFailed(err);

});

As you can see in the example above, there is not much difference between the C# and JavaScript development. As we see later, the major difference of the API’s is in the widgets.

In the next document I will go deeper how after the map is loaded, all information about layers is available and can be used to build a custom legend. As in the Silverlight application, once the map is loaded, all information needed for building a custom or editing widgets is available and can be exposed through our view model.

BUILD JAVASCRIPT APPLICATION FRAMEWORK WITH ARCGIS API

2012-02-17T05:28:00.002-08:00

In previous documents I explained how you can create a powerful framework in Silverlight to make life easier of doing GIS development around the ArcGis Silverlight API. The framework was achieved by using some key technologies from Microsoft.

Last week I attended the Microsoft TechDays 2012 at Brussels, and it becomes clear that with the introduction of Windows 8 the future is uncertain about using plug-ins (Silverlight and Flex) in web browsers. In Windows 8 Microsoft makes the development with JavaScript with HTML5 a first class development platform that will be covered in Visual Studio 2011.

In the Silverlight framework I used the MVVM pattern together with PRISM to use the patterns IoC and DI. The Silverlight application was a somewhat light ArcGis desktop based on dynamically adding and editing layers based on new technology introduced in the version 10. I also illustrated how you can add some advanced editing functionality in an easy way.

In the JavaScript application that I introduce, I will start from the same application functionality allowing dynamic map to be used and feature editing on an ArcGis server.

The requirement for this applications will be as followed:

· Configuration: The basic configuration file used is exactly the same as for the Silverlight application. That means I will use an XML file that will contain all the configuration data for the application. However a REST service will be used to expose the contents as a JSON object to the client. Secondary XML configuration files will also be exposed as JSON objects. I use WCF services in .NET that will take into account this transformations. You can do the same in JAVA or create the JSON files yourself before using them at the client side.

· Libraries: To make programming in JavaScript a lot easier, some important libraries will be used to help the conversion of some Silverlight patterns into JavaScript:

o JQuery: This important library will be used as support for handling of the DOM and some utility functions.

o KnockoutJS: This library will handle the MVVM. Because a lot of the Silverlight application is based on the use of MVVM, this will make the transitions of the viewmodels a lot easier.

· GIS classes: The core of the Silverlight application consists of services that are implemented using Silverlight Classes and encapsulate the ArcGis Silverlight API functionality. The ArcGis JavaScript API consist of the same functionality of the Silverlight API because a lot of functionality is based on the REST services at the ArcGis Server. Converting these services in JavaScript classes is a lot simplified because of the almost one to one relation in functionality. The GIS classes will be split into different JavaScript files.

· Components: In the JavaScript application, the notion of separate components is not used. The whole application will be implemented on one HTML page. The viewmodels are implemented in separate JavaScript files. There will be communication mechanism used between different viewmodels. In Silverlight I used the eventaggregator class of the Prism framework, in JavaScript I create an equivalent of this functionality (publish and subscribe of events).

· Bootstrapper: An important role was attributed to the bootstrapper class of the PRISM framework. In JavaScript I will use the ready function of JQuery to achieve this pattern. The bootstrapper will be responsible for the creation of all GIS and non-GIS objects used in the application by using some kind of IoC.

· HTML page: The idea is to have a page with very little JavaScript code embedded on the page as I did with the Silverlight application. Doing so, you can change the look and feel without having to change something in the viewmodel code or in the GIS classes. By limiting the creative construction of a HTML page, it is much easier supporting all kind of web enabled devices.

The application architecture should look similar to the next picture.

The viewmodel JavaScript code should contain no references to the ArcGis JavaScript API. By doing so, less experienced ArcGis developers could program with this concept. The GIS libraries hides the more complex functionality of the asynchronous processing and presents the results in a more workable way to the viewmodel.

This is the road book for the development of a JavaScript implementation of a simple ArcGis Desktop application for viewing an editing of GIS data. In the next document I will show you the creation of the map with a legend using the above architecture.

SIMPLE EDIT COMMANDS AND TOOLS - PART VII

2012-01-17T12:41:00.000-08:00

Introduction

With the release of ArcGis Server 10, ESRI Inc. introduced a new service that can be activated for a map service : the feature service. This new service makes it a lot easier to do web editing over the internet. Through the ESRI Silverlight API you can now perform easy editing, and together with the ‘Geometry service’ you can create some of the editing operations found in the ArcGis Desktop application. In the next sections I will illustrate how you can create your own editing widgets, replacing the fixed edit widgets delivered by the ArcGis Silverlight API. In the sample code you will see the use of resources to make the application Multilanguage. In a later blog I will explain how you can use the Multilanguage functionality of Silverlight in cooperation with the MVVM pattern to make XAML and your C# code Multilanguage ready.

If you want to see how the application looks, you can find an example at the URL :

http://www.jt-software.be/webmap/webmaptestpage.html

Editor control

When creating your own editor commands and tools, you will need the editor control found in the ArcGis JavaScript API. When looking at the API of this control, you will see that it contains the major CRUD methods needed for doing web editing. In this blog I explain the edit tools available in the Editor class.

To use the editor class of the ArcGis Silverlight API I created a specific ‘GisEditing’ service that will encapsulate all the edit operations needed. Because the editor control is needed to perform feature editing, it will instantiated in this custom class. The ViewModel involved in editing will not need creating the editor control. As with the other GIS services, an interface will be used to access editor functionality. The interface is available in the ViewModel through dependency injection.

GisEditing class

In this library, all editing functionality of our application will be implemented. This class is a singleton and is created in the boots trapper. In the constructor we will instantiated the editor class. I add also a link to the GisOperation class to be able to have access to the map and the geometry services.

/// <summary>

/// Use IGisOperation interface to access the GisOperation service.

/// </summary>

/// <param name="gisOperations"></param>

public GisEditing(IGisOperations gisOperations, IMessageBoxCustom messageBoxCustom)

         editorTool = new Editor();

         this.gisOperations = gisOperations;

         this.messageBoxCustom = messageBoxCustom;

Through this class, we don’t need to add an editor component to the XAML files, all will be directed from this GisEditor service.

The functions that I implemented can be found in the interface below.

namespace Silverlight.Helper.Interfaces

  public delegate void GeometryServiceCompleteHandler(object sender, GraphicsEventArgs args);

  public delegate void MultipleResultOperationComplete(IList<Graphic> results);

  public delegate void SingleResultOperationComplete(Geometry result);

  public delegate void EditOperationComplete(int status,string message);

  public interface IGisEditing

  Editor GetEditorTool();

  ObservableCollection<SymbolMarkerInfo> GetMarkerInfo(string layerId);

  IList<EditLayerData> GetEditLayers();

  ObservableCollection<TemplateData> GetTemplates(string layerId);

  void Initialize();

  void StartEditOperation(string operation, EditOperationComplete editOperationComplete);

  void EndEditOperation(int status, string message);

  void Intersect(IList<Graphic> targetGraphics, Geometry intersectGeometry);

  void CutOperation(IList<Graphic> polygons, Polyline polyline,

    MultipleResultOperationComplete cutOperationComplete);

  void CreateConvexHull(IList<Graphic> pointList,

    SingleResultOperationComplete singleResultOperationComplete);

  bool SplitPolygon(string layerName, MultipleResultOperationComplete cutOperationComplete);

  void SnapPolygons(string layerName, MultipleResultOperationComplete multipleResultOperationComplete);

  void UnionGeometries(IList<Graphic> geometries);

  void SaveAll();

Most of these methods are an encapsulation of geometry services, hiding the asynchronous operation needed to execute the tool

Simple CRUD operation

To create a simple create / update or delete operation with the MVVM model you can do the following in XAML and ViewModel :

XAML

<Button  Style="{StaticResource ActionButton}" Name="btnAddGeometry" Command="{Binding AddCommand}"

         CommandParameter="{Binding AddGeometryParameter}" >

  <Image Source="/Silverlight.UI.Esri.JTToolbarEditGeneral;component/Images/EditingPolygonTool32.png">

    <ToolTipService.ToolTip>                                                            <TextBox Text="{Binding Source={StaticResource LocalizedStrings},Path=AddGeometryTip}"

                  BorderThickness="0" />

    </ToolTipService.ToolTip>

  </Image>

</Button>

A command is used to start the adding of a feature.

ViewModel

private ICommand _addCommand;

private ICommand _addCommand;

private ICommand _clearSelectionCommand;

private ICommand _deleteSelectedCommand;

private ICommand _editVerticesCommand;

public ICommand AddCommand

get

                  return _addCommand;

set

                 _addCommand = value;

                 this.RaisePropertyChanged(() => this.AddCommand);

/// <summary>

/// Add a new feature to a feature layer

/// </summary>

/// <param name="arg"></param>

protected virtual void OnAddCommandClicked(object arg)

try

    if (gisEditing.GetEditorTool() != null)

      if (currentEditLayer == null)

        ShowMessagebox.Raise(new Notification

            Content = Silverlight.Helper.Resources.Helper.NoEditLayerSelected,

            Title = Silverlight.Helper.Resources.Helper.Warning

         }, confirmation =>

             // No action required

});

         return;

       IList<string> layerIDs = new List<string>();

       layerIDs.Add(currentEditLayer.LayerName);

       gisEditing.GetEditorTool().LayerIDs = layerIDs;

       gisEditing.GetEditorTool().Freehand = false;

       Silverlight.Helper.DataMapping.FeatureLayerInfo layerInfo =

         gisOperations.GetFeatureLayerInfo(currentEditLayer.LayerName);

       if (layerInfo.FeatureTemplates != null && layerInfo.FeatureTemplates.Count > 0)

         gisEditing.GetEditorTool().Add.Execute(

            layerInfo.FeatureTemplates.First(l => l.Key.Length > 0).Value);

       else

         if (layerInfo.FeatureTypes != null && layerInfo.FeatureTypes.Count > 0)

            FeatureType featureType =

              layerInfo.FeatureTypes.FirstOrDefault(l => l.Key != null).Value as FeatureType;                                        gisEditing.GetEditorTool().Add.Execute(featureType.Id);

         else

           gisEditing.GetEditorTool().Add.Execute(null);

       EditOperationStarted("Add");

   catch (Exception ex)

     ShowErrorMessagebox.Raise(new Notification

         Content = String.Format("OnAddCommandClicked-{0}[{1}]", ex.Message, ex.StackTrace),

         Title = "System error"

});

protected virtual bool CanAddCommandClicked(object arg)

         return IsMapLoaded && !editActionActive;

The add command is built around the add method of the editor class. If you want to create a ViewModel that has a more clear separation from the editor class, you could move this functionality towards the GisEditing service with the necessary parameters.

I found the documentation of ArcGis Silverlight API not always complete when it comes to detail the use of parameters.

In the add command I support subtypes and feature templates. Experimenting on the parameters of the execute method of the add method of the editor class gave me the above result. I hope in the future that ESRI will document in more detail the parameters.

The other simple edit commands (delete, vertices’ update) are derived from the editor class and has very simple implementations.

Field subtypes and feature templates

If you want to use field subtypes creating a list of symbols where a user can choose, you must retrieve these symbols from the ArcGis Server feature service. The best way for doing this is when a feature class is initialized during the built of the map. In our GisOperation class each feature class initialized event is handled and at that moment all necessary information for a feature is available and can be saved in the GisOperation object. So in this way subtypes and feature templates are retrieved for later use. But also at the same time the name of the object id field and geometry type of the feature class are retrieved.

void InitializedFtLayer(object sender, EventArgs e)

try

         FeatureLayer layer = (FeatureLayer)sender;

         featureLayerInfos.Add(new Helper.DataMapping.FeatureLayerInfo()

                 FeatureTemplates = layer.LayerInfo.Templates,

                 Url = layer.Url,

                 Name = layer.LayerInfo.Name,

                 Id = layer.ID,

                 FeatureTypes = layer.LayerInfo.FeatureTypes,

                 LayerGeometryType = layer.LayerInfo.GeometryType,

                 ObjectId = layer.LayerInfo.ObjectIdField

});

         layersData.Add(new LayerData()

                 ID = layer.LayerInfo.Id,

                 LayerName = layer.LayerInfo.Name,

                 Selection = true

});

         VerifyInitialisationMap();

  catch (Exception ex)

  messageBoxCustom.Show(String.Format("InitializedFtLayer-{0}/{1}", sender, ex.Message), GisTexts.SevereError, MessageBoxCustomEnum.MessageBoxButtonCustom.Ok);

The XAML code for creating an edit widget looks like this:

<ListBox Name="ListPoints"

                     helper:Selected.Command="{Binding SymbolSelected}"

                     ItemsSource="{Binding SymbolMarkers}"

                     Visibility="{Binding SubTypeVisibility}">

   <ListBox.ItemsPanel>

      <ItemsPanelTemplate>

         <StackPanel Orientation="Horizontal"/>

      </ItemsPanelTemplate>

   </ListBox.ItemsPanel>

   <ListBox.ItemTemplate>

      <DataTemplate>

         <StackPanel Background="LightGray" Orientation="Horizontal">

            <esriToolkitPrimitives:SymbolDisplay Width="25"

                               Height="25"

                               VerticalAlignment="Center"

                               Symbol="{Binding SymbolMarker}">

                <ToolTipService.ToolTip>

                    <TextBox BorderThickness="0" Text="{Binding Name}"/>

                </ToolTipService.ToolTip>

            </esriToolkitPrimitives:SymbolDisplay>

         </StackPanel>

      </DataTemplate>

   </ListBox.ItemTemplate>

</ListBox>

The item source used in the ViewModel for displaying the symbols is :

// Feature Types

private ObservableCollection<SymbolMarkerInfo> _symbolMarkers;

public ObservableCollection<SymbolMarkerInfo> SymbolMarkers

get

         return _symbolMarkers;

set

         _symbolMarkers = value;

         this.RaisePropertyChanged(() => this.SymbolMarkers);

Where the SymbolMarkerInfo has the following structure:

/// <summary>

/// Symbol information class

/// </summary>

public class SymbolMarkerInfo

         public Symbol SymbolMarker { get; set; }

         public string Name { get; set; }

         public object ObjectFeatureType { get; set; }

         public string LayerId { get; set; }

Because feature templates have no symbol defined, in the edit toolbar I implemented templates using a combo box.

<ComboBox Name="templates"

          Width="250"

          Height="25"

          Margin="10,0,0,0"

          DisplayMemberPath="Description"

          IsEnabled="True"

          ItemsSource="{Binding EditTemplates}"

          Visibility="{Binding TemplateVisibility}">

    <i:Interaction.Triggers>

        <i:EventTrigger EventName="SelectionChanged">

           <i:InvokeCommandAction Command="{Binding TemplateSelectCommand}" CommandParameter="{Binding SelectedItem, ElementName=templates, Mode=OneWay}" />

        </i:EventTrigger>

     </i:Interaction.Triggers>

</ComboBox>

See the use of the invoke command to trigger the selection. This is the standard way of MVVM for link combo box events to the ViewModel.

private ObservableCollection<TemplateData> _editTemplates = new ObservableCollection<TemplateData>();

public ObservableCollection<TemplateData> EditTemplates

get

         return _editTemplates;

set

         _editTemplates = value;

With TemplateData defined as

public class TemplateData

         public string Description { get; set; }

         public FeatureTemplate EditTemplate { get; set; }

         public string LayerId { get; set; }

STUDY : USING the ArcGis API for Microsoft Silverlight/WPF to create an ArcGis Database edit solution.

2011-12-04T13:37:00.000-08:00

This is my test for how you can use the ArcGis Silverlight API to create powerful web editing applications. In the past blogs I already outlined how I started this project. The most important before starting of a Silverlight project of this size is to make clear how the architecture of the project should look.

To have an architecture that is modular to keeps track of the rapid changes in the ArcGis Silverlight API’s, you must use a framework and / or pattern that can help you in this challenge.

To be able to write good Silverlight application, Microsoft developed the pattern MVVM (Model View ViewModel). Without this pattern you will soon create complex software modules that will be difficult to maintain. The software development cost is only a fraction of the TCO (Total Cost of Ownership). To reduce the TCO it is important that the software product is highly maintainable.

To help the developer using MVVM, different frameworks has been publically available. One important available framework is PRISM 4.0 developed by Microsoft. The framework simplify the use of the pattern MVVM in Silverlight applications. In my Silverlight application I used PRISM 4.0 with MEF as the container library.

PRISM 4.0 has support for different container libraries like MEF and UNITY. Other container libraries can also be used with PRISM 4.0. I decided to use MEF because I like the implementation based on the use of class and method attributes through the use of reflection.

The use of container libraries serves for the implementation of IOC (inversion of control) and dependency injection. The latter is used to expose different GIS functions in the ViewModel classes.

The architecture of the application has the following layout :

Application architecture

Module Architecture

To maintain a flexible application, the configuration is maintained in XML files as done by the Silverlight ArcGis viewer. To create a general approach of the map editor, all configurations are contained in a folder. The folder serves as parameter for starting the map editor. The URL for starting the application is:

http://<<website>>/<virtual map>>/WebmapTestPage.aspx?Application=Demo

http://<<website>>/<virtual map>>/WebmapTestPage.html?Application=Demo

In the current version I only support the languages English and Dutch.

Some limited testing can be done with the Url below:

http://www.jt-software.be/webmap/webmaptestpage.html

You can download the whole demo application through the link below. To be able to run the application you need to deploy the contents towards a virtual map of your Internet Information Server. The application can run on a local PC with the Microsoft Internet Information Server.

Deploy alse the crossdomain and clientaccesspolicy files on the Internet Information Server.

http://www.jt-software.be/webmap/WebMapDemo.zip

For the user manual I restrict myself to a quick guide covering most of the exposed tools and menus. Below is the link to the pdf file.

http://www.jt-software.be/webmap/Quickguide.pdf

MAKE ARCGIS SILVERLIGHT CONTROLS MVVM ENABLED - PART VI

2011-09-03T06:55:00.000-07:00

Introduction

Before tackling the more advanced ArcGis Silverlight controls as the Editor, I will first look how we can enhance the ArcGis Silverlight controls so that they fit into the MVVM pattern.

Sometimes You will encounter ArcGis controls or classes with properties that cannot be set from within your ViewModel. When you try it, you will probably end up with a null pointer exception. The reason of this is that in order to have properties bound to you ViewModel, these properties must be inherit from the dependency property object. This is not always the case for the properties of an ArcGis Silverlight class, probably due technical reasons. The next article explains how we can enhance the class so that we can set non dependency properties from within the ViewModel pattern.

The dependency issue

If you have a property to be set, but you cannot do it from the ViewModel, you can add a new property to the class that inherit from the dependency object. You can use this property to set the value for a property that is not inherit from the dependency object. Let’s take an example of how we can do this by using the MeasureAction class from the ArcGis Sivlerlight API.

When you look at the examples from ESRI, you can use the measure action as

     <i:Interaction.Triggers>
       <i:EventTrigger EventName="Click">
         <esri:MeasureAction
           AreaUnit="SquareMiles"
           DisplayTotals="{Binding Totals}"
           DistanceUnit="{Binding Distance}"
           MapUnits="Meters"
           MeasureMode="Polygon"
           FillSymbol="{StaticResource DefaultFillSymbol}"
           TargetName="MyMap"/>
        </i:EventTrigger>
     </i:Interaction.Triggers>
</Button>

When we try to replace the property TargetName by the following expression :

TargetName = “{Binding MyMap}”

You will get a null pointer exception, and that is because the property ‘TargetName’ is different implemented as the other properties. You can see this in the ESRI documentation shown next.

You can see that properties as AreaUnit, MapUnits inherit from the dependency objet. When you look at the TargetName, this is inherited from an other object, in the case of the MeasureAction it is a Microsoft defined property. ESRI could solved it by implementing the map control by an own property inherit from the dependency object as this is the case for the Legend control. But for some technical reason this was not done.

To solve the problem, simply add a new property ‘MapMeasure’ to the MeasureAction that will contain the map control.

The map dependency property

Create a new class in the project with the MeasureAction that implement the dependency project. The code below show how this can be done.

using System.Windows;

using ESRI.ArcGIS.Client;
using ESRI.ArcGIS.Client.Actions;

namespace MyToolbar.Helper
{
  public class MapContent
  {
    public static readonly DependencyProperty MapMeasureProperty =
  DependencyProperty.RegisterAttached("MapMeasure", typeof(Map),
  typeof(MapContent), new PropertyMetadata(OnMapMeasureChanged));

    public static Map GetMapMeasure(DependencyObject depObject)
    {
      return (Map)depObject.GetValue(MapMeasureProperty);
    }

public static void SetMapMeasure(DependencyObject depObject, Map value)

    {
      depObject.SetValue(MapMeasureProperty, value);
    }

private static void OnMapMeasureChanged(DependencyObject depObject,

      DependencyPropertyChangedEventArgs e)
    {
      MeasureAction measureAction = depObject as MeasureAction;
      measureAction.TargetObject = GetMapMeasure(measureAction);
    }
  }
}

This is a typical implementation of a dependency property. The only code that you has to add is the code that is in the method On<property>Changed. In the case of the MeasureAction, the TargetObject is initialized with the map control. You can now in all modules activate the measure tool.

In the real world the XAML code will now look like

<i:Interaction.Triggers>

    <i:EventTrigger EventName="Click"
            <esri:MeasureAction
                                    AreaUnit="SquareMeters"
                                    DisplayTotals="True"
                                    DistanceUnit="Meters"
                                    MapUnits="Meters"
                                    MeasureMode="Polygon"
                                    FillSymbol="{StaticResource DefaultFillSymbol}"
                                    mapMeasure:MapContent.MapMeasure="{Binding MapControl}"
                        />
            </i:EventTrigger>
</i:Interaction.Triggers>

As you can see, now we have made the MeasureAction ViewModel enabled.

When at a given time the ArcGis Silverlight API add a new property ‘Map’ to the MeasureAction, you only has to change the property in the XAML, no code change is required. This is another example of the power of using the MVVM pattern.

LOGIN PATTERN USING MVVM AND PRISM IN COMBINATION WITH MAPSERVICES PART V

2011-08-22T10:50:00.000-07:00

Introduction

Before tackling more complex functionality as web editing and “GeoProcessing”, we will introduce a login pattern for use with ArcGis Silverlight API.

When using the Silverlight API of ESRI with maps, having a consistent display with a login screen on a single web page can be painful. As long as the user has not been authenticated you can not display the map content. However due to the asynchronous operation of the map control, once you set the layer contents, the map becomes displayed. In the solution outlined hereafter we will respect the asynchronous character of Silverlight.

In PRISM you can create a dependencies of modules. The idea is to create a login module that will be depended from for all other modules.

Authentication Framework

The authentication framework consists of two components:

Authentication module.
Authentication service.

The authentication module will handle all the input related to the login procedure. The module will use the authentication interface to save and mark the successful login.

The authentication service is the engine of the login procedure. The interface is responsible for the authentication and as service will also provide functionality to other modules when information is needed about function authorizations for the user logged in.

In case no authentication is required, you can use a dummy module that sets the authentication to true. Doing this, you can later, by simple modifying the module catalog creating a login procedure without modifying your code.

Another situation is when the application runs in a trusted network environment. In this case you can use the user credentials as in an authentication module. This can be done through a WCF service that retrieves the user credentials through the instruction:

WindowsIdentity winIdent = (WindowsIdentity)HttpContext.Current.User.Identity;

Next we will treat in more detail the case of doing authentication through a login form.

Authentication Module

The authentication Module will consists of the visual aspects of the login procedure. To restrict the user interface, the login view consists of a ChildWindow initiated from the authentication module class.

The authentication module is responsible for sending a message to other modules of the successful login of a user. In case of not successful the startup op de Silverlight application is aborted. By using the HTTPRequest you could close the web page.

The login view consists of a username and password as input, a textbox that contains error messages and buttons to login or cancel the login process.

To close the ChildWindow, we must put code behind the two buttons. For the login button this means:

private void OKButton_Click(object sender, RoutedEventArgs e){
if (authenticationViewModel.LogonCheck())
this.DialogResult = true;
}

The window is created in the module class.

public void Initialize()
{
logonEvent =
   eventAggregator.GetEvent<CompositePresentationEvent<LogonData>>();
ChildWindow childView =
   container.GetExportedValue<AuthenticationChild>();
   childView.Closed += ChildView_Closed;
   childView.Show();
}

Control is handed back to the module class as soon as the login view is closed. To signal the success of the login, the module uses the EventAggregator service to publish a successful login. The modules that depend on the login process can then take action to complete there process. This is the case with the map module, which will wait to initialize the layer property until the login has been completed successful.

private void ChildView_Closed(object sender, EventArgs e)
{
if (authentication.IsLoggedOn())
{
   LogonData logonData = new LogonData() { LoggedOn = true };
   logonEvent.Publish(logonData);
}
}

On the other module site (map module) you need to handle the successful login event by subscribing to the event:

if (eventAggregator != null)
eventAggregator.GetEvent<CompositePresentationEvent<LogonData>> ().Subscribe(OnLogonChanged);

public void OnLogonChanged(LogonData logonData)
{
configuration.SetFinishedEvent(new EventHandler
(ConfigurationInitialised));
configuration.GetConfiguration();
}

This was initially done in the module constructor when no login was required.

Authentication Service

This must be the engine behind the authentication process. By creating an authentication service, every module has access to information proper at the user logged in. As with other services, the functionality is exposed by means of an interface that was injected in the different module classes or view models that need authentication data. Typical information that will we maintained by this service is:

UserName and user detail information (full name, email, …).
Groups belonging to.
User credentials (Create, Read, Update and Delete for certain data).

The bootstrapper creates the authentication service and makes it available through the container:

private Authentication authentication = new Authentication();

this.Container.ComposeExportedValue<IAuthentication>(this.authentication);

The interface IAuthentication could be similar than the one showed below, and should be created in a common Silverlight project:

public interface IAuthentication {
Boolean IsLoggedOn();
string UserName();
Boolean IsActionAllowed(string operation);
Boolean IsActionAllowed(CRUD crud, string table);
Boolean LogOn(string username, string password);
}

Data concerning the user logged in, are maintained in the authentication class and make accessible through the authentication interface:

private string userName;
private bool loggedOn = false;

public bool IsLoggedOn()
{
return loggedOn;
}

public bool LogOn(string username, string password)
{
boolean logOnOK = false;
…
// Validate through web service
return logOnOK;
}

public string UserName()
{
return userName;
}

By using dependency injection, view model and other classes have access to authorization data. Typical in the Authentication class, the LogOn method will access a web service for doing the authentication of the user. Because this is an asynchronous process, callback functionality must be foreseen to let the user wait until validation has been completed. This is a similar pattern we used a couple of times in the Gis operations.

In case no authentication process is required, you can create a dummy module that publishes a successful login.

CREATION OF COMMANDS AND TOOLS ADVANCED - PART IV

2011-08-10T11:03:00.000-07:00

Introduction

Before we will move to more specific GIS functionality as geoprocessing and feature editing, I will first introduce some more complex commands and tools. In the real world there is a much richer set of tools required. In this part we will add some more advanced tools.

The first tool I will illustrate is the use of an inspect tool. Clicking on the map, we want to display the information of the feature.

A second pattern I demonstrate is the use of the right click on the map to trigger some action. This pattern can be used to display a context menu or perform certain GIS action at the clicked location. This will illustrate the use of attached properties in combination with event triggers on the map control.

Inspect feature action

At the toolbar, we add a new button ‘Info’ that will start a drawing operation for a point. At the end of the drawing action we display a new window with the attribute information of the feature.

The main issue here is how we will initiate a new window displaying once the information is found. Using the MVVM pattern there is little information about this kind of design patterns. Using the rules of MVVM, you cannot create a child window from within the ViewModel because it is stated that the ViewModel must not having acknowledge about the view.

The solution I created was the use of a new service ‘DialogManager’ that will initiate a child window displaying the information required by our tool. Communication between de ViewModel and the dialog service happens through the EventAggregator service. Later I will illustrate another technique for calling a dialog window from a ViewModel.

First we create a MVVM command that will initiate the spatial query. At the clicked event, the drawing is initiated.

private void OnInfoCommandClicked(object arg)

{
currentCommand = "Info";
gisOperations.SetCompleteDrawEvent(DrawComplete);
gisOperations.SetDrawMode(DrawMode.Point);
}

When the drawing is complete, we start a spatial query in the same way we already executed an attribute query, but this time only geometry is passed to the GIS service. The return is a list of features.

// Info request (spatial query)

gisOperations.SetFinishedEvent(HandleResultQuery);
gisOperations.AttributeQueryTask_Async("", "", gisOperations.GetBaseMapUrl(), 9, "", args.Geometry);

After obtaining the result objects, the results are published to the dialog service for displaying.

FeatureSet results = e.Results;

if (e.Results.Features != null && e.Results.Features.Count > 0)
{
    List<SearchResult> searchResults = new List<SearchResult>();
    foreach (var item in results)
    {
      SearchResult searchResult = new SearchResult()
             { AttributeValues = item.Attributes,
              LayerName = "",
               Geometry = item.Geometry };
      searchResults.Add(searchResult);
     }
     resultEvent.Publish(searchResults);

Now the dialog service comes in action. During the creation of the DialogManager in the bootstrapper, the subscription has been activated during the constructor of the service.

public DialogManager()

{
this.MyEventAggregator = ServiceLocator.Current.GetInstance<IEventAggregator>();
  if (this.MyEventAggregator != null)
    this.MyEventAggregator.GetEvent<CompositePresentationEvent<List<SearchResult>>>()
    .Subscribe(ShowResultsDialog);
}

When the information arrives at the subscriber service, a new view is initiated for displaying the results. Doing this, the action in the ViewModel does not create directly another view and we can use a ViewModel concept for handling the display of the view.

public void ShowResultsDialog(System.Collections.Generic.List<SearchResult> results)

{
  ResultsView resultsView = new ResultsView();
  ResultsViewModel resultsViewModel = new ResultsViewModel();
  resultsViewModel.SetResults(results);
  resultsView.DataContext = resultsViewModel;
  resultsView.OverlayOpacity = 0;
  resultsView.Show();
}

The use of a dialog manager allows the handling of different requests for displaying information coming from a GIS operation using the MVVM pattern. For large projects a split of the dialog manager in different parts for dynamic loading could be useful.

This pattern is only useful when there is no post processing required at the OK button of the window dialog. In some later part I will illustrate how some additional processing can be done when the OK button of the dialog window is pressed.

Zoom at a location through right click.

I will now add a new functionality to the map control. Here I use MVVM attached properties to the map control and using an event trigger to capture the right mouse click event. To implement the right click I have to take into account the following situation:

· The map control does not have an event defined for the right click.

· Microsoft adds in Silverlight applications a standard right click event handler for allowing the configuration of the Silverlight.

The ESRI Silverlight API already delivers an out of the box behavior for the map control that keeps the extent when changing the size of the browser window.

To have our own right click event on the map control, we need to make our right click event triggered before Microsoft could take control for displaying the Silverlight configuration button.

To handle the right click I add a trigger to the map control. This trigger is acting on the right mouse click down event. This event happens before the right mouse click up event and occurs before the right mouse click up event which is handled by Microsoft for the configuration of the Silverlight plug-in on the desktop.

<i:Interaction.Triggers>

<i:EventTrigger EventName="MouseRightButtonDown" >
<maphelper:RightClickMenu Command="{Binding HandleRightClick}" CommandParameter=""/>
</i:EventTrigger>
</i:Interaction.Triggers>

First I create a MVVM command in the constructor of the ViewModel of the map control that will handle the processing for the right click event.

HandleRightClick = new DelegateCommand<object>(this.OnRightMouseClicked, this.CanRightMouseClicked);

In this command the final processing happens based on the location clicked. I then simply create an extent based on the point selected by adding an offset and perform a zoom operation.

private void OnRightMouseClicked(object arg)

{
  MapPoint point = arg as MapPoint;
  Envelope extent = new Envelope(point.X - 10000, point.Y - 10000, point.X + 10000, point.Y + 10000);
  gisOperations.ZoomTo(extent);
  return;
}

To finish the job, I implement a class derived from the TriggerAction class. When implementing the trigger action you need to override the following methods

Invoke
Onattached

I only use here the Invoke method. This method does the real work when the mouse right click is done.

In case of the map, I attached properties that contain the command and optional the command parameter and invoke parameter. In the example the parameters are not used.

public class RightClickMenu : TriggerAction<FrameworkElement>

{
  // Definition of dependency properties that could be usefull
  public static readonly DependencyProperty CommandParameterProperty =
    DependencyProperty.Register("CommandParameter", typeof(object), typeof(RightClickMenu), null);

public static readonly DependencyProperty CommandProperty =

    DependencyProperty.Register("Command", typeof(ICommand), typeof(RightClickMenu), null);

  public static readonly DependencyProperty InvokeParameterProperty = DependencyProperty.Register(
   "InvokeParameter", typeof(object), typeof(RightClickMenu), null);

The invoke method is implemented as follow:

protected override void Invoke(object parameter)

{
// Verify if it is a map
  MouseButtonEventArgs eventArgs = parameter as MouseButtonEventArgs;
  eventArgs.Handled = true;
  Map map = this.AssociatedObject as Map;
  if (map != null)
  {
    MapPoint mapPoint = map.ScreenToMap(eventArgs.GetPosition(map));
    ICommand command = this.ResolveCommand();
    if ((command != null) && command.CanExecute(this.CommandParameter))
   {
      command.Execute(mapPoint);
    }
  }
  return;
}

To eliminate the display of the Silverlight notice you must set the handling of the right mouse click event to ‘handled’. This stops the Microsoft handling of the right mouse up event.

eventArgs.Handled = true;

A more general approach was done here to retrieve the MVVM command linked to the right mouse click. This approach allows the triggering of a command defined on another control, ex a button. This logic can be found in the ResolveCommand method.

private ICommand ResolveCommand()

{
  ICommand command = null;
  if (this.Command != null)
  {
    return this.Command;
  }
  // In the case the command is not defined within the triggger and you need to activate it,
  // search is done for the context containing the command.
  var frameworkElement = this.AssociatedObject as FrameworkElement;
  if (frameworkElement != null)
  {
    object dataContext = frameworkElement.DataContext;
    if (dataContext != null)
    {
      PropertyInfo commandPropertyInfo = dataContext
         .GetType()
         .GetProperties(BindingFlags.Public | BindingFlags.Instance)
         .FirstOrDefault(
            p =>
            typeof(ICommand).IsAssignableFrom(p.PropertyType) &&
            string.Equals(p.Name, this.CommandName, StringComparison.Ordinal)
         );
      if (commandPropertyInfo != null)
      {
        command = (ICommand)commandPropertyInfo.GetValue(dataContext, null);
      }
    }
  }
  return command;
}

The above pattern can also be used to display a context menu instead of a direct action. Using the pattern of a dialog manager, you can display a menu with the needed action on the location clicked.

CREATION OF COMMANDS AND TOOLS - PART III

2011-08-02T11:27:00.000-07:00

Creation of a Toolbar

To be able to illustrate the handling of ArcGis commands and tools, we will start from a toolbar. We create a new module that contain our new toolbar. We create a new module ToolbarModule with some buttons, the module is created in the same way as the TocModule.

The new visual layout of the application will be:

Region 3 contains the toolbar, region 4 is a spare region that we will fill with a view when needed.

GIS SERVICE

To make the ArcGis plumbing simple, we create a GIS operation class that will handle all low-level ArcGis functionality. Doing this, in most cases we do not need a Model for accessing data.

Because it is defined as a service, all use of the service is done by means of a shared interface IGisOperations. To make it available for all projects, it is put in our common Helper projects. The service is available through dependency injection in the ViewModel.

The interface could looks like this:

public delegate void MyResultsHandler(object sender, ResultsEventArgs e);
public delegate void MyDrawCompleteHandeler(object sender,ESRI.ArcGIS.Client.DrawEventArgs args);
public interface IGisOperations
{
Map GetMa p();
string GetBaseMapUrl();
void SetMap(Map map,string baseMap);
void AttributeQueryTask_Async(string whereValue, string whereField, string url,
int layerID, string fieldType);
void AttributeQueryTask_ExecuteCompleted(object sender,
ESRI.ArcGIS.Client.Tasks.QueryEventArgs args);
void AttributeQueryTask_Failed(object sender, TaskFailedEventArgs args);
void SetFinishedEvent(MyResultsHandler finishedOperation);
void ResetFinishedEvent(MyResultsHandler finishedOperation);
void SetCompleteDrawEvent(MyDrawCompleteHandeler drawComplete);
void ResetCompleteDrawEvent(MyDrawCompleteHandeler drawComplete);
void ZoomTo(ESRI.ArcGIS.Client.Geometry.Geometry geometry);
MarkerSymbol GetSelectionMarkerSymbol();
LineSymbol GetSelectionLineSymbol();
FillSymbol GetSelectionFillSymbol();
void SetSelectionMarkerSymbol(MarkerSymbol symbol);
void SetSelectionLineSymbol(LineSymbol symbol);
void SetSelectionFillSymbol(FillSymbol symbol);
void SetDrawMode(DrawMode drawMode);
void MapZoom(string action, Geometry geometry);
}

Because all server Gis operations are asynchroon, you must always implement an event handling for the callback functionality.

All these methods have to be implemented in the class GisOperation. An instance of this class will be created in the bootstrapper. By means of the dependency injection, the interface will be made available to all classes that need some form of GIS processing. Almost always this will be done in the ViewModel of the modules.

In some cases I could be wise to split this class in different parts as not always all GIS functionality is required in an application. In this manner you could reduce the size of the xap file.

protected override void ConfigureContainer()
{
base.ConfigureContainer();
this.Container.ComposeExportedValue<IConfiguration>
   (this.configuration);
  this.Container.ComposeExportedValue<IGisOperations>
   (this.gisOperations);
this.Container.ComposeExportedValue<CompositionContainer>
   (this.Container);
}

As you can see, the GisOperation service works exactly as the configuration service.

CREATION OF A COMMAND

Use of ICommand

As for now there was little code behind the views. We must keep it like that, even when buttons and actions on these buttons must be handled. To make this possible, the MVVM architecture makes use of command classes that implement the ICommand interface.

To simplify the creation of commands, the PRISM framework adds a factory to simplify the creation of commands by means of the Delegate Command class.

The general structure of the creation of a command becomes:

ICommand MyCommand =
new DelegateCommand<object>(Execute, CanExecute);
The delegates has the signature:

void Execute(object arg)

bool CanExecute(object arg)

Some controls derived from ButtonBase like Button has a command as property, enabling the use of the Command property and CommandArgument directly in xaml.

<Button Margin="0,0,0,0" Name="btnQuery"
Command="{Binding QueryCommand}">
<Image Source ="../Resources/i_search.png" />
</Button>

So to make actions happen we simply bind the command property to a property of the ViewModel. Together with the creation of the commands in the constructor of the ModelView we can bind an action to a button without putting an event handling in the code behind of our view.

This result in the following code in the ViewModel:

private ICommand _queryCommand;
public ICommand QueryCommand
{
get { return _queryCommand; }
set
{
   _queryCommand = value;
   this.RaisePropertyChanged(() => this.QueryCommand);
}
}
private ICommand _zoomOutCommand;
public ICommand ZoomOutCommand
{
get { return _zoomOutCommand; }
set
{
   _zoomOutCommand = value;
   this.RaisePropertyChanged(() => this.ZoomOutCommand);
}
}
private ICommand _zoomInCommand;
public ICommand ZoomInCommand
{
get { return _zoomInCommand; }
set
{
_ zoomInCommand = value;
   this.RaisePropertyChanged(() => this.ZoomInCommand);
}
}
[ImportingConstructor]
public ToolbarViewModel(IRegionManager regionManager,CompositionContainer container,ILoggerFacade loggerFacade)
{
this.QueryCommand = new DelegateCommand<object>(
this.OnQueryCommandClicked, this.CanQueryCommandClicked);
this.ZoomInCommand = new DelegateCommand<object>(
   this.OnZoomInCommandClicked, this.CanZoomInCommandClicked);
this.ZoomOutCommand = new DelegateCommand<object>(
   this.OnZoomOutCommandClicked, this.CanZoomOutCommandClicked);
this._regionManager = regionManager;
this._container = container;
}

Create command with input form

Implement an attribute query.

Here we will illustrate the creation of a command that initiate an input form where we can enter some data. When the OK button is pressed, an attribute query is done using methods coming from the IGisOperations interface.

In our views folder we add a new UserControl ‘LocationInput’ that contains two textboxes:

Country and city

And two buttons:

Ok and Cancel.

This view is dynamically displayed in a reserved region using code below.

private void OnQueryCommandClicked(object arg)
{
IRegion region = _regionManager.Regions["Region4"];
var inputView = _container.GetExportedValue<LocationInput>();
region.Add(inputView, "LocationInputView");
region.Activate(inputView);
}

After we create the commands for the Ok and Cancel button, the processing can be put in the ViewModel.

As we already saw before with the configuration, doing GIS operation results in an asynchronously process. Therefore in our GisOperation class we added an event handler that has to be initialized by the calling method so control will be returned after the GIS operation is finished.

First step:

Set the callback when operation is finished.
Call the requested operation.

private void OnOKClicked(object arg)
{
string where = string.Empty;
if (this.Country.Length > 0)
   where = "COUNTRY='" + this.Country + "'";
if (this.City.Length > 0)
{
   if (where.Length > 0)
    where += " and ";
   where = "NAME='" + this.City + "'";
}
StartAttributeQuery(where, "", 9, "C");
}
private void StartAttributeQuery(string whereValue, string whereField,
int layerID, string fieldType)
{
gisOperations.SetFinishedEvent(new MyResultsHandler(HandleResultQuery));
gisOperations.AttributeQueryTask_Async(whereValue, whereField,
gisOperations.GetBaseMapUrl(), layerID, fieldType);
}

Second step:

Clear the callback handler setting.
Process the result.

private void HandleResultQuery(object sender, ResultsEventArgs e)
{
gisOperations.ResetFinishedEvent(new MyResultsHandler(HandleResultQuery));
if (e != null)
  {
   FeatureSet results = e.Results;
   if (e.Results.Features != null && e.Results.Features.Count > 0)
   {
     // Zoom to result
     gisOperations.ZoomTo(e.Results.Features[0].Geometry);
     // Display graphics
     GraphicsLayer graphicsLayer =
     gisOperations.GetMap().Layers["Selections"] as GraphicsLayer;
     graphicsLayer.ClearGraphics();
     foreach (Graphic feature in results.Features)
     {
       if (feature.Geometry.GetType() == typeof(MapPoint))
       {
         feature.Symbol =
         gisOperations.GetSelectionMarkerSymbol();
       }
       else if (feature.Geometry.GetType() ==
          typeof(ESRI.ArcGIS.Client.Geometry.Polyline))
       {
         feature.Symbol = gisOperations.GetSelectionLineSymbol();
       }
       else if (feature.Geometry.GetType() ==
         typeof(ESRI.ArcGIS.Client.Geometry.Polygon))
       {
         feature.Symbol = gisOperations.GetSelectionFillSymbol();
       }
       graphicsLayer.Graphics.Insert(0, feature);
    }
   }
}
}

To simplify the job of rendering, in the map view I defined a resource containing the different rendering symbols. When the map gets initialized, I add code so that the different symbols are saved in the GisOperation class and can be used later.

This initialization can be achieved with this code:

// Initialise symbols
_gisOperations.SetSelectionLineSymbol(
   mapView.LayoutRoot.Resources["SelectLineSymbol"] as LineSymbol);
_gisOperations.SetSelectionMarkerSymbol(
   mapView.LayoutRoot.Resources["SelectMarkerSymbol"] as MarkerSymbol);
_gisOperations.SetSelectionFillSymbol(
   mapView.LayoutRoot.Resources["SelectFillSymbol"] as FillSymbol

CREATION OF A TOOL

In our toolbar I add two buttons ‘zoom in’ and ‘zoom out’. These two buttons illustrate a typical ESRI tool. A tool consists of a draw action and at the end of the draw, a processing.

In our case we will draw a rectangle and at the end of the drawing we will take the requested zoom action.

As in the case of the query tool, the two buttons will use an implementation of ICommand to expose the action to the button.

The main difference with the query command is that we must activate the draw functionality once the button is pressed.

In out GIS service we will add the following methods defined in the interface that is exposed:
void SetCompleteDrawEvent(MyDrawCompleteHandeler drawComplete);void ResetCompleteDrawEvent(MyDrawCompleteHandeler drawComplete);
void SetDrawMode(DrawMode drawMode);

The first two will allow us to handle the end processing of a draw operation. The last method set the kind of draw operation that is required. In case of the zoom action this will be a rectangle.
Because the draw object is associated with the map, it is already initialized during the setting of the map object.

Setting the draw mode active, looks like that:

public void SetDrawMode(DrawMode drawMode){
if (mapDraw != null)
{
mapDraw.DrawMode = drawMode;
mapDraw.IsEnabled = (mapDraw.DrawMode != DrawMode.None);
mapDraw.DrawComplete += MapDrawSurface_DrawComplete;
}
}

When the drawing is complete, the action that is triggered will be responsible to call the handler provided by the calling tool. Here this is the eventhandler OnDrawComplete that has been set by the calling tool.

private void MapDrawSurface_DrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args)
{
mapDraw.DrawMode = DrawMode.None;
mapDraw.IsEnabled = false;
OnDrawComplete(args);
}

With this in place, all is now ready to start the drawing process by the tool. The actual action of the tool on the GIS must also be implemented in the GIS operation service. In our case this will be a zoom in and zoom out action on the map.

A possible implementation is highlighted below :
public void MapZoom(string action, ESRI.ArcGIS.Client.Geometry.Geometry geometry)
{
if (action.Equals("ZoomIn"))
{
    _mapView.ZoomTo(geometry as Envelope);
}
else if (action.Equals("ZoomOut"))
{
    Envelope currentExtent = _mapView.Extent;
    Envelope zoomBoxExtent = geometry as Envelope;
    MapPoint zoomBoxCenter = zoomBoxExtent.GetCenter();
    double whRatioCurrent = currentExtent.Width / currentExtent.Height;
    double whRatioZoomBox = zoomBoxExtent.Width / zoomBoxExtent.Height;
    Envelope newEnv = null;
    if (whRatioZoomBox > whRatioCurrent)
    // use width
    {
      double mapWidthPixels = _mapView.Width;
      double multiplier = currentExtent.Width / zoomBoxExtent.Width;
      double newWidthMapUnits = currentExtent.Width * multiplier;
      newEnv = new Envelope(
          new MapPoint(zoomBoxCenter.X - (newWidthMapUnits / 2), zoomBoxCenter.Y),
          new MapPoint(zoomBoxCenter.X + (newWidthMapUnits / 2), zoomBoxCenter.Y));
    }
    else
    // use height
    {
      double mapHeightPixels = _mapView.Height;
      double multiplier = currentExtent.Height / zoomBoxExtent.Height;
      double newHeightMapUnits = currentExtent.Height * multiplier;
      newEnv = new Envelope(
         new MapPoint(zoomBoxCenter.X, zoomBoxCenter.Y - (newHeightMapUnits / 2)),
         new MapPoint(zoomBoxCenter.X, zoomBoxCenter.Y + (newHeightMapUnits / 2)));
    }
    if (newEnv != null)
      _mapView.ZoomTo(newEnv);
   }
}
}

Now we can add the necessary code in the command event of the ViewModel to trigger the action and to do execute the GIS operation at the end of the drawing.

For the zoom in button when clicked, set the draw complete handler and start drawing a rectangle.
private void OnZoomInCommandClicked(object arg)
{
currentCommand = "ZoomIn";
gisOperations.SetCompleteDrawEvent(new MyDrawCompleteHandeler(DrawComplete));
gisOperations.SetDrawMode(DrawMode.Rectangle) ;
}

When the draw is complete, the following we do the job:

private void DrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args)
{
gisOperations.MapZoom(currentCommand, args.Geometry);
currentCommand = string.Empty;
}

As you can see, all the processing is done in the ViewModel, leaving a clean View with almost no code behind even if the view has a lot of functionality.

The ESRI map control will handle changes to the view by itself, there is no MVVM functionality involved in this.

USE OF PRISM IN ARCGIS SILVERLIGHT APPLICATIONS - PART II

2011-07-27T12:33:00.000-07:00

Adding Modules to the application

Part I - Starting a new application with PRISM

In this part, we will add a second module to the application. As example module we will add an ArcGis Legend component included in the TocModule. The main pattern we will have to solve is the synchronization between the MapModule and the TocModule concerning the ArcGis Map control. There is no longer the possibility to link different ArcGis controls within the same view with xaml properties. The map control and legend control are located in different xap files.

In Prism there are different ways to communicate between modules. The method I choose was the use of the EventAggregate method, it is based on the principle of publish and subscribe. In our case the MapModule will be the publisher and the TocModule the subscriber. In this way all modules that need a reference to the Map control can use this communication pattern. As the Map control is central to all ArcGis processing, a lot of modules will need to subscribe to map changes.

Using EventAggregate methods we will respect the loosely coupling of modules. The use of filtering is not used here. When needed, the subscriber can write a method to limit the number of published events to be processed.

Start a new project similar as we did for the MapModule and name it TocModule. Mark the application as host by the existing web configuration. Uncheck ‘Add a test page that references the application” as we do not need this to be a startup xap file.

Delete the app.xaml and mainpage.xaml and create a new view base on the Silverlight UserControl template. Add the ArcGis Legend control to the page as outlined below.

Create the module class TocModule implementing the IModule interface. Don’t forget to export the module to the MEF container by adding the needed attribute to the class.

Create a ViewModel class with at least the MapView defined that will expose the map control.

[Export(typeof(TocViewModel))]
public class TocViewModel : NotificationObject
{
    private Map _map;
    public Map MapView
   {
      get { return _map; }
      set
      {
         _map = value;
         this.RaisePropertyChanged(() => this.MapView);
      }
    }
}

To have the new module to be incorporated in the application we still need to do two things:

Add the module to our xaml catalog of modules.

<Modularity:ModuleInfoGroup InitializationMode="WhenAvailable">
<Modularity:ModuleInfo Ref="MyMap.xap" ModuleName="MapModule"/>
</Modularity:ModuleInfoGroup>
<Modularity:ModuleInfoGroup InitializationMode="WhenAvailable">
<Modularity:ModuleInfo Ref="MyToc.xap" ModuleName="TocModule"/>
</Modularity:ModuleInfoGroup>

Define a region where we will put this legend. Use the Initialize method from the IModule for the region registration.

public void Initialize()
{
this._regionManager.RegisterViewWithRegion("Region2", typeof(TocView));
}

This results is the layout below:

Region 2 contains the legend module.

First we will add to the MapModule the possibility to publish the changes in the Map control.

To be able to communicate information to a subscriber, we will add a new class to our common Helper project. This class will be used to exchange information to all subscribers.

Add a class MapInfo:

public class MapData
{
public string BaseMap { get; set; }
public Map MapView { get; set; }
}

With this class, you now can publish this information. In the ViewModel of the MapModule we will add a reference to the EventAggregator of the container.

[ImportingConstructor]
public MapViewModel(IEventAggregator eventAggregator, IGisOperations gisOperations)
{
mapDataEvent = eventAggregator.GetEvent<CompositePresentationEvent<MapData>>();
this._gisOperations = gisOperations;
}

You can call the publish method at different location. Here I opt to do it when the initial extent has been set after the map has been configured.

public void SetInitialExtent(double xMin, double yMin, double xMax, double yMax, int wkid)
{
   SpatialReference sref = new SpatialReference(wkid);
   _initialExtent = new Envelope(xMin, yMin, xMax, yMax);
   _initialExtent.SpatialReference = sref;
   this.wkid = wkid;
   this.RaisePropertyChanged(() => this.Layers);
   this.RaisePropertyChanged(() => this.InitialExtent);
   PublishMapChange();
}

private void PublishMapChange()
{
   MapData mapData = new MapData();
   mapData.MapView = mapView.map;
   _gisOperations.SetMap(mapView.map,baseMap);
   // Broadcast changes
   mapDataEvent.Publish(mapData);
}

Next we will need to handle the subscription to the changes exposed by means of the EventAggregator in the TocModule.

As with the MapModule, we will initialize the subscription in the ViewModel of the TocModule. The most logical place to do it is in the constructor of the module. Using dependency injection we will make the EventAggregator available.

[ImportingConstructor]public TocViewModel(IEventAggregator eventAggregator)
{
   if (eventAggregator != null)
   eventAggregator.GetEvent<CompositePresentationEvent<MapData>>().Subscribe
    (OnMapChanged);
}

The real processing has to done on the handling of the event when something has been changed in. This will be called every time a publishing of the above event happens.

public void OnMapChanged(MapData mapData)
{
if (mapData != null)
this.MapView = mapData.MapView;
}

By setting a new value to MapView, a property changed event will occur modifying the map property of the legend control and forcing a refresh of the legend.

Often you will have more to do than simply set a property to set the map control. In the case of the legend control, it could be useful to collapse the legend except for one or several layers or hide the graphic layer in the legend.

This is all we have to do create a communication between two modules that respects the loosely coupling between modules.

The same pattern can be used to create modules based on other ArcGis controls as scalebar, overview map or in case you create your own custom controls.