Tag Archives: OpenLayers

OpenLayers or GoogleMap v3 for mobile web app ?

[2014 January] UPDATE : new Openlayers 3 beta 1 works quite well on iPad as well as Laeflet 0.7, check post here: https://blog.sumbera.com/2014/01/23/leaflet-0-7-vs-openlayers-3-beta-1-on-ios/

[2011 September] UPDATE : new Openlayers 2.11 works quite well on iPad/iPhone.


I have experimented with OpenLayers 2.9 using touch.js extension for capturing touch events from iPhone/iPad. Although stripped down version of OL is about 184KB, the performance is very bad. If you have iPhone/iPad check this experiment: http://www.sumbera.com/lab/iphone/katastr.htm (note it will not work from desktop browser)

OL team is working on v3 of OL to be more lighter, faster even for mobile devices, see here: http://trac.osgeo.org/openlayers/wiki/three  or here : http://openlayers.org/blog/2010/06/30/openlayers-3-on-github/

Meanwhile I have tested new GoogleMaps v3 how it works on iPhone/iPad. despite few problems (stability, problems with cached tiles or disconnected JavaScirpt  to load new tiles -iPad)  it works pretty well . Check yourself this page from your mobile touch device (iPhone.iPad,Android): http://www.ikatastr.cz/iKatastrM.htm

Conclusion : Google Maps v3 wins on mobile over the Openlayers 2.9


Overlay WMS on Google in OpenLayers

[Note: therea are related post: overlyaing tiled WMS over the new Google Map v3 https://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/ and overlying tiled WMS over the Silverlight Bing map https://blog.sumbera.com/2010/02/25/overlay-wms-on-google-in-silverlight-bing/ ]

Is it possible to display WMS (EPSG:4326) over the Google (EPSG:900913) in Openlayers ? Yes ! thanks to the great img ‘feature’ that enables you to shrink/expand your return image based on defined image size. That means that if your map view is rectangular or you request WMS as tiles (rectangular too) you get proper overlay of EPSG:4326 on EPSG:900913) . Example of various image sizes follows (these are actually WMS GetMap requests):

256 x 160

256 x 256

Here is the way how to implement it in OpenLayers – very simplified:

1. read this post http://docs.openlayers.org/library/spherical_mercator.html and create your Google map:

var options = {
projection: new OpenLayers.Projection(“EPSG:900913”),
displayProjection: new OpenLayers.Projection(“EPSG:4326”),
units: “m”,
numZoomLevels: 22,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34)
map = new OpenLayers.Map(‘map’, options);
            // create Google Mercator layers
            var ghyb = new OpenLayers.Layer.Google(
“Google Hybrid”,
{ type: G_HYBRID_MAP, ‘sphericalMercator’: true }

2. add your WMS layer

var gwms = new OpenLayers.Layer.TMS(“SLP”, “http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?map=/var/local/slp/krtinyWMS.map&”,
layers: ‘obrys,typologie,hm2003’,
type: ‘png’,
visibility: true,
getURL: get_wms_url,
format: “image/png”,
opacity: 1,
isBaseLayer: false,
deltaX: 0.0013,
deltaY: 0.00058

3. include support for reprojection before you include OpenLayers:

<script src =”proj4js/lib/proj4js-combined.js”>script>

4. handle WMS as TMS tiles as this:

function get_wms_url(bounds) {

// recalculate bounds from Google to WGS
var proj = new OpenLayers.Projection(“EPSG:4326”);
bounds.transform(map.getProjectionObject(), proj);

// this is not necessary for most servers display overlay correctly,
//but in my case the WMS  has been slightly shifted, so I had to correct this with this delta shift

bounds.left += this.deltaX;
bounds.right += this.deltaX;
bounds.top += this.deltaY;
bounds.bottom += this.deltaY;

            //construct WMS request

var url = this.url;
url += “&REQUEST=GetMap”;
url += “&SERVICE=WMS”;
url += “&VERSION=1.1.1”;
url += “&LAYERS=” + this.layers;
url += “&FORMAT=” + this.format;
url += “&SRS=” + “EPSG:4326”;
url += “&BBOX=” + bounds.toBBOX();
url += “&WIDTH=” + this.tileSize.w;
url += “&HEIGHT=” + this.tileSize.h;
return url;


That is, live example you can see here http://www.sumbera.com/lab/wms/getcapWGS.htm

or in MapShake here : http://www.mapshake.cz/mapfs.aspx?i=464

OLON Store In MapShake

This is very experimental. You can now experimentaly upload your OLON content under your account in MapShake. Try this:

1. Go to site http://www.sumbera.com/lab/wmsbinder/getcap.htm (sorry in CZ and just local projection JTSK) , just zoom to some place and click on thumbnails of WMS )

2. you may draw some vectors as well, go to OLON tab and export it, copy OLON content into clipborad (so far manual step).

3. Make sure you have active account in MapShake (www.mapshake.cz, again sorry it is in Czech , however it should be intuitive, if not let me know ..)

4. go to page http://www.mapshake.cz/createmap.aspx and post your OLON content from step 2 (from clipborad) into MapShake

5. your map will be stored in MapShake on success…

there are some known issues regarding zooming in MapShake reconstructed OLON map.


OLON in OpenLayers 2.7


Playing with OL context and OLON (OpenLayers Object Notation) that is based on JSON I have found that the sample provided on the OLON sandbox in OL repository doesn’t work well with vectors, in fact it ignores vectors at all.  Reading through the code it was quite easy to discover the problem – vector.js (layer) didn’t serialize  “features”, moreover during deserialization, features were nulled. To make OLON properly work in OL 2.7   for vectors, add following to the vector.js (lib\OpenLayers\Layer\Vector.js)

[line 197]
serializable: { 
"args": ["name"], 
"props": ["features"] 
[line 238]
if (!this.features) 
this.features = []; 

If you have pure 2.7 OL version installed, following link can help you to make difs against what is needed for OLON to work at 2.7: http://trac.openlayers.org/changeset/7323 …or you may download complete 2.7 version of OpenLayers with OLON extension from the MapBinder sample at http://www.sumbera.com/lab/wmsbinder/getcap.htm since OL there  is not compressed.

MapBinder – shake your maps

mapbinderI have put together preview for visually shaking maps where you don’t get just map layer names, but also preview of layers ! Somehow I couldn’t find any page on internet that would allow you to display layers from GetCapabilities WMS as image thumbnails. I’ve kept this idea for a long time and actually it started with yahoo pipes year ago – why not to visually display GetCapabilities as RSS feed with image thumbnails referenced as media type in the feed ? after little experimenting I realized that the value is in combination of position and WMS information, so the use case is “I am here on this place and hey WMS servers, give me all you know about this place…”

That lead me to the prototype of the site codenamed ‘MapBinder’ that allows you to visually combine WMS layers. Before you jump there, let me put here some credits to projects and people who enabled that – first it isOpenLayers 2.7 plus some sandboxed content that implemented GetCapabilities..I don’t remember exact location, then it is blog on tydlevidle.cz that implemented extension to read mapy.cz (mapy.cz is proprietary web based geoengine for maps like google but is using different projection). The last piece I found on some reference on geocaching.cz where someone pointed on conversion.js JavaScript by Tomas Ebenlendr. I forgot to mention that MapBinder is now synced with mapy.cz since it would be hard to overlay mapy.cz with JTSK-based projection, I have decided that reprojection will be done by user’s brain – having side by side maps – everyone can benefit from the content even they do not overlay.

Map Binder can be found on page http://www.sumbera.com/lab/wmsbinder/getcap.htm . Feel free to save it and examine it. I believe that from this point desktop and web readers of WMS layers will display thumbnails for better user experience :).