Overlay SVG diagrams on google maps
- by ThibThib
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...
