Talk:KT13 Weybridge
Jump to navigation
Jump to search
Nice work! Which attributes (label values) did you use for the coloring? Does your work give any clues to how we should write guidelines for how to set attributes? Should motorways have one attribute (color) and connecting ramps another? Which tools did you use? Are all roads (also the grey ones) really part of OSM? --LA2 23:06, 2 Mar 2006 (UTC)
- Which attributes (label values) did you use for the coloring? For the roads I look for segments with class=motorway|primary|secondary|path these are coloured blue, red, yellow, green respectively. Roads without a class label are drawn in grey. For the captions, I look for nodes with class=town|village and render them in 12pt Blue and 10pt Green respectively.
- Does your work give any clues to how we should write guidelines for how to set attributes? I think the main lesson is that its very hard to set attributes consistently if you don't have any way of seeing what effect they have. So a tool for rendering attributes is a great help. I've always been concerned that if I edit some small part of a road I might accidentally insert a segment that does not have any attributes (or inconsistent attributes). Visualisation provides a way of checking this.
- Should motorways have one attribute (color) and connecting ramps another? IMHO motorway ramps should be coloured blue like motorways but should have a different label (class=motorwayRamp?) so that route planning software etc can recognise the main path of the motorway.
- Are all roads (also the grey ones) really part of OSM? All of the roads including all of the grey ones are in the OSM database. The map was generated 100% from OSM data with no human intervention.
- Which tools did you use? You don't want to know what tools I used ;) To a man with a hammer every problem looks like a nail. Basically I grabbed the data using the REST api and then used a template to transform it into a web page which I then converted to png. It's very experimental at the moment. I want to explore using SVG and I need to do things like getting a proper projection algorithm. I suspect that lat*1.6 only works for Weybridge ;)
- 80n 01:38, 3 Mar 2006 (UTC)
- Well it works very fine and it's a beautiful map. You can probably use the command line tool proj to convert from/to WGS84 Erik Johansson 09:25, 3 Mar 2006 (UTC)
Rendering tool
Could you tell me where I can get the rendering tools you used? --Colin Angus Mackay 13:30, 15 Mar 2006 (UTC)
- Colin, here's how it's done (on Windows):
- Create the style sheet
- Cut'n'paste the xsl below into Notepad
- File/Save As... c:\osm\osm-svg-0.3.xsl
- Get some data
- Enter the following URL into Firefox 1.5: http://www.openstreetmap.org/api/0.3/map?bbox=-0.5,51.3,-0.4,51.4
- Right click, View Page Source
- File/Save Page As... c:\osm\data.xml
- Add stylesheet reference to data file
- Open c:\osm\data.xml using Notepad
- Insert the following line <?xml-stylesheet type="text/xsl" href="osm-svg-0.3.xsl"?> between the XML prolog line and the <osm> element.
- File/Save
- Render the file
- Enter the following URL into Firefox 1.5: c:\osm\data.xml
- Wait about 30 seconds (no time now to make a pot of tea)
- Voila!
Notes:
- Don't even bother trying to make this work with Internet Explorer, even with the Adobe SVG plug-in. It might work if you transform the xml into an svg file using xalan and then open the svg file using IE, but I've not tried that.
- If you change the area of data that you are interested in you will need to make corresponding changes in osm-svg-0.3.xsl to the bllon, bllat, trlon and trlat variables.
- You can change the scale by adjusting the scale variable in osm-svg-0.3.xsl (I've used 0.5, 1 and 2 with success, although the larger the scale the slower it will be).
- The projection is rather crude, its just (latitude*1.6). Near enough for Weybridge, probably not right for Edinburgh.
- Currently supports class=path|secondary|primary|motorway|town|village. Unclassified segments are treated as minor roads and drawn in grey.
- I'm working on:
- Support for ways
- Use of svg paths (might make it run quicker)
- Feel free to experiment.
- This is really really good, but any idea why it takes so long? Would be good to check it into subversion so that we can get your latest version - perhaps someone might attempt to hack in a reusable projection? TomC 15:18, 16 Mar 2006 (UTC)
- You are welcome to put it into SVN. It's probably slow for three reasons. 1) The xsl transform, 2) the svg processor and 3) there are quite a lot of segments in the area I am working on. I can speed up the xsl using keys if that turns out to be where the problem is. I may be able to speed up the svg using paths (don't know if that will make any difference - I'm new to svg). There's not much I can do about the number of segments - thats only going to get worse :) 80n 16:59, 16 Mar 2006 (UTC)
- I've just modified the xsl to use keys. It is much faster now. 80n 21:03, 16 Mar 2006 (UTC)
- Fantastic stuff - much faster here too. Next step is to get the amount of data generated down a bit - 692Kb of osm elements transforms into 1.4Mb of SVG... that can't be efficient! I'm reading up on SVG now in case I can help, but you seem to be doing well by yourself. Keep it up! TomC 22:20, 16 Mar 2006 (UTC)
- I've just modified the xsl to use keys. It is much faster now. 80n 21:03, 16 Mar 2006 (UTC)
- You are welcome to put it into SVN. It's probably slow for three reasons. 1) The xsl transform, 2) the svg processor and 3) there are quite a lot of segments in the area I am working on. I can speed up the xsl using keys if that turns out to be where the problem is. I may be able to speed up the svg using paths (don't know if that will make any difference - I'm new to svg). There's not much I can do about the number of segments - thats only going to get worse :) 80n 16:59, 16 Mar 2006 (UTC)
- SVG paths should reduce the size of the output - don't know if it will improve performance but it looks like a good candidate. 80n 22:27, 16 Mar 2006 (UTC)
- Hmm... SVG paths will only be useful for ways. I've found a couple of other tweaks that will reduce the size of the svg file to 370k. Also, using xalan to do the transformation takes about 3 seconds and then Firefox takes about 2 seconds to render the result. Looks to me like Transformiix (Firefox's xsl processor) is rather slow (takes 25 seconds by comparison). 80n 23:29, 16 Mar 2006 (UTC)
- Thanks 80n - I've got fantastic map of Edinburgh and Dunfermline. Now I'll just have to fiddle with the scaling to get it to fit on the screen. --Colin Angus Mackay 19:13, 17 Mar 2006 (UTC)
I hereby name this thing osmarender :) 80n 09:40, 21 Mar 2006 (UTC)
- Come swinning in from the belfry has it ;-) Blackadder 10:01, 21 Mar 2006 (UTC)
osm-svg-0.3.1.xsl
This is an improved version of the stylesheet now calculates the bounding box automatically so you no longer need to edit it to adjust the bllat, bllon, trlat and trlon variables. It also creates a rough scale and some copyright, attribution and license stuff at the bottom.
Rendering has been extended to handle the following tags:
| Tag | Value | Comments |
|---|---|---|
| no class key | Drawn as an unclassified road | |
| class | path | |
| class | residential | As for unclassified roads, but with additional wide grey border |
| class | secondary | |
| class | primary | |
| class | motorway | |
| class | town | Applies to Nodes |
| class | village | Applies to Nodes |
| abutters | residential | Generates a wide grey border around any class of road |
| waterway | canal | |
| waterway | river | Width key can be used to specify the size of the river |
| width | 3.. | Specifies the width of a river |
| railway | rail |
<?xml version='1.0' standalone='no'?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp ' '> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<xsl:key name='nodeById' match='/osm/node' use='@id'/>
<xsl:key name='nodeByClass' match='/osm/node[tag[@k="class"]]' use='tag/@v'/>
<xsl:key name='segmentByClass' match='/osm/segment[tag[@k="class"]]' use='tag/@v'/>
<xsl:key name='segmentUnclassified' match='/osm/segment[count(tag[@k="class"])=0]' use='"unclassified"'/>
<!-- Adjust this value to alter the size of the resulting image. 0.5, 1 and 2 are good values to use. -->
<xsl:variable name='scale'>1</xsl:variable>
<!-- Automatically calculate the size of the bounding box -->
<xsl:variable name="trlat">
<xsl:for-each select="/osm/node/@lat">
<xsl:sort data-type="number" order="descending"/>
<xsl:if test="position()=1">
<xsl:value-of select="."/>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:variable name="bllat">
<xsl:for-each select="/osm/node/@lat">
<xsl:sort data-type="number" order="ascending"/>
<xsl:if test="position()=1">
<xsl:value-of select="."/>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:variable name="trlon">
<xsl:for-each select="/osm/node/@lon">
<xsl:sort data-type="number" order="descending"/>
<xsl:if test="position()=1">
<xsl:value-of select="."/>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:variable name="bllon">
<xsl:for-each select="/osm/node/@lon">
<xsl:sort data-type="number" order="ascending"/>
<xsl:if test="position()=1">
<xsl:value-of select="."/>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:variable name='width' select='(number($trlon)-number($bllon))*10000*$scale' />
<xsl:variable name='height' select='(number($trlat)-number($bllat))*10000*$scale*1.6' />
<!-- Main template -->
<xsl:template match="/osm">
<html:html>
<html:body>
<!-- This will sort of work for IE but seems rather buggy
<object id="AdobeSVG"
CLASSID="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2">
</object>
<xsl:processing-instruction name = "import" >
namespace="svg" implementation="#AdobeSVG"
</xsl:processing-instruction>
-->
<svg
version="1.1"
baseProfile="full"
height="{$height}px"
width="{$width}px">
<g style="stroke-width: 18; stroke-linecap: round; stroke: #f2f2f2;">
<xsl:for-each select='/osm/segment[tag[@k="abutters" and @v="residential"]]'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 18; stroke-linecap: round; stroke: #f2f2f2;">
<xsl:for-each select='key("segmentByClass","residential")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 4; stroke-linecap: round; stroke: #aaaaaa;">
<xsl:for-each select='/osm/segment[tag[@k="waterway" and @v="canal"]]'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 2; stroke-linecap: round; stroke: #89bac6;">
<xsl:for-each select='/osm/segment[tag[@k="waterway" and @v="canal"]]'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 8; stroke-linecap: round; stroke: #aaaaaa;">
<xsl:for-each select='key("segmentByClass","river")'>
<xsl:choose>
<xsl:when test='tag[@k="width"]'>
<g style='stroke-width: {tag[@k="width"]/@v};'>
<xsl:call-template name="segmentDraw"/>
</g>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="segmentDraw"/>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</g>
<g style="stroke-width: 6; stroke-linecap: round; stroke: #89bac6;">
<xsl:for-each select='key("segmentByClass","river")'>
<xsl:choose>
<xsl:when test='tag[@k="width"]'>
<g style='stroke-width: {number(tag[@k="width"]/@v)-2};'>
<xsl:call-template name="segmentDraw"/>
</g>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="segmentDraw"/>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</g>
<g style="stroke-width: 1; stroke-linecap: round; stroke: #d79331;">
<xsl:for-each select='key("segmentByClass","path")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 3; stroke-linecap: round; stroke: #000000;">
<xsl:for-each select='key("segmentUnclassified","unclassified")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 3; stroke-linecap: round; stroke: #000000;">
<xsl:for-each select='key("segmentByClass","residential")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 2; stroke-linecap: round; stroke: #E6E6E6;">
<xsl:for-each select='key("segmentByClass","residential")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 2; stroke-linecap: round; stroke: #E6E6E6;">
<xsl:for-each select='key("segmentUnclassified","unclassified")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 3; stroke-linecap: round; stroke: #000000;">
<xsl:for-each select='/osm/segment[tag[@k="railway" and @v="rail"]]'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 4; stroke-linecap: round; stroke: #000000;">
<xsl:for-each select='key("segmentByClass","secondary")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 2; stroke-linecap: round; stroke: #FDBF6F;">
<xsl:for-each select='key("segmentByClass","secondary")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 4; stroke-linecap: round; stroke: #000000;">
<xsl:for-each select='key("segmentByClass","primary")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 2; stroke-linecap: round; stroke: #7FC97F;">
<xsl:for-each select='key("segmentByClass","primary")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 5; stroke-linecap: round; stroke: #000000;">
<xsl:for-each select='key("segmentByClass","motorway")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<g style="stroke-width: 3; stroke-linecap: round; stroke: #809BC0;">
<xsl:for-each select='key("segmentByClass","motorway")'>
<xsl:call-template name="segmentDraw"/>
</xsl:for-each>
</g>
<xsl:for-each select='key("nodeByClass","town")'>
<xsl:call-template name="town"/>
</xsl:for-each>
<xsl:for-each select='key("nodeByClass","village")'>
<xsl:call-template name="village"/>
</xsl:for-each>
<!-- Draw the scale in the bottom left corner -->
<xsl:call-template name="scaleDraw"/>
<!-- Attribute to OSM -->
<xsl:call-template name="attribution"/>
<!-- Creative commons license -->
<xsl:call-template name="license"/>
</svg>
</html:body>
</html:html>
</xsl:template>
<xsl:template name='town'>
<xsl:variable name='x' select='($width)-((($trlon)-(@lon))*10000*$scale)' />
<xsl:variable name='y' select='($height)+((($bllat)-(@lat))*10000*$scale*1.6)'/>
<xsl:variable name='name' select='tag[@k="name"]/@v'/>
<text font-family='Verdana' font-size='14px' fill='black'>
<xsl:attribute name='x'><xsl:value-of select='$x'/></xsl:attribute>
<xsl:attribute name='y'><xsl:value-of select='$y'/></xsl:attribute>
<xsl:value-of select='$name'/>
</text>
</xsl:template>
<xsl:template name='village'>
<xsl:variable name='x' select='($width)-((($trlon)-(@lon))*10000*$scale)' />
<xsl:variable name='y' select='($height)+((($bllat)-(@lat))*10000*$scale*1.6)'/>
<xsl:variable name='name' select='tag[@k="name"]/@v'/>
<text font-family='Verdana' font-size='10px' fill='black'>
<xsl:attribute name='x'><xsl:value-of select='$x'/></xsl:attribute>
<xsl:attribute name='y'><xsl:value-of select='$y'/></xsl:attribute>
<xsl:value-of select='$name'/>
</text>
</xsl:template>
<!-- Draw a line corresponding to a segment -->
<xsl:template name='segmentDraw'>
<xsl:variable name='from' select='@from'/>
<xsl:variable name='to' select='@to'/>
<xsl:variable name='fromNode' select='key("nodeById",$from)'/>
<xsl:variable name='toNode' select='key("nodeById",$to)'/>
<xsl:variable name='x1' select='round(($width)-((($trlon)-($fromNode/@lon))*10000*$scale))' />
<xsl:variable name='y1' select='round(($height)+((($bllat)-($fromNode/@lat))*10000*$scale*1.6))'/>
<xsl:variable name='x2' select='round(($width)-((($trlon)-($toNode/@lon))*10000*$scale))'/>
<xsl:variable name='y2' select='round(($height)+((($bllat)-($toNode/@lat))*10000*$scale*1.6))'/>
<line>
<xsl:attribute name='x1'><xsl:value-of select='$x1'/></xsl:attribute>
<xsl:attribute name='y1'><xsl:value-of select='$y1'/></xsl:attribute>
<xsl:attribute name='x2'><xsl:value-of select='$x2'/></xsl:attribute>
<xsl:attribute name='y2'><xsl:value-of select='$y2'/></xsl:attribute>
</line>
</xsl:template>
<xsl:template name='scaleDraw'>
<xsl:variable name='x1' select='round(($width)-((($trlon)-(number($bllon)))*10000*$scale))+20' />
<xsl:variable name='y1' select='round(($height)+((($bllat)-(number($bllat)))*10000*$scale*1.6))-20'/>
<xsl:variable name='x2' select='round(($width)-((($trlon)-(number($bllon)+0.0089928))*10000*$scale))+20'/>
<xsl:variable name='y2' select='round(($height)+((($bllat)-(number($bllat)))*10000*$scale*1.6))-20'/>
<text font-family='Verdana' font-size='10px' fill='black'>
<xsl:attribute name='x'><xsl:value-of select='$x1'/></xsl:attribute>
<xsl:attribute name='y'><xsl:value-of select='number($y1)-10'/></xsl:attribute>
0
</text>
<text font-family='Verdana' font-size='10px' fill='black'>
<xsl:attribute name='x'><xsl:value-of select='$x2'/></xsl:attribute>
<xsl:attribute name='y'><xsl:value-of select='number($y2)-10'/></xsl:attribute>
1km
</text>
<line style="stroke-width: 4; stroke-linecap: butt; stroke: #000000;">
<xsl:attribute name='x1'><xsl:value-of select='$x1'/></xsl:attribute>
<xsl:attribute name='y1'><xsl:value-of select='$y1'/></xsl:attribute>
<xsl:attribute name='x2'><xsl:value-of select='$x2'/></xsl:attribute>
<xsl:attribute name='y2'><xsl:value-of select='$y2'/></xsl:attribute>
</line>
<line style="stroke-width: 1; stroke-linecap: butt; stroke: #000000;">
<xsl:attribute name='x1'><xsl:value-of select='$x1'/></xsl:attribute>
<xsl:attribute name='y1'><xsl:value-of select='$y1'/></xsl:attribute>
<xsl:attribute name='x2'><xsl:value-of select='$x1'/></xsl:attribute>
<xsl:attribute name='y2'><xsl:value-of select='number($y1)-10'/></xsl:attribute>
</line>
<line style="stroke-width: 1; stroke-linecap: butt; stroke: #000000;">
<xsl:attribute name='x1'><xsl:value-of select='$x2'/></xsl:attribute>
<xsl:attribute name='y1'><xsl:value-of select='$y2'/></xsl:attribute>
<xsl:attribute name='x2'><xsl:value-of select='$x2'/></xsl:attribute>
<xsl:attribute name='y2'><xsl:value-of select='number($y2)-10'/></xsl:attribute>
</line>
</xsl:template>
<xsl:template name='attribution'>
<a xlink:href='http:www.openstreetmap.org'>
<image x="{number($width)-360}" y="{number($height)-70}" width="150px" height="50px"
xlink:href="http://wiki.openstreetmap.org/images/8/86/Osm_linkage.png">
<title>Copyright OpenStreetMap 2006</title>
</image>
<text font-family='Verdana' font-size='8px' fill='black' x='{number($width)-360}' y='{number($height)-10}'>
Copyright 2006, OpenStreetMap.org
</text>
</a>
</xsl:template>
<xsl:template name='license'>
<!--Creative Commons License-->
<a xlink:href='http://creativecommons.org/licenses/by-sa/2.0/'>
<image x="{number($width)-190}" y="{number($height)-60}" width="88px" height="31px"
xlink:href="http://www.openstreetmap.org/images/somerights20.png">
<title>Creative Commons - Some Rights Reserved - Attribution-ShareAlike 2.0</title>
</image>
<text font-family='Verdana' font-size='8px' fill='black' x='{number($width)-190}' y='{number($height)-20}'>
This work is licensed under a Creative
</text>
<text font-family='Verdana' font-size='8px' fill='black' x='{number($width)-190}' y='{number($height)-10}'>
Commons Attribution-ShareAlike 2.0 License.
</text>
</a>
</xsl:template>
</xsl:stylesheet>
osm-svg-0.3.xsl
<?xml version='1.0' standalone='no'?> <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp ' '> ]> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:key name='nodeById' match='/osm/node' use='@id'/> <xsl:key name='nodeByClass' match='/osm/node[tag[@k="class"]]' use='tag/@v'/> <xsl:key name='segmentByClass' match='/osm/segment[tag[@k="class"]]' use='tag/@v'/> <xsl:key name='segmentUnclassified' match='/osm/segment[count(tag[@k="class"])=0]' use='"unclassified"'/> <xsl:variable name='scale'>0.5</xsl:variable> <xsl:variable name='bllon'>-0.5</xsl:variable> <xsl:variable name='bllat'>51.3</xsl:variable> <xsl:variable name='trlon'>-0.4</xsl:variable> <xsl:variable name='trlat'>51.4</xsl:variable> <xsl:variable name='width' select='(number($trlon)-number($bllon))*10000*$scale' /> <xsl:variable name='height' select='(number($trlat)-number($bllat))*10000*$scale*1.6' /> <xsl:template match="/osm"> <svg:svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" height="{$height}px" width="{$width}px"> <xsl:for-each select='key("segmentByClass","path")'> <xsl:call-template name="path"/> </xsl:for-each> <xsl:for-each select='key("segmentUnclassified","unclassified")'> <xsl:call-template name="unclassified-casing"/> </xsl:for-each> <xsl:for-each select='key("segmentUnclassified","unclassified")'> <xsl:call-template name="unclassified-core"/> </xsl:for-each> <xsl:for-each select='key("segmentByClass","secondary")'> <xsl:call-template name="secondary-casing"/> </xsl:for-each> <xsl:for-each select='key("segmentByClass","secondary")'> <xsl:call-template name="secondary-core"/> </xsl:for-each> <xsl:for-each select='key("segmentByClass","primary")'> <xsl:call-template name="primary-casing"/> </xsl:for-each> <xsl:for-each select='key("segmentByClass","primary")'> <xsl:call-template name="primary-core"/> </xsl:for-each> <xsl:for-each select='key("segmentByClass","motorway")'> <xsl:call-template name="motorway-casing"/> </xsl:for-each> <xsl:for-each select='key("segmentByClass","motorway")'> <xsl:call-template name="motorway-core"/> </xsl:for-each> <xsl:for-each select='key("nodeByClass","town")'> <xsl:call-template name="town"/> </xsl:for-each> <xsl:for-each select='key("nodeByClass","village")'> <xsl:call-template name="village"/> </xsl:for-each> </svg:svg> </xsl:template> <xsl:template name='unclassified-casing'> <xsl:call-template name='drawSegment'> <xsl:with-param name='color' select='"#000000"'/> <xsl:with-param name='stroke' select='"3"'/> </xsl:call-template> </xsl:template> <xsl:template name='unclassified-core'> <xsl:call-template name='drawSegment'> <xsl:with-param name='color' select='"#E6E6E6"'/> <xsl:with-param name='stroke' select='"2"'/> </xsl:call-template> </xsl:template> <xsl:template name='secondary-casing'> <xsl:call-template name='drawSegment'> <xsl:with-param name='color' select='"#000000"'/> <xsl:with-param name='stroke' select='"4"'/> </xsl:call-template> </xsl:template> <xsl:template name='secondary-core'> <xsl:call-template name='drawSegment'> <xsl:with-param name='color' select='"#FDBF6F"'/> <xsl:with-param name='stroke' select='"2"'/> </xsl:call-template> </xsl:template> <xsl:template name='primary-casing'> <xsl:call-template name='drawSegment'> <xsl:with-param name='color' select='"#000000"'/> <xsl:with-param name='stroke' select='"4"'/> </xsl:call-template> </xsl:template> <xsl:template name='primary-core'> <xsl:call-template name='drawSegment'> <xsl:with-param name='color' select='"#7FC97F"'/> <xsl:with-param name='stroke' select='"2"'/> </xsl:call-template> </xsl:template> <xsl:template name='motorway-casing'> <xsl:call-template name='drawSegment'> <xsl:with-param name='color' select='"#000000"'/> <xsl:with-param name='stroke' select='"5"'/> </xsl:call-template> </xsl:template> <xsl:template name='motorway-core'> <xsl:call-template name='drawSegment'> <xsl:with-param name='color' select='"#809BC0"'/> <xsl:with-param name='stroke' select='"3"'/> </xsl:call-template> </xsl:template> <xsl:template name='path'> <xsl:call-template name='drawSegment'> <xsl:with-param name='color' select='"#d79331"'/> <xsl:with-param name='stroke' select='"1"'/> </xsl:call-template> </xsl:template> <xsl:template name='town'> <xsl:variable name='x' select='($width)-((($trlon)-(@lon))*10000*$scale)' /> <xsl:variable name='y' select='($height)+((($bllat)-(@lat))*10000*$scale*1.6)'/> <xsl:variable name='name' select='tag[@k="name"]/@v'/> <svg:text xmlns:svg="http://www.w3.org/2000/svg" font-family='Verdana' font-size='14px' fill='black'> <xsl:attribute name='x'><xsl:value-of select='$x'/></xsl:attribute> <xsl:attribute name='y'><xsl:value-of select='$y'/></xsl:attribute> <xsl:value-of select='$name'/> </svg:text> </xsl:template> <xsl:template name='village'> <xsl:variable name='x' select='($width)-((($trlon)-(@lon))*10000*$scale)' /> <xsl:variable name='y' select='($height)+((($bllat)-(@lat))*10000*$scale*1.6)'/> <xsl:variable name='name' select='tag[@k="name"]/@v'/> <svg:text xmlns:svg="http://www.w3.org/2000/svg" font-family='Verdana' font-size='10px' fill='black'> <xsl:attribute name='x'><xsl:value-of select='$x'/></xsl:attribute> <xsl:attribute name='y'><xsl:value-of select='$y'/></xsl:attribute> <xsl:value-of select='$name'/> </svg:text> </xsl:template> <xsl:template name='drawSegment'> <xsl:param name='color' select='"#ff0000"'/> <xsl:param name='stroke' select='"10"'/> <xsl:variable name='fromNode' select='@from'/> <xsl:variable name='toNode' select='@to'/> <xsl:variable name='x1' select='($width)-((($trlon)-(key("nodeById",$fromNode)/@lon))*10000*$scale)' /> <xsl:variable name='y1' select='($height)+((($bllat)-(key("nodeById",$fromNode)/@lat))*10000*$scale*1.6)'/> <xsl:variable name='x2' select='($width)-((($trlon)-(key("nodeById",$toNode)/@lon))*10000*$scale)'/> <xsl:variable name='y2' select='($height)+((($bllat)-(key("nodeById",$toNode)/@lat))*10000*$scale*1.6)'/> <svg:line xmlns:svg="http://www.w3.org/2000/svg" style="stroke-width:{$stroke}; stroke-linecap:round; stroke: {$color};"> <xsl:attribute name='x1'><xsl:value-of select='$x1'/></xsl:attribute> <xsl:attribute name='y1'><xsl:value-of select='$y1'/></xsl:attribute> <xsl:attribute name='x2'><xsl:value-of select='$x2'/></xsl:attribute> <xsl:attribute name='y2'><xsl:value-of select='$y2'/></xsl:attribute> </svg:line> </xsl:template> </xsl:stylesheet>