svg map symbol

wang

05-11-2004, 05:06 PM

I am a college student of Wuhan University, P.R.China. My specialty in school is GIS. Now I am learning cartography ,using the SVG method. I have viewed the website "learn SVG" and have seen some examples provided by you . I think your examples are very helpful to my study!
Recently, I met an intractable problem. If you can help me , even a few of pieces of suggestion,I will be very appreciated to your kindness!
I designed the map symbol, which required that the symbol unit should be distributed randomly in the whole area. According to the way which used in the "pattern" design,I can hardly make the sign unit distribute randomly,then I decided to use the "javascript" computer language to do so. But, still, I can't combine the javascript language with the SVG file rightly.

Here are some codes, which are created by myself.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="16cm" height="16cm">
<desc>密集灌木林填充模板</desc>
<defs>
<symbol id="mjgc" style="fill:none;stroke:black;stroke-width:0.5">
<circle cx="50" cy="50" r="6"/>
<g transform="translate(0,-14)">
<circle cx="50" cy="50" r="2" style="fill:black"/>
</g>
<g transform="translate(0,-22)">
<circle cx="50" cy="50" r="2" style="fill:black"/>
</g>
<g transform="translate(-10.392,6)">
<circle cx="50" cy="50" r="2" style="fill:black"/>
</g>
<g transform="translate(10.392,6)">
<circle cx="50" cy="50" r="2" style="fill:black"/>
</g>
</symbol>
//here I define the symbol unit
<pattern id="moban008" patternUnits="userSpaceOnUse"
x="0" y="0" width="14cm" height="4cm" viewBox="0 0 1400 400">

<use xlink:href="#mjgc" transform="translate(200 60) rotate(-90 50 50 ) scale(1.5)"/>
<use xlink:href="#mjgc" transform="translate(650 60) rotate(225 50 50 ) scale(1.5)"/>
<use xlink:href="#mjgc" transform="translate(1150 0) rotate(45 50 50) scale(1.5)"/>
<use xlink:href="#mjgc" transform="translate(70 170) rotate(165 50 50) scale(1.5)"/>
<use xlink:href="#mjgc" transform="translate(400 170) rotate(265 50 50) scale(1.5)"/>
<use xlink:href="#mjgc" transform="translate(900 120) rotate(120 50 50) scale(1.5)"/>
<use xlink:href="#mjgc" transform="translate(1250 150) rotate(300 50 50) scale(1.5)"/>
<use xlink:href="#mjgc" transform="translate(200 280) rotate(320 50 50) scale(1.5)"/>
<use xlink:href="#mjgc" transform="translate(630 280) rotate(320 50 50) scale(1.5)"/>
<use xlink:href="#mjgc" transform="translate(1150 250) rotate(90 50 50) scale(1.5)"/>

</pattern>
<rect id="waikuang" style="stroke:black;stroke-width:0.05cm;stroke-dasharray:2 8"
x="0.5cm" y="0.3cm" width="14cm" height="15.7cm"/>
</defs>
<use xlink:href="#waikuang" style="fill:rgb(152 251 152);fill-opacity:0.3"/>
<use xlink:href="#waikuang" style="fill:url(#moban008)"/>
</svg>

As you can see in the ".svg" form, I can't make the map symbol unit distribute randomly. Their locations and rotate angles are defined by me, in the form of
transform="translate(200 60) rotate(-90 50 50 ) scale(1.5)"

best wish! Thank you!

Anonymous

05-12-2004, 12:52 AM

Is some code to create symbols in your pattern ?

function create_pattern(evt)
{
for (i=0;i<10;i++)
{
str = "<use xlink:href='#mjgc' transform='translate("
str += Math.round(1400 * Math.random()).toString()
str += " " + Math.round(400 * Math.random()).toString()
str += ") rotate(" + Math.round(360 * Math.random()).toString()
str += " 50 50 ) scale(1.5)'/>"
symbol = parseXML( str, svgdoc)
svgdoc.getElementById("moban008").appendChild(symbol)
}
}

Michel

wang

05-13-2004, 04:11 AM

Dear friend: Thank you very much for your help! I will try it in my programme,if there were some further questions,I really hope that I can communicate with you!
Best wishes!

wang

05-14-2004, 06:10 AM

Hi, Michel:
I have studyed your codes,now I have seveal questions to ask you!
1. according the codes,the effect of the function is to produce 10 symbol in the pattern by DOM ,because you use the "for( )" circular expression,and in this pattern ,the 10 symbol units distribute randomly,but how can this way avert from 2 or more units have the same x,y coordinates?
2.in the codes, you use the "str" as well as the "svgdoc" ,I want to ask that why do we need to use these two parameters?
3.what is the effect of " parseXML()"?
4.Does the sentence "svgdoc.getElementById("moban008").appendChild(symbol)" mean that we pick up the " moban008 " from the document,and design the correlative attribute of it?
And at last, I think if I want to solve this problem,I need study something about DOM,am I right? :)
Would you like to provide me some web resources about it,Thank you !!!

Anonymous

05-14-2004, 09:19 AM

1. according the codes,the effect of the function is to produce 10 symbol in the pattern by DOM ,because you use the "for( )" circular expression,and in this pattern ,the 10 symbol units distribute randomly,but how can this way avert from 2 or more units have the same x,y coordinates?
You can add condition in script, compare to existing symbols with x and y in array
You can also divide your pattern in sectors and add only a random symbol in each.

2.in the codes, you use the "str" as well as the "svgdoc" ,I want to ask that why do we need to use these two parameters?
3.what is the effect of " parseXML()"?
4.Does the sentence "svgdoc.getElementById("moban008").appendChild(symbol)" mean that we pick up the " moban008 " from the document,and design the correlative attribute of it?

For "svgdoc", onload I define svg document as svgdoc, it's necessary for script run in any combination browser-plugin
For "str", I build the string to define a symbol.
When string is complete, parseXML transform string in a node but this node is not in the DOM so with "svgdoc.getElementById("moban008").appendChild(symbol)" I add it to the DOM as child of pattern.

And at last, I think if I want to solve this problem,I need study something about DOM,am I right? :)
Would you like to provide me some web resources about it,Thank you !!!
Our tutorial about script and DOM of course
http://www.learnsvg.com/tutorial2/index.php
Some examples on my site
http://pilat.free.fr/english/
and to see methods and properties
http://pilat.free.fr/english/routines/js_dom.htm
About scripting, Kevin's site at
http://www.kevlindev.com/
and many others ....

Michel

wang

05-14-2004, 11:08 PM

Dear friend: Thank you very much for your tips!!! :D