Hello everybody
I am trying to overlay a SVG file on a google map.
So, I tried 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);
}
And surprisingly, it works... with Safari 4 only (here is a test :
http://docmatic.fr/temp/toto.html you can zoom and see how the SVG is
rendered. Very well and very fast, in fact !!)
The reason is quite simple : if you inspect the web page, you could
see that the SVG file is included as an IMAGE with
<IMG src="test.svg" style=".....">
And, Safari 4 is able to draw a SVG file if it is embedded in a <IMG>
tag. Of course, this is not the "legal" behaviour, and it only works
with Safari 4.
So, I try to create a Custum Overlay to deal with that and have the
same behaviour as the GGroundOverlay (except that their is no
projection... I suppose here that the SVG applied on small area, like
on a city, where the cosine/sine of the latitude/longitude are almost
constant).
And since there is a small bug with Webkit for rendering a SVG with
transparent background with <object>element, I need to use <object> or
<img> accordingly to the browser (I don't like this, but... for the
moment, it's still the quick-and-dirty experiments)
So I started with this code (still work in progress):
// add it with the same z-index as the map
this.map_ = map;
this.div_ = div;
//create new svg root element and set attributes
var svgRoot;
if (BrowserDetect.browser=='Safari')
{
// Bug in webkit: with <objec> element, Safari put a white
background... :-(
svgRoot = document.createElement("img");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px");
svgRoot.setAttribute("src", "test.svg");
}
else //if (BrowserDetect.browser=='Firefox')
{
svgRoot = document.createElement("object");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px;");
svgRoot.setAttribute("data", "test.svg");
}
div.appendChild(svgRoot);
map.getPane(G_MAP_MAP_PANE).appendChild(div);
//this.redraw(true);
}
...
The draw function is not yet written.
BUT...
I still have a problem (I progress slowly, thanks to what I read/learn
everywhere... I am more a python guy than an javascript guy...).
Now, the problem is the following : with the <object> tag, the map is
not draggable. All over the <object> element, the mouse pointer is not
"the hand icon" to drag the map, but just the normal pointer.
And I did not find how to correct this. Should I add a new mouse event
(I just saw mouse event when a click or a double-click append, but not
for dragging the map...) ?
Or is there another way to add this layer so as to preserve the drag-
ability ?
Thank you for your comments and answers.
PS1: the other solution is to add one by one the elements of my SVG,
as some of you have done. In this example (http://swa.ethz.ch/
googlemaps/), the SVG is read and parsed with GXml.parse(), and all
the elements with a given tag name are obtained
(xml.documentElement.getElementsByTagName) and added to the SVG node
(svgNode.appendChild(node)).
I will also try to do the same for a given SVG
PS2: I have also a subsidiary question. Even if it is not my preferred
solution, I can also convert my SVG into encoded polygons. The
question is : how much points can I put in my polygons without slowing
too much my machine ?
my SVG contains about 1000 arcs and circles (and probably up to 2000),
so if I put 20 polylines for the circles and 10 for the arcs, it will
be around 1500 polypoints (up to 3000) (I will have around 10 polygons
of 150 points each).
So, is it too much ?? (just to know if I need to investigate time into
converting my SVG into encoded polygons... The SVG is generated my a
python program I made, and is use to draw isochronous curves)
Thanks a lot for reading until the end... :-)
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
