Search code examples
javascriptjquerysvgraphaelmapael

Raphael/Mapael - plots and areas controlled by a single legend

I've been working on few custom SVG maps based on Raphael.js but Mapael is the library that I'm working with. I have setup a jsfiddle of the example to be better explain my.

http://jsfiddle.net/arnabsaha/3jNE9/

As you can see, I have mapped the different paths to show tooltips of different descriptions. Alongwith plots for things like stairs/escalators (in a mall environment) with it's legend. And another legend for the different sections/paths of the map.

Now what I need to do is find a way where for eg. click on the legend item to hide/show a path/area of the map (which is achieved) along with the tooltip description that is shown when hovered on that particular path/area.

Now, after trying few unsuccessful things, I was thinking of a workaround where clicking on the legend item for the path/area to also hide/show a plot with a text description attribute. For eg. In the fsfiddle example, click on 'Azul by moussy', (first item in the areas legend) the area is highlighted, along with this, if I could also hide/show a plot (with text attribute) which is the description for that particular path/area?

I hope I was able to explain my situation clearly.

Any ideas/help will be much appreciated!

Thanks,

Arnab

code snippet:

$(function(){
$(".maparea6").mapael({
    map : {
        name : "world_countries",
        zoom: {
            enabled: true,
            maxLevel : 10
        },
        defaultPlot: {
            size: 10
        },
        defaultArea: {
            attrs : {
                stroke : "#000", 
                "stroke-width" : 0.5
            }
        }
    },
    legend : {
        area : {
            display : true,
            title :"", 
            slices : [
                    {

                    max :63,
                    min :61, 
                    attrs : {
                        fill : "#f0eeb5"
                    },
                    label :"AZUL by moussy"
                }
                ,
                {

                    max :11,
                    min :9, 
                    attrs : {
                        fill : "#f0eeb5"
Solution

  • If anyone is interested, $(".areaLegend svg text:eq(X)"); allows you to add events on the legend items but this solution isn't very handy to use ...

    And, the paths and plots already have this feature, they can be easily selected ie : $("[data-id='path_ad']"); in order to add some events or anything on them.

    And the developer's github: https://github.com/neveldo/jQuery-Mapael