[Openstreetmap-dev] Experimenting with SVG and JavaScript

Thu Jul 21 10:49:11 BST 2005

With a view to implementing SVG with Freemap, I've been experimenting a bit. 
What I would like to do is basically have Freemap "as it is now" (not so 
bothered about scrolling maps just yet) but have the maps served back to the 
client as SVG rather than PNG.

What I would also like to do is, when the user navigates using the arrows, to 
fetch the corresponding SVG tile back from the server *without* reloading the 
whole page. In other words, the HTML should remain constant, only the image 
should change.

Now using the <img> tag and standard PNGs this could easily be done using:

document.getElementById('mapimage').src = 'newtile.png';

... and the image would be reloaded with "newtile.png"

However, when I attempt to do the same with SVG, using the object tag to embed 
an SVG and changing the data attribute to reload, it doesn't work.
The data attribute will reset, but the image doesn't reload.

The code is below, I'm testing on Firefox Deer Park Alpha 2. The two buttons 
should change the SVG displayed in the object tag, but they don't.
It doesn't work using the deprecated <embed> tag and the src attribute either.

Is there any solution for this one, or am I stuck for the moment?

Thanks,
Nick

<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#svg1 { width: 800px; height: 600px; }
</style>
<script type="text/javascript">
function chsrc(newSvg)
{
	document.getElementById("svg1").setAttribute('data',newSvg);
	// doesn't work either: 
	// document.getElementById("svg1").data = newSvg;

}
</script>
  <title>SVG as embedded object and nested namespace</title>
</head>
<body>
<h2>Object tag</h2>
<object type="image/svg+xml" data="standalone.svg" id="svg1">
Your browser is currently unable to display SVG images.
</object>
<input type="button" value="one" onclick="chsrc('standalone.svg')"/>
<input type="button" value="two" onclick="chsrc('other.svg')"/>
</body>
</html>