Accessing Cross Domain Data with YQL

Apr 102011

imageThe same origin policy prevents code from one domain accessing data from a different domain. For a mapping site requests for KML, GeoRSS, WFS services, and some WMS operations are all affected by this policy, and therefore require a range of workarounds, usually involving a proxy.

One solution is the ExtJS ScriptTagProxy that can be used to retrieve data from an external domain. However for this to work the server must return executable JavaScript code. For example to access an external WMS capabilities file you’d need to set up a special handler on your server to wrap the data in JavaScript before being added to your web page. This pattern is referred to as JSONP (JSON with padding).

YQL

Thanks to this Unwritten Guide to Yahoo Query Language it became apparent you can get Yahoo to automatically do this wrapping for you. Whilst using YQL is still technically a proxy, it’s a proxy you don’t have to worry about maintaining. Continue reading »

Will HTML5 Revolutionise Raster Web GIS?

Feb 182011

image Or perhaps that should be rephrased start browser-based raster GIS?

GIS data is split into two base types – vector data – geometric shapes, usually further split into points, lines, and polygons, and raster data – cell-based or “pixelated” data.

Graphics on the web mirror this divide. On the vector side SVG – scalable vector graphics, is used in many browsers to display geometric shapes. On the raster side “dumb” images come in many well known formats such as bitmaps, GIFs, PNGs, and JPEGs.

Vector geometries are easily manipulated after drawing as they have an abstract model to work with (the SVG, or KML document), which the browser can then convert to the DOM. As an example OpenLayers includes two vector renderers – one for SVG (see source code), one for VML (used by the ever-unique IE), and since the start of this year a new canvas renderer.

The canvas renderer is used to draw features to the new canvas element which is part of the HTML5 specification. This allows access to images loaded into the canvas through new programming interfaces such as the Canvas 2D Context API.  It is this part of the HTML5 specification that could change the way we work with raster data on the web.

Creating a Geodesic Circle in OpenLayers

Nov 272010

image

I recently asked a question on GIS Stack Exchange on how to create a  buffer around a point that took into account the curvature of the earth. OpenLayers has support for geodesic measurements, but not creating geodesic polygons. Drawing a standard polygon on a Mercator projected map can produce features with very different measurements from their intended “on the ground” equivalents.

Paul Ramsey pointed out that “the scale errors for Mercator are very high indeed (infinite, in fact, at the poles) increasing as you head north/south from the true scale latitude.” In fact drawing a circle (in Ireland – 53 degrees North) with a 10km geometric radius produced a circle with an on the ground radius of 6km.  A huge margin of error over a very short distance (see a previous post on the same subject).

After a useful answer from Dan Shoutis, it appeared most of the work to implement geodesic circles was already available in the OpenLayers API. The OpenLayers’ geodesic functions are based on code adapted from Chris Veness work at http://www.movable-type.co.uk/scripts/latlong-vincenty-direct.html.

The code to create a regular (non-geodesic) polygon can be seen in the OpenLayers source here. There is a function added after the class OpenLayers.Geometry.Polygon.createRegularPolygon that can be used to “create a regular polygon around a radius. Useful for creating circles and the like.”

This function only required a couple of changes – notably using Longitude and Latitude and rather than X and Ys, to produce geodesic polygons. If you are using the Mercator projection then transformations requires proj4js support. Continue reading »

We Know Where Your Browser Lives

May 282010

image Maybe I’m a little late in finding this, but if you have FireFox 3.5 or higher try clicking this link (you will have to agree to let your browser divulge your location to open the link). The JavaScript code run when clicking the link is as follows, and can also be pasted directly into your address bar:

javascript:navigator.geolocation.getCurrentPosition(
function(position){
window.location.href="http://maps.google.com/?ll="+position.coords.latitude+",
"+position.coords.longitude;});

I believe the navigator.geolocation object is also available in Safari, iPhone, and Chrome. The Mozilla documentation provides more details on its use. This StackOverflow question asks which browsers and devices it applies to, and this is set to grow if it becomes part of the browser standards – the W3C has an online draft Geolocation API Specification. They list the following use cases: Continue reading »

Watch out for OpenLayer Distances

Apr 292010

imageI had the fortune on my most recent project, a MapFish mapping system, of having someone else do some thorough testing. One thing that had escaped me, was both the measure tool and area tool were returning incorrect results.

The distance as-the-crow flies between Dublin and Cork is 219 kilometres (136.08 miles in old money) wheras my tool was returning 357km. Having never driven this route it didn’t set off any alarm bells. Its also not the sort of function I’d unit test, – one as its in JavaScript, and two as the sample code seemed to work “out-of the box.”

It turns out measurements are planar by default, as briefly referred to in the OpenLayers API docs (although not on the actual measure tools pages..), and there is a geodesic parameter. By default this is set to false, so in a Mercator projected map (so anything using Google, Bing, or OpenStreetMap background mapping) measurement tools will be wrong. Maybe something to check if you’ve created a system – I’ve been 6 months working with OpenLayers and somehow managed to miss this one. Continue reading »

Logging OpenLayers with Firebug

Apr 132010

imageI take it as given that anyone developing with Firefox and OpenLayers has Firebug installed. Firebug has a number of powerful tools that can make the previous nightmare of JavaScript debugging tolerable.

One feature I recently “discovered” are the logging options. It’s definitely a timesaver over my previous method of putting temporary alert(vals); throughout my code. As well as debugging the logging is very useful for automatically documenting formulae in JavaScript with worked examples that can then be pasted straight into the documentation.

An example of the logging capabilities can be seen on my sample OpenLayers page. If you already have Firebug installed you should be able to see the output similar to that below when the page loads.

image

Continue reading »

Minifying the Mapfish Client on Windows

Jan 282010

This page has 72 external Javascript scripts. Try combining them into one.

My YSlow Firefox plug-in was telling me that I had included too may JavaScript files, and that they should be combined into a single-file, and minified. The default setup of Mapfish has a single script include (mfbase\mapfish\MapFish.js), but this script  automatically loads around 40 further scripts.

I tried a couple of unsuccessful attempts at copying and pasting various Mapfish JS files into an online JavaScript compressor. However when referencing the minified file I kept getting “undefined” errors from various Mapfish plugins and OpenLayer objects.

Initially I was looking to download a ready-made “compiled” MapFish file, but was unable to find a version online. I have uploaded a zipped version so if you want the file without going through the steps below you can download a copy. Note that if you have made any modifications to the MapFish files then these will not be available, and there are no guarantees it will work.

There are instructions on creating a single-file Mapfish client build on the Mapfish site. This process uses JSBuild which is part of JSTools – “a collection of python scripts for packaging and efficiently serving javascript.”
Unfortunately these instructions require a Linux operating system, and I’m using Windows. I eventually managed to “translate” these into Windows commands, and have documented the steps below.

Continue reading »

Older Entries