Hi Simon,
> Hope you guys don't mind me asking another question about carto.net
> tools here.
no problem
>
> I would like to implement some "axes" to my "map" such that they
scale
> with the map yet are always visible at the top and sides. It looks
> like the loadProjectSpecific function is the place to do this.
However,
> I'm not sure where I should place the axes : as two more svg groups
> outside the main map or within the main map. Also, which
attributes I
> should change after the main is zoomed/panned.
Yes, loadProjectSpecific() is called after each zoom and pan and is
the appropriate location to trigger any updates that need to happen
after each zoom and pan, e.g. creating/replacing elements, changing
stroke-widths, etc.
As indicated in the other mail I sent you (offlist) I would place the
gridlines within the mainMap svg file and recreate the gridlines and
labels after each zoom/pan.
This would be a possible group layout to accomplish this:
I would probably write a separate function, something like
"drawGrid()" that draws the grid lines and labels after each zoom and
pan. After each zoom and pan, the temporary gridlines and labels
would be removed and recreated. This also allows to have a more dense
grid when zooming in and a wider grid when zooming out.
I would propose the following group setup:
<svg id="mainMap">
<g id="mainMapGroup">
<g id="dataGroup">
<!-- here is all the data (rects, etc.) -->
</g>
<g id="gridLines" pointer-events="none">
<g id="gridLinesTemp">
<! -- this group would contain the gridlines,
gridLinesTemp would be removed and recreated after each zoom and pan -
->
</g>
</g>
</g>
</svg>
<svg id="referenceMap">
<use xlink:href="#dataGroup pointer-events="none" />
</svg>
You can also show the rects (data) in the reference map by linking
the dataGroup into the referenceMap and setting the pointer-events to
none, in order to supress the interactivity. Note that the id links
to dataGroup and not to mainMapGroup, because mainMapGroup also has
transformations attached sometimes, which you don't want to reflect
in the referenceMap.
For creating the gridlines and labels you may want to use some factor
in relation to the myMainMap.curWidth property for determining stroke-
width and font-size. First, the function would delete the group
"gridLinesTemp", then it would create a new group "gridLinesTemp",
create all the gridlines and labels, append them to gridLinesTemp and
append gridLinesTemp to gridLines. In my experience it is faster to
delete a whole group at once, rather than deleting individual
elements. Also, note the use of the pointer-events attribute on the
gridlines group. The gridlines are just visual reference and
shouldn't react to mouse events. Since they are on top of the
graphics, its better to set pointer-events to "none".
Note that this is just one approach, it might not be the best and
only one.
Another approach would be to have several gridline/label groups with
different densities (maybe 3 to 4) and after each zoom and pan you
would display one or the other, depending on zoom level by setting
the display attribute. Stroke-widths and font-sizes would have to be
adjusted again, in relation to myMainMap.curWidth.
Hope this helps,
Andreas
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
