Experimenting with SVG and JavaScript

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Experimenting with SVG and JavaScript

Nick Whitelegg

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>

_______________________________________________
Openstreetmap-dev mailing list
[hidden email]
http://bat.vr.ucl.ac.uk/cgi-bin/mailman/listinfo/openstreetmap-dev
Reply | Threaded
Open this post in threaded view
|

Re: Experimenting with SVG and JavaScript

Nick Whitelegg
Sorry - I sent the wrong file!
This is it....

<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style type="text/css">
#svg1 { width: 800px; height: 600px; }
</style>
<script type="text/javascript">
function chsrc(a)
{
        document.getElementById("svg1").setAttribute('data',a);
}
</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>

_______________________________________________
Openstreetmap-dev mailing list
[hidden email]
http://bat.vr.ucl.ac.uk/cgi-bin/mailman/listinfo/openstreetmap-dev
Reply | Threaded
Open this post in threaded view
|

Re: Re: Experimenting with SVG and JavaScript

Ben Gimpert
Nick,

There was talk at some point about code to check if the browser
supports the SVG MIME type. If yes, send over the rendered SVG. If no,
then run the SVG through a PNG converter (Cairo) and send that over
instead. This way you still one basic rendering code (to SVG), but
support the predominant lack-of-browser-SVG-support configuration.

In my opinion, requiring JavaScript for dynamic stuff is reasonable.

        Ben


On Thu, Jul 21, 2005 at 10:51:33AM +0100, [hidden email] wrote:

> Sorry - I sent the wrong file!
> This is it....
>
> <!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns='http://www.w3.org/1999/xhtml'>
> <head>
> <style type="text/css">
> #svg1 { width: 800px; height: 600px; }
> </style>
> <script type="text/javascript">
> function chsrc(a)
> {
> document.getElementById("svg1").setAttribute('data',a);
> }
> </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>
>
> _______________________________________________
> Openstreetmap-dev mailing list
> [hidden email]
> http://bat.vr.ucl.ac.uk/cgi-bin/mailman/listinfo/openstreetmap-dev

_______________________________________________
Openstreetmap-dev mailing list
[hidden email]
http://bat.vr.ucl.ac.uk/cgi-bin/mailman/listinfo/openstreetmap-dev
Reply | Threaded
Open this post in threaded view
|

Re: Experimenting with SVG and JavaScript

Petter Reinholdtsen
In reply to this post by Nick Whitelegg

[Nick]
> 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.

I believe the people over at www.onemap.org are using SVG as their map
drawing method.  You might find some useful tips there.  I do not
know, as I have never been able to get their map drawing front end to
work.

Which bring me to my second point.  Please keep the browser
requirements low, if you want as many people as possible to be able to
view the map.  Requiring javascript will drop off a certain percentage
of the possible users (for example me), and requiring svg as well will
loose even more potential users.  If you want as many users as
possible to be able to view your map, you should stick to the web
browser features available in all browsers.


_______________________________________________
Openstreetmap-dev mailing list
[hidden email]
http://bat.vr.ucl.ac.uk/cgi-bin/mailman/listinfo/openstreetmap-dev
Reply | Threaded
Open this post in threaded view
|

Re: Re: Experimenting with SVG and JavaScript

Kyle Mulka-2
>
>
>Which bring me to my second point.  Please keep the browser
>requirements low, if you want as many people as possible to be able to
>view the map.  Requiring javascript will drop off a certain percentage
>of the possible users (for example me), and requiring svg as well will
>loose even more potential users.  If you want as many users as
>possible to be able to view your map, you should stick to the web
>browser features available in all browsers.
>
I agree. The browser requirements to view maps should be kept low. But,
javascript is a really nice tool to make things more user friendly. Have
there been thoughts about having two versions, the non-javascript
version being switched to if javascript is turned off?

Kyle Mulka
Computer Science in Engineering
University of Michigan
http://www.kylemulka.com/


_______________________________________________
Openstreetmap-dev mailing list
[hidden email]
http://bat.vr.ucl.ac.uk/cgi-bin/mailman/listinfo/openstreetmap-dev
Reply | Threaded
Open this post in threaded view
|

Re: Re: Experimenting with SVG and JavaScript

Nick Whitelegg
In reply to this post by Petter Reinholdtsen
>I believe the people over at www.onemap.org are using SVG as their map
>drawing method.  You might find some useful tips there.  I do not
>know, as I have never been able to get their map drawing front end to
>work.

OK thanks for that.

> Which bring me to my second point.  Please keep the browser
> requirements low, if you want as many people as possible to be able to
> view the map.  Requiring javascript will drop off a certain percentage
> of the possible users (for example me), and requiring svg as well will
> loose even more potential users.  If you want as many users as
> possible to be able to view your map, you should stick to the web
> browser features available in all browsers.

However far I get with an SVG version, I have no intention of withdrawing the
current version  (and even that depends on JavaScript for the distance
calculator!)  until SVG is fully supported by mainstream browsers and even
then would keep a non SVG version up.

The SVG/JavaScript idea would be more of a "development" version, aimed at
exploring the possibilities of technologies which will be more fully
supported in the future. If a combination of JS and SVG will potentially lead
to web applications which have all the interactivity of non-web desktop
applications, it's something worth experimenting with.

For example, one thing I would like to do is allow a user of Freemap to
contribute their own walks. I would like them to be able to define the route
of their walk by dragging the mouse over the map to trace the route out. This
is possible using straight JavaScript (no SVG), but finding the mouse
position is hacky with cross-browser issues (ref: www.quirksmode.org - follow
links to DHTML and finding mouse position). Having defined their route, it
would be good to display the route overlaid on the Freemap map (again SVG
seems best approach here) and the route to be sent across to a database of
walking routes (can be done with non-SVG technology).

So while this is doable with non-SVG technology, the "DHTML" required is
somewhat iffy from a standards point of view.

Nick

_______________________________________________
Openstreetmap-dev mailing list
[hidden email]
http://bat.vr.ucl.ac.uk/cgi-bin/mailman/listinfo/openstreetmap-dev