customize painter attributes

[Jakob Fix]

Hi,

I have this map here: http://oecdco.de/map/map.html

which works fine. Next step is to adapt the colors of the circles to something else.

I note that each circle is served by a specific URL, e.g. http://service.simile-widgets.org/painter/painter?renderer=map-marker&shape=circle&alpha=0.7&width=63&height=63&background=FF9000&label=&pin=false&.png

My question now is: How can I provide my own color for the background attribute? As you can see in the code of the page, I use a SizeGradient coder.

Another question: How can I add a label (for example a number) depending on the size of the circle? If the diameter is greater than 40, set label to 123

Thanks, 

Jakob.

PS: this is a re-formulation of a previous message: https://groups.google.com/forum/#!topic/simile-widgets/gAgRfK-t4N0

[David Karger]

You can define a color coder the same way you define a size gradient
coder; see e.g. the presidents example exhibit on the simile-widgets site.

I don't think there's any way to manage conditional setting of labels.

> --
> You received this message because you are subscribed to the Google
> Groups "SIMILE Widgets" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/simile-widgets/-/GgQU0WnyJh4J.
> To post to this group, send email to simile-...@googlegroups.com.
> To unsubscribe from this group, send email to
> simile-widget...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/simile-widgets?hl=en.

[Jakob Fix]

David, Are you saying that I can use both a SizeGradient coder and a Color coder? I didn't know that. Thanks!

So, I've added a color coder div as can be seen below (and live here: http://oecdco.de/map/map.html), and associated it with the map view, but the color of the circles remains orange (instead of red). What's missing?

        <div id="pub-map">
            <div ex:role="coder"
                ex:coderClass="SizeGradient"
                id="size-coder"
                ex:gradientPoints="1, 10; 1000, 100"> </div>
            <div ex:role="coder"
                ex:coderClass="Color"
                id="color-coder">
                <span ex:color="#ff0000" ex:background="#ff0000">Red</span>
            </div>
            <div ex:role="view"
                ex:viewClass="Map"
                ex:type="satellite"
                ex:latlng=".latlng"
                ex:sizeKey=".publications"
                ex:sizeCoder="size-coder"
                ex:colorCoder="color-coder"
                ex:sizeLegendLabel="publications"
                ex:zoom="2"
                ex:mapHeight="500"
                ex:showHeader="false" ex:showFooter="false" ex:showSummary="false" ex:showToolbox="false">
                <!-- custom popup when circle clicked -->
                <div class="map-lens" ex:role="lens" style="display: none;">
                    <span ex:content=".publications"></span> publication(s) on <b ex:content=".label"></b>
                </div>
            </div>
        </div>

> To post to this group, send email to simile-widgets@googlegroups.com.

> To unsubscribe from this group, send email to

> simile-widgets+unsubscribe@googlegroups.com.

[Jakob Fix]

OK, I've found it myself. An  ex:colorKey  attribute on the map view div is required even though I'm using just one colour (inserted in the snippet below). So, any (existing) property should do.

Great, on to the next problem :)

On Thursday, June 14, 2012 3:29:36 PM UTC+2, Jakob Fix wrote:

David, Are you saying that I can use both a SizeGradient coder and a Color coder? I didn't know that. Thanks!

So, I've added a color coder div as can be seen below (and live here: http://oecdco.de/map/map.html), and associated it with the map view, but the color of the circles remains orange (instead of red). What's missing?

        <div id="pub-map">
            <div ex:role="coder"
                ex:coderClass="SizeGradient"
                id="size-coder"
                ex:gradientPoints="1, 10; 1000, 100"> </div>
            <div ex:role="coder"
                ex:coderClass="Color"
                id="color-coder">
                <span ex:color="#ff0000" ex:background="#ff0000">Red</span>
            </div>
            <div ex:role="view"
                ex:viewClass="Map"
                ex:type="satellite"
                ex:latlng=".latlng"
                ex:sizeKey=".publications"

ex:colorKey=".publications"