Legend showing previous years data.

[TimHerbert]

So I am trying to build an interactive map using this as the basis for the project and I love the code. I am running into an issue however with the legend showing the previous years information if that area isn't defined. Is there any way to reset what the map is showing from the legend before it shows the next year?

You can check out the project here. http://192.249.112.63/~uofimap/

[TimHerbert]

Essentially I don't have all the areas set for every year as that would be a lot more data to make a user download. So when I change years it doesn't reset the colors from the legend. I can use jquery and set the fill of everything but as soon as a user hovers any of the areas it goes back to the legend color.

[neveldo]

Hello @TimHerbert ,

In your case, you have to set the option 'replaceOptions' to true when triggering the 'update' event. In your update object, you need to have to updated areas attributes AND the initial options used at the instanciation of the map. Here is a little sample :

$(function () {
    var mapOptions = {...};
    $(".mapcontainer").mapael(mapOptions);

    $('...').on('click', function () {

        // Clone init options object
        var newMapOptions = jQuery.extend(true, {}, mapOptions);
        newMapOptions.areas["..."] = {
            attrs: {
                fill: "#000"
            }
        };

        $(".mapcontainer").trigger('update', [{
            replaceOptions: true,
            mapOptions: newMapOptions
        }]);
    });
});

Moreover, I have made a pull-request to improve the map update performance when using the replaceOptions option. Could you check your project with this version, and tell me if the performances are better in your case : https://github.com/neveldo/jQuery-Mapael/pull/282 ? (I have checked with your map, and it seems to be a lot better !)

I hope it will help you !

[TimHerbert]

I guess I am confused. I am trying to not have to define every area every year. Is that possible?

I am trying to let the Legend do the fill heavy lifting for me. I just need to 0 it all out when it updates so that it loads that next data set properly. I can load any year properly when it initially loads the map. But as soon as I update the map it has issues with locating some of the data even.

I used some simple jquery to set the fill to #ffffff; So I can see what counties update for every year and the legend seems to be working in that regard. But I click on some of the counties and it doesn't locate the data, and if I hover over any of the previous years counties it sets the color to that it was previously set with the legend.

If I use your example code do I just populate the newMapOptions.areas[] with all of the areas on the map? I have made a list of all of them.

Sorry if this seems at all incoherent it's been a long day for me with other projects. I was hoping for a simple solution for this. I guess I just need some more direction as to how to use the objects to make this work properly. The first year it loads works beautifully. It's just the update function I am having a hard time figuring out how to 0 everything out and bind the data I need to show.

On the brighter note the update in code does seem to help performance.

[neveldo]

I guess I am confused. I am trying to not have to define every area every year. Is that possible?

If I use your example code do I just populate the newMapOptions.areas[] with all of the areas on the map? I have made a list of all of them.

No, of course, in the newMapOptions.areas object, you just have to define the areas you want to update, you don't have to defined all the areas.

The two important things are to set the replaceOptions: true when triggering the update event and to initialize your update object with the object used for mapael instanciation (you have to clone it), Otherwise, all the elements of the maps will be reseted with the default options from mapael.

If it's not clear, I will try to show you a complete code sample.

[TimHerbert]

First off I have to say thank you so much for your support, this really is an amazing tool you've built. It works fantastically for the first year's data set I just gotta get this update bit figured out and add a bit more data to the dataset.

I am actually trying this now. However am still struggling to figure this out. I am probably making it more complicated than it needs to be as I tend to do that. A more complete code example would be helpful. I found https://github.com/neveldo/jQuery-Mapael/issues/86 But couldn't really put the pieces together off that example either.

I have a big object called data I built from a database in php, with years and areas as the object should be built. It simply has a county listed and a value so I can display those values to the screen when someone clicks on them. If you view source you can see it there on the page, really hard to miss as it's a fairly large data set to be posting in this fashion and almost built it to pull it all with JSON as it takes so long to load the whole dataset.

Here is my updateMap function as it stands at the moment. Nothing seems to be updating at all. data is my dataset variable built in object notation for your plugin. knobValue is a global variable that gets set by knob.

function updateMap(){ var newMapOptions = jQuery.extend(true, {}, mapOptions); newMapOptions.areas[data[knobValue]['areas']] = { attrs: { fill: "#f00" } }; $(".world").trigger('update', [{ replaceOptions: true, //mapOptions: data[knobValue], mapOptions: newMapOptions, }]); }

I left the code brackets out as it condensed the code to a minified version for some reason.

[neveldo]

Hi @TimHerbert , sorry for my late answer. Thank you, I'm glad you appreciate Mapael !!

Here is a complete JSFiddle with a legended map : https://jsfiddle.net/neveldo/2wajwcpn/ . I use an object of data clustered by year (with two different areas on each year in order to show you that te update event will reset the default attrs of the areas when there is no value for a specific year).

I hope it will help you !

[TimHerbert]

Amazing! I was making things way to complicated as I figured I was. It works great now! The only remaining thing that isn't working on the map is it appears the old data is hanging around when I click on some of the counties that should be blank they give me the original data. Which I don't want seen.

I'm sure there is something very easy to fix this. I've been racking my brain trying to figure it out here for awhile here today.

Like I tried to basically have it load with omitting the areas: part of the map options and then calling updatemap() in the loadMapComplete() function but it gave me a js error saying mapOptions aren't defined.

[TimHerbert]

Also the support you've given me is so above and beyond for a free to use project! I really appreciate all the help!

[TimHerbert]

I solved this in a round about way. I ended up writing my own function to get the information out of my data object. Used your click function to trigger my function and set a global variable with the id of the clicked item. It updates now with the knob or click and works like a charm.

Thank you so much for your help on this!

[neveldo]

You are welcome @TimHerbert , I'm glad it helped you to achieve your interactive map !

[TimHerbert]

So I have ran into another issue once I showed it to the client. He wants to have the state lines more defined. I actually cheated defining those lines by using opacity. I laid down all the states first then had the counties laid over the top of them.

Is there any way to just add the states over the top of the counties and keep the counties selectable?

[TimHerbert]

I discovered the afterInit and extend paper option and tried to go that route but no matter what I do I don't see any of the shapes on my map.

[TimHerbert]

It seems to be that I can't extend paper with the way I have the mapOptions in it's own little variable. I probably need to call it inside of the Mapael object itself.

[TimHerbert]

Nevermind I figured it out. It was just where and how I was calling the afterInit function. Thanks again for such an amazing library!

[neveldo]

I'm glad you have resolved your issue ! (feel free to open new thread if the issue is not related to the current one)

Merry Christmas ;)