‘Bing’ oh! – ArcGIS, Flex, WMS and Bing

Last night I was struggling to overlay a set of WMS layers on top of Bing Maps and was driven to the point of frustration. The layers simply did not overlay. It always took me to a point on the sea near Africa which meant that the Coordinate Systems did not match. It takes you to the center of the earth (Latitude: 0.oo, Longitude:0.00) if you have layers in different SRS. Could not find any solution in the blogs as well as the ArcGIS Flex API resource center. Maybe because it is a pretty new feature released a few months back in API Version 1.2.

After some research found out that Bing Maps serves their tiles using EPSG 102113 whereas the other services are in EPSG 4326 which is the standard. EPSG 102113 is the same as EPSG 900913 used by Google Map tiles.

So to overlay, you will have to reproject your layers in EPSG 4326 to EPSG 102113. This is how you do it in Flex API.

In your Extent definition:
<esri:SpatialReference wkid="102113"/>

In your Query and GeoProcessor definitions, add
outSpatialReference="{new SpatialReference(102113)}"

The WMS looked like this:
<rmsi:WMSMapServiceLayer
id="mywmsLayer"
url="http://www.myserver.com/geoserver173/wms"
wmsLayer="TheWMSLayerName"
format="image/png"
transparentBG="true"
srs="EPSG:102113"/>

Everything set, I fired up the application only to find that the WMS layers failed!.

The WMS layers are being served from Geoserver and Geoserver does not seem to recognize EPSG 102113. So to get it working I tried changing the SRS of the query from 102113 to 900913. So the new code looked like this:
<rmsi:WMSMapServiceLayer
id="mywmsLayer"
url="http://www.myserver.com/geoserver173/wms"
wmsLayer="TheWMSLayerName"
format="image/png"
transparentBG="true"
srs="EPSG:900913"/>

Bing’o! All my WMS layers are now overlaid properly on Bing Maps.

I’ll have to try overlaying the ArcGIS Online Mapserver services on this now! That should be a cakewalk. But you never know.

Design distorted? Do a system check

Tester : It looks fine in all machines except one. Developer : It’s a UI issue. Tell the designer. Visual Designer : If it is working fine elsewhere, it is not a UI issue

Familiar conversation? Do not just dive into your CSS and HTML file. Investigate the following:

1. Check the browser version of the rouge machine. It may be running a version which does not understand standards (read IE 6!) and interpreting your CSS wrongly
2. Check the font-size settings of the machine. The default is 96 dpi. If the user changes it to 120 dpi, the layout will get distorted. This can be changed in the Display Settings of the operating system

Standards Versus Needs!

Should we be open to sacrifice standards for a feature? Many a times we are required to write some markup which does not follow standards or best-practices for a feature which is indespensible. For example, creating an application using the ArcGIS WebADF means we have to live with inline styles and inappropriate markups. If the project demands the use of ADF and there is no alternative, we have to make this sacrifice.

The important thing to see while making this decision is whether the feature is critical to the project and the end customer cannot live without it. Also, do we have an alternative? Can we have the same features using an AJAX toolkit, ArcGIS Javascript API and custom HTML?

I don’t think it is not viable – provided we can afford the additional effort.

HTML 5 – What’s in store?

According to the W3C, the XHTML 2 Working Group will be dissolved and focus will shift to HTML 5.

My concern is that HTML 5 should not have the inconsistencies of HTML 4.x which were solved by XHTML. I would want my code to be formatted properly – tags properly opened, closed and nested correctly.

I hope HTML5 maintains the strictness of XHTML.

HTML Image Maps using Quantum GIS

There cannot be anything easier than creating HTML Image Maps! No, I’m not kidding – provided you have the right kind of tools.

Background:

I needed to create an image map on the geographical map of India where each state can be clicked. The first thing that came to mind was using Geoserver and OpenLayers to create an interactive map but that idea was thrown out of the window. We needed a plain PNG image with clickable regions.

Creating that in Dreamweaver was out of question as it would require tracing the boundaries manually and considering the map of India, that would have taken ages.

Solution:

Quantum GIS to the rescue. Thanks to some good soul named rduivenvoorde who wrote a Python plug-in for QGIS for doing just that – creating HTML Image Maps.

Give it a GIS File (ESRI Shape or PostGIS Layer) and specify which attribute needs to be mapped. It not only creates an image map but also generates JavaScript functions for events like onClick and onMouseOver apart from the normal HREF. It generates an HTML file along with the corresponding image file.

India Map themed by State

HTML Image Map Plug-in Interface

Generated HTML and PNG file

The final HTML Image Map on the browser