Map demo

[kit]

Hi there,

I was hoping you could describe the process for creating your
Australian map demo. I've been considering building a simple map of
New Zealand in flash along the lines of your demo, but being able to
implement it in pure js with your library would be wonderful!

Many thanks

[Nphyx]

Check out the source of the demo. Each state is described as a path
and added to an object representing the entire continent (e.g.
aus.tas, aus.qld). Each state is bound to an onmouesover event which
changes its fill color and changes the 'display' of its corresponding
descriptive div to 'block' and to 'none' for other descriptive divs.
All you need to do is create a vector map of new zealand with each
region (whatever you guys call them) separated into its own path and
save it as an SVG; open the resultant file in a text editor and copy
the path strings, then use them similarly to the demo code.

[chasbeen]

Nphyx where is the link?

> > Many thanks- Hide quoted text -
>
> - Show quoted text -

[Nphyx]

You just need to navigate to the demo and use the view source feature
of your browser. In IE7 this will be under the page menu, in firefox
View->page source, in chrome under the page->developer tab, safari is
view->view source (you may need to have developer mode on, I don't
remember). I'm not sure offhand about other browsers. The raphael map
demo has its styling and javascript right there on the page, but if
you're looking for it on other sites you can usually figure out the
url by checking the <link> and <script> tags.

[Daniel Austin]

I've got a map of New Zealand based on Nphyx's Australian demo.

I took the SVG path info from WikiMedia commons: http://commons.wikimedia.org/wiki/File:New_Zealand_location_map.svg

Not too hard to get working. I won't spam the list with source but happy to share.

Dan

[Dmitry Baranovskiy]

Just be sure to simplify it a bit. You don't need that level of
details, I believe. Reducing number of points in the path will
increase performance a lot.

[Janos Erdelyi]

agreed. i used inkscape's "simplify path" option on mine - and then chopped down the decimal precision big time as well.

2009/3/25 Dmitry Baranovskiy <dmitry.ba...@gmail.com>

[Nphyx]

Just to clarify, I am not responsible for the Australia map :) I was
just explaining how it was done.

On Mar 25, 8:26 pm, Janos Erdelyi <janos.erde...@gmail.com> wrote:
> agreed. i used inkscape's "simplify path" option on mine - and then chopped
> down the decimal precision big time as well.
>

> 2009/3/25 Dmitry Baranovskiy <dmitry.baranovs...@gmail.com>

[kit]

Thanks for your help and suggestions - I've managed to build a superb
wee map of New Zealand, but have encountered one small stumbling
block. This isn't directly related to Raphael, and is more than likely
an issue with IE's javascript interpreter, but hopefully some of you
might have had some experience here. I've appended an onclick and
onmouseover event to the australian map script, which works perfectly
in Firefox, Chrome etc, however these events do not fire in IE. IE
doesn't throw a javascript error either, which makes the problem
difficult to debug. My code is as follows:

<script type="text/javascript" charset="utf-8">
window.onload = function() {
var R = Raphael("paper", 450, 600);
var attr = {
fill: "#3f3f40",
stroke: "#666",
"stroke-width": 1,
"stroke-linejoin": "round"
};
var nz = {};
nz.northland = R.path(attr, "M 193.34222,3.7847503 C
194.65463");
// SVG data stripped for sake of brevity
var current = null;
for (var region in nz) {
nz[region].color = Raphael.getColor();
(function(rg, region) {
rg[0].style.cursor = "pointer";
rg[0].onmouseover = function() {
current && nz[current].animate({ fill:
"#3f3f40", stroke: "#666" }, 500) && (document.getElementById
(current).style.display = "");
rg.animate({ fill: rg.color, stroke:
"#ccc" }, 500);
rg.toFront();
R.safari();
document.getElementById
(region).style.display = "block";
current = region;
};
rg[0].onclick = function() {
alert("IE never gets this far.");
//window.location.href = "my-page.aspx?
District=" + region;
};
rg[0].onmouseout = function() {
rg.animate({ fill: "#3f3f40", stroke:
"#666" }, 500);
};
if (region == "northland") {
rg[0].onmouseover();
}
})(nz[region], region);
}
};
</script>

Any thoughts or suggestions would be greatly appreciated :)

[kit]

The fix appears to be using the onmousedown event instead of onclick.

Changing:

rg[0].onclick = function() {
alert("IE never gets this far.");

};

to

rg[0].onmousedown = function() {

alert("IE never gets this far.");

};

resolved the issue. Apologies for the un-raphael related query.

If anyone actually knows why IE doesn't like onclick, I'd be
interested to hear!

[Paul Reiber]

kit, you wrote " Apologies for the un-raphael related query"

Thanks for sharing what the _fix_ was, back to the list!  There's value in helping others learn what _not_ to do in the same situation.
-pbr

2009/3/29 kit <squi...@gmail.com>

--
http://reiber.tiddlyspot.com

[William Edney]

Kit -

You may want to try 'onmouseup' as it matches the semantics on
'onclick' better than 'onmousedown' (i.e. it waits until the mouse
button is released).

It's strange as to why 'onclick' doesn't seem to be supported on IE. I
checked the VML reference online and there is nothing documented one
way or the other. Given that VML is buggy in places, its not a big
surprise. You may have more luck using the IE-specific 'attachEvent()'
mechanism, or better yet use the cross-browser script explained here:

http://therealcrisp.xs4all.nl/upload/addEvent_dean.html

to attach event handlers to Raphael elements.

Cheers,

- Bill