‘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.

About these ads

About geoux

I have 12 years of experience in Information Technology with a focus on user-centric web user interfaces, Rich Internet Applications, Information Architecture and Requirement Analysis. I have been working on the GeoSpatial Domain since the last 9 years and is specially interested in Free & Open Source Software for Geospatial (FOSS4G). I am a Web 2.0, CSS, Web Standards and Open Source Software for GeoSpatial (OSGEO) Evangelist with special interest in designing/creating rich GIS applications with high levels of user interaction.

Posted on July 31, 2009, in Adobe Apollo, Flex, GIS, OGC, WMS and tagged , , , , , , . Bookmark the permalink. 10 Comments.

  1. Hi there, I was wondering where you got the WMSMapServiceLayer class from. I am pouring through the ArcGIS Flex 2.0 API and cant seem to find it. Is it a custom made class? I am also trying to pull a map layer from GeoServer and would be very interested to see where you got this class from.

    Thanks a lot.

    • Hi Peter,

      The WMSMapServiceLayer class extends the DynamicMapServiceLayer. The code is given below.

      You’ll need to change the package description though.


      package rmsi
      {
      import flash.display.Loader;
      import flash.events.Event;
      import flash.net.URLRequest;
      import com.esri.ags.layers.DynamicMapServiceLayer;

      public class WMSMapServiceLayer extends DynamicMapServiceLayer
      {

      internal const service:String = "WMS";
      internal const version:String = "1.1.1";
      internal const request:String = "GetMap";
      internal const scalar:Number = 1;

      public var format:String = "image/png";
      public var wmsLayer:String;
      public var serviceName:String;

      public var wmtVersion:String;
      public var styles:String = "";
      public var srs:String = "EPSG:4326";
      public var url:String;
      public var transparentBG:String;

      public function WMSMapServiceLayer()
      {
      super();
      this.setLoaded(true);
      this.url = url;
      this.wmsLayer = wmsLayer
      }
      override protected function loadMapImage(loader:Loader):void {

      // Get our pixel dimensions.
      var pxWidth:Number = Math.floor(this.map.width * scalar);
      var pxHeight:Number = Math.floor(this.map.height * scalar);

      // Build the GetMap request
      var index : int = url.indexOf( "?");
      var prefix : String = index == -1 ? "?" : "&";
      var _url:String = url;
      _url += prefix + "SERVICE="+service;
      _url += "&VERSION="+version;
      _url += "&REQUEST="+request;
      // For many WMS servers, SERVICENAME and others are unused, but some must be included or the server will reject our request. For example STYLES.
      if( serviceName != null) {
      _url += "&SERVICENAME="+serviceName;
      }
      if( wmtVersion != null) {
      _url += "&WMTVER="+wmtVersion;
      }
      if( wmsLayer != null) {
      _url += "&LAYERS="+wmsLayer;
      }
      _url += "&STYLES="+styles;
      if(transparentBG != null) {
      _url += "&TRANSPARENT="+transparentBG;
      }
      if( srs != null) {
      _url += "&SRS="+srs;
      }
      _url += "&FORMAT="+format;
      _url += "&WIDTH="+pxWidth;
      _url += "&HEIGHT="+pxHeight;
      _url += "&BBOX="+this.map.extent.xmin+","+this.map.extent.ymin+","+this.map.extent.xmax+","+this.map.extent.ymax;
      // We create a new URLRequest
      var wmsReq:URLRequest = new URLRequest(_url);
      // And finally pass it to our parent as a Loader. This URL will be then loaded into the map window.
      loader.load(wmsReq);
      }

      }
      }

      • Ah thanks you. I will have to use this as a sort of guide in trying to extend TiledMapServiceLayer to use WMS and GeoServer.

        Thanks!

      • You can look up the ArcGIS Flex API sample in the resources site. The WMS extension, as released by ESRI is there. Hope that helps.

        Farid

        Sent from my wireless device

  2. What template did you use in your blog ?

  3. Hello GeoUX!

    Thanks for the info, I need something like that: mapserver + flexviewer. And I think the ArcGIS FLEX API is a very good idea!!

    I write to you if I have a question!

    Grettings from Mexico

    • you are welcome to put forward any question you have. if you are looking at using flex with mapserver, i’d recommend you use openscales or modestmaps with wms instead of the arcgis flex api.

  4. Hello GeoUX,

    I’m very impressed of that ArcGIS FLEX API and looking for a way to use it without an ArcServer running in the background. It would be nice to combine it with an OpenSource-MapServer.
    Is this possible? As it seems to me you are running it together with GeoServer. How does this work?

    I think integrating a WMS-Layer published by GeoServer into the FLEX API shouldn’t be the problem. But how could I integrate statistical data stored e.g. in a Postgre database to build diagrams in the FLEX API and use them as a thematic overlay on top of the base-map-layer. All what I found so far, is that you need the data published in an ArcServer-Layer to use them building diagrams in the FLEX API.

    Thanks for any suggestions.
    Best regards, Dirk.

    • Hi Dirk

      Using the Flex API without ArcServer is very much possible. I am not using ArcServer in my app. No licenses were available so I used Geoserver to serve the layers as WMS. In place of GeoServer, you can use MapServer as well. Do note that in case of Mapserver to serve WMS in the same projection as Bing, you will need to edit the /usr/share/proj/epsg file. At the bottom of that file, add the line:

      <900913> +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0
      +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs
      < 102113> +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0
      +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs

      Coming to the 2nd question. Yes you can create thematics. There are two ways to do that though.

      Method 1:
      If you have relatively simple polygons, you can get the geometry from the PostGIS DB and render them in the client-side as a vector graphic layer.

      Method 2:
      Create themes in your MapServer/Geoserver using SLD rules. In your WMS query, add ‘style=theSLDfile’ parameter. The map server will generate the theme and send the themed map as an WMS image.

      Hope this answers your question.

      In case you need code snippets, you can Mail Me

  1. Pingback: 2010 in review « GeoUX

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 236 other followers

%d bloggers like this: