10
Aug
09

Experimenting with Google/Virtual Earth and MapGuide

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)

Advertisements

20 Responses to “Experimenting with Google/Virtual Earth and MapGuide”


  1. 1 Mike
    August 26, 2009 at 5:44 pm

    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…???…..

  2. August 27, 2009 at 12:03 am

    Yes, the VPSLAND.com server I use was down for a few days. They have corrected this.

  3. 3 Liz
    August 27, 2009 at 11:15 pm

    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

  4. August 28, 2009 at 3:38 pm

    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.

  5. 5 Ed
    December 9, 2009 at 3:09 am

    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.

  6. December 9, 2009 at 4:47 am

    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

  7. 7 Ed
    December 12, 2009 at 5:12 am

    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?

  8. 8 Ed
    December 15, 2009 at 1:28 am

    I see you also edited the Fusion.Initialized event as well. This is where AddGoogleStuff() is called.

  9. December 15, 2009 at 2:15 pm

    Good question, you can make the map opaque with the tag. Check out this site:
    http://openlayers.org/dev/examples/layer-opacity.html

  10. December 15, 2009 at 2:22 pm

    Yes, in the index page I added:

    1. script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAJU6iVYKazB7D5o1zlDm3dBQqrQTmMthm2sDxvSpnWtQFjhQwkhTjc9Umk0voByf1AHIWs23jk6KO3w'></script
    2. script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script

    3. In the fusionInitialized function I added “Fusion.getWidgetById(‘Map’).registerForEvent(Fusion.Event.MAP_LOADED, addGoogleStuff);
    4. Finally, I added the “addGoogleStuff” fuction:
      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.

  11. 11 belle
    May 18, 2010 at 5:24 am

    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.

  12. June 9, 2010 at 12:48 pm

    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.

  13. 13 Domagoj
    November 9, 2010 at 5:47 pm

    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?

  14. 14 Anto Jovanovic
    November 28, 2010 at 11:35 am

    I have error in page:
    ‘this.domObj’ is null or not on object.
    fusionF-compressed.js

    PLEASE HELP !!!!!

  15. 16 Anto Jovanovic
    November 29, 2010 at 9:43 am

    I work with Map Guide Enterprise 2011

  16. 17 Anto Jovanovic
    November 29, 2010 at 10:29 am

    Can you send me this index.html file to see how works with Google maps !?

  17. 18 Anto Jovanovic
    November 30, 2010 at 9:20 pm

    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…..

  18. 19 Anto Jovanovic
    December 7, 2010 at 5:03 pm

    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:

  19. December 8, 2010 at 5:37 pm

    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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Gordon Luckett

Arrow Geomatics Inc's Gordon Luckett

Contact

gordon dot luckett at arrowgeo dot com 1-519-837-9500 (Arrow Geomatics Inc.)

Checkout MapGuide Guy’s Youtube Channel

gordonluckett@twitter


%d bloggers like this: