Overlay SVG diagrams on google maps

Posted by ThibThib on Stack Overflow See other posts from Stack Overflow or by ThibThib
Published on 2009-06-28T17:49:49Z Indexed on 2010/04/28 12:53 UTC
Read the original article Hit count: 311

Filed under:
|
|

Hello

I would like to add an overlay image on a google map. This image is a SVG file I have generated (python with svgfig).

I am using the following code

if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(48.8, 2.4), 12);

    // ground overlay
    var boundaries = new GLatLngBounds(new GLatLng(48.283188032632829, 1.9675270369830129), new GLatLng(49.187215000000002, 2.7771877478303999));
    var oldmap = new GGroundOverlay("test.svg", boundaries);
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.addOverlay(oldmap);
}

Surprisingly, it works with Safari 4, but it doesn't with Firefox (with Safari 3, the background is not transparent)

Does anyone has an idea on how I could overlay a SVG ?

Thanks

PS1: I read some works like this or the source code of swa.ethz.ch/googlemaps, but it seems that they have to use javascript code to parse the SVG and add one by one all the elements (but I did not understood all the source...)

PS2: The SVG is composed of different filled paths and circles, with transparency. If there is no solution to overlay my SVG, I can use 2 alternative solutions:

  • rasterize the SVG
  • convert the paths and circles in GPolygons

But, I do not really like the 1st solution because of the poor quality of the bitmap and the time to generate it with antialiasing.

And for the 2nd solutions, the arcs, ellipses and circles will have to be decomposed into small polylines. A lot of them will be necessary for a good result. But I have around 3000 arcs and circles to draw, so...

© Stack Overflow or respective owner

Related posts about google-maps

Related posts about JavaScript