Kaliopa mobile viewer with google maps as base layer

classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

Kaliopa mobile viewer with google maps as base layer

Rodolfo Moreno
Hi all,
Someone knows how to add google maps as base layer in the kaliopa mobile viewer?
Thanks in advance.
Reply | Threaded
Open this post in threaded view
|

Re: Kaliopa mobile viewer with google maps as base layer

Srecko Lipovsek
Hi Rodolfo,

First you need set right coordinate system in your MapDefinition. Coordinate system should be the same as in Google Maps - pseudo mercator EPSG:3857 ...

Then you should create custom OpenLayers build where classes for Google Maps Layer from OpenLayers are included. In Kaliopa Mobile Viewer Gogle Maps is not included by default. There you should also first take full Openlayers.js file and later create lightweight Openlayers.js file where you chose what you need - you get smaller file.

And in last step you need to add Google Maps Layer ... look into OpenLayers Examples how to Add Google Maps Layer and put that javascript code into default.js file.

Then run minify.bat ...

I think that Reno Sun has created this. Look at http://maps.qualicumbeach.com and search for mobile Viewer.

If you need litle bit of help creating this let me know ... ;)
Reply | Threaded
Open this post in threaded view
|

Re: Kaliopa mobile viewer with google maps as base layer

RenoSun
In reply to this post by Rodolfo Moreno
Hi Rodolfo,

You should be able to find initwms() function under Defaults.aspx.

Then, you can add following codes.

var GoogleSatellite = new OpenLayers.Layer.OSM("Google Satellite", ["http://mt1.google.com/vt/lyrs=y&x=${x}&y=${y}&z=${z}"], { numZoomLevels: 23, sphericalMercator: true,transitionEffect: 'resize' });

var GoogleStreet = new OpenLayers.Layer.OSM("Google Street", ["http://mt1.google.com/vt/x=${x}&y=${y}&z=${z}"], { numZoomLevels: 23, sphericalMercator: true,transitionEffect: 'resize' });

There are a lots of based map options.

Nokia Here: http://1.aerial.maps.cit.api.here.com/maptile/2.1/maptile/newest/satellite.day/${z}/${x}/${y}/256/png8?app_id=DemoAppId01082013GAL&app_code=AJKnXv84fjrb0KIHawS0Tg

Bing Map:
var aerial = new OpenLayers.Layer.Bing({
                key: "APIKEY",
                type: "Aerial",
                name: "Bing",
                numZoomLevels: 23,
                sphericalMercator: true,
                transitionEffect: 'resize'            
});

Other Openlayers Options:

//Water Color
var wc = new OpenLayers.Layer.OSM("Water Color", ["http://d.tile.stamen.com/watercolor/${z}/${x}/${y}.jpg"], { numZoomLevels: 23, sphericalMercator: true,transitionEffect: 'resize' });

//Bicycle
var bc = new OpenLayers.Layer.OSM("Bicycle", ["http://b.tile.thunderforest.com/cycle/${z}/${x}/${y}.png"], { numZoomLevels: 23, sphericalMercator: true,transitionEffect: 'resize' });

//Transport
var transp = new OpenLayers.Layer.OSM("Transport", ["http://b.tile.thunderforest.com/transport/${z}/${x}/${y}.png"], { numZoomLevels: 23, sphericalMercator: true,transitionEffect: 'resize' });

Also, you can set the initial visibility of each based map.

Example:
            wc.setVisibility(false);
            bc.setVisibility(false);
            transp.setVisibility(false);
            toner.setVisibility(false);

Finally, add following code to add all the based map layers into the map.

map.addLayers([GoogleSatellite,GoogleStreet, wc, bc ,transp, toner]);

Let me know if you have other questions.






Reply | Threaded
Open this post in threaded view
|

Re: Kaliopa mobile viewer with google maps as base layer

Rodolfo Moreno
Thanks Srecko and RenoSun.
I have have downloaded all 2.12 openlayers version (is the same of the Kalipopa Mobile Viewer) to have the Google and other base map classes.
I call this library in the default.aspx, next I added the code that RenoSun suggests me.

function initWms(){
            wmsLayArr1 = new Array(); //list of base layers
            wmsLayArr2 = new Hashtable(); //list of base layers ids
           
            // CODE ADDED
             
            var GoogleStreet = new OpenLayers.Layer.OSM("Google Street",
              ["http://mt1.google.com/vt/x=${x}&y=${y}&z=${z}"], { numZoomLevels: 23,
              sphericalMercator: true,transitionEffect: 'resize' });
                       
             map.addLayers([GoogleStreet]);
}

Then the Kaliopa mobile viewer shows the GoogleStreet base maps but my mapguide map is not displayed any more. I supposed that the google layers are overlaping my mapguide maps (on the top) thus I added the following code:

map.setLayerIndex(GoogleStreet, 0);

In order to put the GoogleLayer in the bottom of my map but even I cant view my mapguide map.
What it would be the problem?

Thanks in advance

Reply | Threaded
Open this post in threaded view
|

Re: Kaliopa mobile viewer with google maps as base layer

Srecko Lipovsek
Hi,
Both, MG and Google are probally inserted as Base Layers.

Add this:
wmsLayArr1.push(GoogleStreet);

Remove this:
map.addLayers([GoogleStreet]); 

And it should work.
Reply | Threaded
Open this post in threaded view
|

Re: Kaliopa mobile viewer with google maps as base layer

RenoSun
In reply to this post by Rodolfo Moreno
Firstly, I think it's necessary to add following code before you add other base maps.
var osm = new OpenLayers.Layer.OSM("OpenLayers");

Under Default.js/Default.debug.js you should call your initWms(); function after following codes:
About line 580
After
map = new OpenLayers.Map('map', mapOptions);
Then add
initWms();

Hope it will be the solution.
Reply | Threaded
Open this post in threaded view
|

Re: Kaliopa mobile viewer with google maps as base layer

Rodolfo Moreno
In reply to this post by Srecko Lipovsek
Thanks Srecko. Your suggestions is working. However I have a doubt. How could I do in order to put both google street and google satellite in the viewer and the user can turn on/off this two new layers independently.
Best Regards,
Reply | Threaded
Open this post in threaded view
|

Re: Kaliopa mobile viewer with google maps as base layer

RenoSun
This post was updated on .
I used custom openlayers layer switcher to allow users to switch base maps order, and change the opacity of each base map.

http://dev.openlayers.org/sandbox/jvanulden/openlayers/examples/extended-layerswitcher.html

Town of Qualicum Beach Mobile Map Viewer
http://maps.qualicumbeach.com/qbmap/mobileMapViewer/MobileMap.aspx?m=Property#m=Property&zoom=11&lat=6333119.9336&lon=-13853206.54003&layers=TFFFFTTTT

Hope this will help.
Reply | Threaded
Open this post in threaded view
|

Re: Kaliopa mobile viewer with google maps as base layer

Emma Schmidt
In reply to this post by Rodolfo Moreno
Hi,
  • I can see the Weblayout with the Ajax Viewer
  • I tried the wms layer as normal Layer and as Base Layer, it doesn’t work at all in the mobile Viewer
  • The wgs84 pseudo mercator projekction doesn’t work as well.
It’s strange because the Legend and the Layer On/off works. Which tells me, that the connection is right and the Layout works fine with the Ajax Viewer, what can be wrong?
Do I need to set something in the IIS except the  “ Create virtual directory and Convert it to Application ” . Or any other settings?
 
 
Thanks

_______________________________________________
mapguide-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/mapguide-users
Reply | Threaded
Open this post in threaded view
|

Re: Kaliopa mobile viewer with google maps as base layer

Srecko Lipovsek
In reply to this post by Rodolfo Moreno
Hi,
OpenLayers has 2 difetent layer types - Base Layers and Overlays.

The restriction of base layer is that only one can be shown.

If you want to display those layers as Overlays you should add extra options while you are adding your layer:

Add this to your layer:
isBaseLayer: false

Eg:
var GoogleStreet = new OpenLayers.Layer.OSM("Google Street",
              ["http://mt1.google.com/vt/x=${x}&y=${y}&z=${z}"], { numZoomLevels: 23,
              sphericalMercator: true,transitionEffect: 'resize', isBaseLayer: false });