Category Archives: OpenLayers

Leaflet 0.7 vs. OpenLayers 3 beta 1 on iOS

leafol2 Made quick test of these 2 +1 HTML5 renderers on iOS running inside iOS app in the WebView, that is without Nitro acceleration. All run on iPad Air

Leaflet 0.7 : great , works fine, everywhere, doesn’t load while dragging map (on mobile only) , runs on Microsoft Surface too.

OpenLayers 3 beta 1 : runs fine too, loads map during dragging, seems like smaller framerate, can over zoom OSM, doesn’t run in Microsoft Surface well.

Seznam Mapy Api v 4 – proprietary renderer from Seznam , bad rendering on iOS, missing tiles, nice map sources

Videos and original web pages used: – screencasted by AirPlay – that is directly from iPad Air:

A. Leaflet 0.7 web: http://www.spatialreader.com/lab/ol3vsleaf/leafkatastr.html

B. OpenLayers 3 beta1

web: http://www.spatialreader.com/lab/ol3vsleaf/index.html

C. Mapy Api v 4.8

web: http://www.ikatastr.cz/iKatastrS.htm

OpenLayers or GoogleMap v3 for mobile web app ?

Leave a reply

[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

iKatastr / MapShake

Leave a reply

Poznamka 2018: tohle je archivni blog o tom, z ceho vznikl iKatastr – byl to vlastne derivat (vygenerovana mapa) jinak neuspesneho projektu MapShake.cz Screen Shot 2018-10-02 at 6.09.41 PM

iKatastr enables to view cadastral information in Czech Republic and view the owner of the parcel/building. I would like to mention here few technical details – iKatastr is actually less programmed but more configured. iKatastr on mobile uses Universal Map Format that defines the data sources for map composition and the query request when tapping on-screen. iKatastr in web do the same thing, it uses JSON definition to read full map composition. Moreover web version is linked with MapShake where the configuration of the map can be authored, verified, shared with friends and even you can generate your own iKatastr map as HTML page. the map you see on www.ikatastr.cz is the same that is stored on Mapshake here : http://www.mapshake.cz/549-iKatastr . To generate map similar to www.ikatastr.cz you need to press the <html> button in the lower left corner to get this page: http://www.mapshake.cz/mapjs.aspx?i=549 from where you can copy/paste the full JavaScript stack to regenerate map on your side. In the generated map you can also find this linked JavaScript : http://www.mapshake.cz/mi/549.js that is used by www.ikatastr.cz.

So the bottom line is : do not programme, rather generate / configure your maps !

Overlay WMS on Google in OpenLayers

19 Replies

[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:

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 += “&TRANSPARENT=TRUE”;
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 in MapShake

Leave a reply

It has been a while since I have created WMSBinder.( http://www.sumbera.com/lab/wmsbinder/getcap.htm) Finally I have updated and merged it with MapShake (create new map). So you can enjoy it inside the environment that can store your open layers maps and share them with your friends. MapShake now stores all map compositions as OLON. you can even import your own OLON (but not all formats has been tested). There are many other small updates as well (new toolbar for map, WMS catalog – only for Czech so far, preview of attached layers, base maps to start from etc..)

To get a preview you can check following maps:

Cloud Made: http://www.mapshake.cz/422-CloudMaded
Catalunia – very fast and cool maps in Spain http://www.mapshake.cz/421-Catalunia
Mapy CZ (Czech based maps) http://www.mapshake.cz/416-MapyCz_a_vektor
Prague cadaster and nocie maps http://www.mapshake.cz/mapfs.aspx?i=408

best thing to try it is to login into MapShake and try to compose your own map – well if you understand Czech language – definitely this would be easier for you;)

OLON for this map follows:

{
    “layers”: [
        {
            “name”: “OverView”,
            “url”: “/MapShake/j/img/blank.gif”,
            “params”: {
                “LAYERS”: “doprava”,
                “SERVICE”: “WMS”,
                “VERSION”: “1.1.1”,
                “REQUEST”: “GetMap”,
                “STYLES”: “”,
                “EXCEPTIONS”: “application/vnd.ogc.se_inimage”,
                “FORMAT”: “image/jpeg”,
                “SRS”: “epsg:102067”
            },
            “singleTile”: true,
            “tileSize”: {
                “w”: 1095,
                “h”: 525,
                “CLASS_NAME”: “OpenLayers.Size”
            },
            “buffer”: 2,
            “reproject”: false,
            “numZoomLevels”: 14,
            “maxResolution”: 705.5551745557614,
            “minResolution”: 0.035277758727788065,
            “maxExtent”: {
                “left”: -905000,
                “bottom”: -1230000,
                “right”: -400000,
                “top”: -900000,
                “CLASS_NAME”: “OpenLayers.Bounds”
            },
            “wrapDateLine”: false,
            “displayOutsideMaxExtent”: false,
            “isBaseLayer”: true,
            “displayInLayerSwitcher”: false,
            “visibility”: true,
            “opacity”: null,
            “alwaysInRange”: true,
            “CLASS_NAME”: “OpenLayers.Layer.WMS”
        },
        {
            “name”: “Základní mapa ČR “,
            “url”: “http://apps.esdi-humboldt.cz/data/tilecache/“,
            “layername”: “topoJTSK/2M”,
            “displayOutsideMaxExtent”: false,
            “singleTile”: false,
            “tileSize”: {
                “w”: 256,
                “h”: 256,
                “CLASS_NAME”: “OpenLayers.Size”
            },
            “buffer”: 0,
            “reproject”: false,
            “numZoomLevels”: 14,
            “maxResolution”: 705.5551745557614,
            “minResolution”: 0.035277758727788065,
            “maxExtent”: {
                “left”: -905000,
                “bottom”: -1230000,
                “right”: -400000,
                “top”: -900000,
                “CLASS_NAME”: “OpenLayers.Bounds”
            },
            “wrapDateLine”: false,
            “isBaseLayer”: false,
            “displayInLayerSwitcher”: true,
            “visibility”: true,
            “opacity”: null,
            “alwaysInRange”: true,
            “CLASS_NAME”: “OpenLayers.Layer.TileCache”
        },
        {
            “name”: “Základní mapa ČR detail “,
            “url”: “http://apps.esdi-humboldt.cz/cgi-bin/tilecache/tilecache.cgi“,
            “params”: {
                “LAYERS”: “ceniaTopoJTSK”,
                “FORMAT”: “image/png”,
                “SERVICE”: “WMS”,
                “VERSION”: “1.1.1”,
                “REQUEST”: “GetMap”,
                “STYLES”: “”,
                “EXCEPTIONS”: “application/vnd.ogc.se_inimage”,
                “SRS”: “epsg:102067”
            },
            “singleTile”: false,
            “tileSize”: {
                “w”: 256,
                “h”: 256,
                “CLASS_NAME”: “OpenLayers.Size”
            },
            “buffer”: 0,
            “reproject”: false,
            “numZoomLevels”: 14,
            “maxResolution”: 705.5551745557614,
            “minResolution”: 0.035277758727788065,
            “maxExtent”: {
                “left”: -905000,
                “bottom”: -1230000,
                “right”: -400000,
                “top”: -900000,
                “CLASS_NAME”: “OpenLayers.Bounds”
            },
            “wrapDateLine”: false,
            “displayOutsideMaxExtent”: false,
            “isBaseLayer”: false,
            “displayInLayerSwitcher”: true,
            “visibility”: true,
            “opacity”: null,
            “alwaysInRange”: true,
            “CLASS_NAME”: “OpenLayers.Layer.WMS”
        },
        {
            “name”: “Letecký snímek ČR “,
            “url”: “http://apps.esdi-humboldt.cz/cgi-bin/tilecache/tilecache.cgi“,
            “params”: {
                “LAYERS”: “ceniaJTSK”,
                “FORMAT”: “image/jpeg”,
                “SERVICE”: “WMS”,
                “VERSION”: “1.1.1”,
                “REQUEST”: “GetMap”,
                “STYLES”: “”,
                “EXCEPTIONS”: “application/vnd.ogc.se_inimage”,
                “SRS”: “epsg:102067”
            },
            “singleTile”: false,
            “tileSize”: {
                “w”: 256,
                “h”: 256,
                “CLASS_NAME”: “OpenLayers.Size”
            },
            “buffer”: 0,
            “reproject”: false,
            “numZoomLevels”: 14,
            “maxResolution”: 705.5551745557614,
            “minResolution”: 0.035277758727788065,
            “maxExtent”: {
                “left”: -905000,
                “bottom”: -1230000,
                “right”: -400000,
                “top”: -900000,
                “CLASS_NAME”: “OpenLayers.Bounds”
            },
            “wrapDateLine”: false,
            “displayOutsideMaxExtent”: false,
            “isBaseLayer”: false,
            “displayInLayerSwitcher”: true,
            “visibility”: true,
            “opacity”: null,
            “alwaysInRange”: true,
            “CLASS_NAME”: “OpenLayers.Layer.WMS”
        },
        {
            “name”: “mapy KN – inverzni”,
            “url”: “http://wms.cuzk.cz/wms.asp?”,
            “params”: {
                “LAYERS”: “KN-I”,
                “TRANSPARENT”: true,
                “FORMAT”: “image/png”,
                “SRS”: “epsg:102067”,
                “SERVICE”: “WMS”,
                “VERSION”: “1.1.1”,
                “REQUEST”: “GetMap”,
                “STYLES”: “”,
                “EXCEPTIONS”: “application/vnd.ogc.se_inimage”
            },
            “singleTile”: true,
            “tileSize”: {
                “w”: 1095,
                “h”: 525,
                “CLASS_NAME”: “OpenLayers.Size”
            },
            “buffer”: 2,
            “reproject”: false,
            “numZoomLevels”: 14,
            “maxResolution”: 705.5551745557614,
            “minResolution”: 0.035277758727788065,
            “maxExtent”: {
                “left”: -764972.5503759343,
                “bottom”: -1054780.0332965641,
                “right”: -713467.0226333638,
                “top”: -1030085.6021871124,
                “CLASS_NAME”: “OpenLayers.Bounds”
            },
            “wrapDateLine”: false,
            “displayOutsideMaxExtent”: false,
            “isBaseLayer”: false,
            “displayInLayerSwitcher”: true,
            “visibility”: true,
            “opacity”: null,
            “alwaysInRange”: true,
            “CLASS_NAME”: “OpenLayers.Layer.WMS”
        },
        {
            “name”: “Praha – hladiny hlukoveho ukazatele Ldvn (dB)”,
            “url”: “http://castor.cenia.cz:80/wmsconnector/com.esri.wms.Esrimap/cenia_hluk_pbol?”,
            “params”: {
                “LAYERS”: “40”,
                “TRANSPARENT”: true,
                “FORMAT”: “image/png”,
                “SRS”: “epsg:102067”,
                “SERVICE”: “WMS”,
                “VERSION”: “1.1.1”,
                “REQUEST”: “GetMap”,
                “STYLES”: “”,
                “EXCEPTIONS”: “application/vnd.ogc.se_inimage”
            },
            “singleTile”: true,
            “tileSize”: {
                “w”: 1095,
                “h”: 525,
                “CLASS_NAME”: “OpenLayers.Size”
            },
            “buffer”: 2,
            “reproject”: false,
            “numZoomLevels”: 14,
            “maxResolution”: 705.5551745557614,
            “minResolution”: 0.035277758727788065,
            “maxExtent”: {
                “left”: -742465.3403076057,
                “bottom”: -1044817.9470094242,
                “right”: -741950.2850301799,
                “top”: -1044571.0026983297,
                “CLASS_NAME”: “OpenLayers.Bounds”
            },
            “wrapDateLine”: false,
            “displayOutsideMaxExtent”: false,
            “isBaseLayer”: false,
            “displayInLayerSwitcher”: true,
            “visibility”: true,
            “opacity”: null,
            “alwaysInRange”: true,
            “CLASS_NAME”: “OpenLayers.Layer.WMS”
        },
        {
            “name”: “Editable Vectors”,
            “features”: [
            ],
            “numZoomLevels”: 14,
            “maxResolution”: 705.5551745557614,
            “minResolution”: 0.035277758727788065,
            “maxExtent”: {
                “left”: -905000,
                “bottom”: -1230000,
                “right”: -400000,
                “top”: -900000,
                “CLASS_NAME”: “OpenLayers.Bounds”
            },
            “wrapDateLine”: false,
            “displayOutsideMaxExtent”: false,
            “isBaseLayer”: false,
            “displayInLayerSwitcher”: true,
            “visibility”: true,
            “opacity”: null,
            “alwaysInRange”: true,
            “CLASS_NAME”: “OpenLayers.Layer.Vector”
        }
    ],
    “center”: {
        “lon”: -742207.8126688928,
        “lat”: -1044694.474853877,
        “CLASS_NAME”: “OpenLayers.LonLat”
    },
    “resolution”: 0.7055551745557613,
    “resolutions”: [
        705.5551745557614,
        352.7775872778807,
        176.38879363894034,
        70.55551745557612,
        35.27775872778806,
        17.63887936389403,
        7.055551745557612,
        3.527775872778806,
        1.763887936389403,
        0.7055551745557613,
        0.35277758727788,
        0.17638879363,
        0.07055551745557613,
        0.035277758727788065
    ],
    “bounds”: {
        “left”: -742465.3403076057,
        “bottom”: -1044817.9470094242,
        “right”: -741950.2850301799,
        “top”: -1044571.0026983297,
        “CLASS_NAME”: “OpenLayers.Bounds”
    },
    “projection”: “epsg:102067”,
    “units”: “m”,
    “maxResolution”: “auto”,
    “numZoomLevels”: 20,
    “zoom”: 9,
    “CLASS_NAME”: “OpenLayers.Map”
}

MapShake-v1.0

1 Reply

MapShake v 1.0 preview is available here (:don’t forget to put your loudspeakers at maximum and do not hesitate to ‘shake your body’ while watching.. ..and yes ..shake your maps too ! :)

…Feb 2010 update covering friends maps and WMS overaly over the Google maps

WMSBinder as Open Source

Leave a reply

Check page http://mapserver.mendelu.cz/wmsbinder where you will find code repository (SVN) to access the WMS binder sources. We have two designs – old one on http://wmsbinder.mendelu.cz/getCap-old.htm and new one still under progress. What is hot in new verison is ability to display thumbnails of layers you have attached into the main map window and ability to rearange them and change transparency. Export to MapShake is now working automaticaly from Export tab (using OLON) (you just need to have valid account on MapShake). Enjoy ! P.S> I am interchanging WMSBinder with the term MapBinder…not sure which one is better.

OLON Store In MapShake

Leave a reply

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-ms

OLON in OpenLayers 2.7

Leave a reply

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.