Lately I have been experimenting with Google and Virtual Earth with MapGuide. Using the FUSION/Flexible Web Layouts, I have been able to communicate with the OpenLayers API to add and remove layers to use as a background to my maps.
Having this data in the background is fantastic news. Cartographically, many people have to pay 10′s to 100′s of thousands of dollars just to have a robust background to their map data. Now you can just put in your own thematics and dynamic data without housing terra-bytes of data by leveraging other data stores such as Microsoft’s Virtual Earth, Google Maps or Yahoo! Maps.
My google/mapguide mashup is at: http://mapguide.ca/guelph/ (my current city in Canada)
My virtual earth/mapguide mashup is at: http://mapguide.ca/sydney/ (where I am heading in October for the FOSS4G conference)
I shared some of your excitement/enthusiasm as I read this post..eagerly looking forward to your hyperlink example sites. (as I too have invested hours in an attempt to get similar type sites up and running)….
alas, your hyperlinks were dead links…???…..
Yes, the VPSLAND.com server I use was down for a few days. They have corrected this.
I agree, this is exciting news. I am yet to find anything helpful as to how to actuall do it….any leads would be greatly appreciated.
Cheers
Liz
Sure, good question – here is a high-level way to to it:
1. Use MapGuide Enterprise or Open Source
2. Create a new Flexible Web Layout (aka FUSION)
3. Ensure you create a map with Spherical Mercator: http://docs.openlayers.org/library/spherical_mercator.html
4. In the template within the Index.html page, add the OpenLayers code to add Google as a layer:
var addGoogleStuff = function() {
var mapWidget = Fusion.getWidgetById('Map');
var map = mapWidget.oMapOL;
mapWidget.fractionalZoom = false; //fractionalZoom not permitted with Google layers
map.setOptions({fractionalZoom: false, numZoomLevels: 30});
var googleStreetsLayer = new OpenLayers.Layer.Google('Google Streets', {type : G_NORMAL_MAP, isBaseLayer: true, sphericalMercator: true});
map.addLayer(googleStreetsLayer);
var mgLayers = map.getLayersByClass('OpenLayers.Layer.MapGuide');
if(mgLayers.length != 0)
{
var mgLayer = mgLayers[0];
if(mgLayer.isBaseLayer)
{
map.setBaseLayer(googleStreetsLayer);
mgLayer.setIsBaseLayer(false);
mgLayer.setVisibility(true);
}
}
}
5. If you then look at any Flexible Web Layout it will have Google in the background.
Gordon,
Are you sure you included all the code to modify the template? I get an error on the line that assigns var map.
Message: ‘oMapOL’ is null or not an object
Line: 129
Char: 5
Code: 0
URI: http://localhost/mapguide/fusion/templates/mapguide/GoogleSlate/index.html?
Also, I can’t find the code for your Google menu widgets.
Yes, but this must be in the index.html in the template for a modified google fusion template.
check out the source code for:
http://mapguide.ca/mapguide2010/fusion/templates/mapguide/googleaqua/index.html?APPLICATIONDEFINITION=Library://Guelph/6_LAYOUTS/GUELPH_LAYOUT.ApplicationDefinition&SESSION=689448ce-c711-102c-8000-00ffce4ee674_en_7F0000010AF20AF10AF0
this is the index.html of my template called googleaqua
you can copy and paste the code from there.
Note: This works with MapGuide 2010 and MapGuide OpenSource 2.1
I was missing the links to the referenced libraries. They weren’t mentioned earlier. I don’t get any errors now, but I still don’t see google. Is it possible that my map is hiding it? The map has a setting for background color. Is there a way to make it transparent?
I see you also edited the Fusion.Initialized event as well. This is where AddGoogleStuff() is called.
Good question, you can make the map opaque with the tag. Check out this site:
http://openlayers.org/dev/examples/layer-opacity.html
Yes, in the index page I added:
script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAJU6iVYKazB7D5o1zlDm3dBQqrQTmMthm2sDxvSpnWtQFjhQwkhTjc9Umk0voByf1AHIWs23jk6KO3w'></script
script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script“
var addGoogleStuff = function() {
var mapWidget = Fusion.getWidgetById(‘Map’);
var map = mapWidget.oMapOL;
mapWidget.fractionalZoom = false; //fractionalZoom not permitted with Google layers
map.setOptions({fractionalZoom: false, numZoomLevels: 30});
// Create a Google streets layer
var googleStreetsLayer = new OpenLayers.Layer.Google(‘Google Streets’, {type : G_NORMAL_MAP, isBaseLayer: true, sphericalMercator: true});
map.addLayer(googleStreetsLayer);
var mgLayers = map.getLayersByClass(‘OpenLayers.Layer.MapGuide’);
if(mgLayers.length != 0)
{
var mgLayer = mgLayers[0];
if(mgLayer.isBaseLayer)
{
map.setBaseLayer(googleStreetsLayer);
mgLayer.setIsBaseLayer(false);
mgLayer.setVisibility(true);
}
}
}
And that was it.
hi there gordon,
thanks for sharing the instructions. i tried your code, but it gives me a javascript error : “this.center is null”. but when i remove the sphericalMercator:true line in addgooglestuff, the google map shows but only eats 1/4 of space in the screen. Do i need to change anything else?
I also use mapguide maestro to change the coordinate systems, is that necessary?
Thanks.
I find that the video card affects the google overlay. Try another browser or computer to see if that corrects the issue. You definitely need the map to be in the Google coordinate system.
I have try to do this changes in index.html, but without success.
Can you send me this index.html file to see how works with Google maps and with Microsoft Earth?
I have error in page:
‘this.domObj’ is null or not on object.
fusionF-compressed.js
PLEASE HELP !!!!!
You may have to use the OpenLayers 2.8 version rather than the live one.
see http://mapguide.wordpress.com/2010/04/26/openlayers-2-9-problem-with-mapguide-enterprise-2010/
I work with Map Guide Enterprise 2011
Can you send me this index.html file to see how works with Google maps !?
Gordon,
can you help me with error ‘this.domObj’ is null or not on object.
and can you send Index.html file where I look problem…..
HI !
I create in agua temlate for the web layout this: http://trac.osgeo.org/fusion/wiki/MapGuideCommercialOverlays
In page have my map and don’t have google maps !?
PLEASE HELP !!!!!
AplicationDefinition.xml:
MapGuide
true
false
true
EPSG:900913
Library://Mapa/Karta.MapDefinition
Google
false
Google
Satellite Google Maps
G_SATELLITE_MAP
true
Index.html:
Hi, I don’t bother with that http://trac.osgeo.org/fusion/wiki/MapGuideCommercialOverlays
If you are running MapGuide 2011, you do not have to do anything but use Studio.