@neveldo

Can we list the remaining features / tasks needed for the release of 2.2.0?

• [ ] Fix #361
• [x] Review/Merge PR #337
• [x] Review/Merge PR #344
• [ ] Implements #253/Review/Merge PR #352
• [x] Fix #346/Review/Merge PR neveldo/mapael-maps#44
• [ ] Implements zoomOnCLick/Review/Merge PR (TBD)
• [x] Update Changelog (in progress)
• [x] Update documentation (in progress)

~~Also, should we implement #276 for 2.2.0?~~

Regarding the mapael-maps repo, should it follow the mapael repo version or should it have its own numbering?

Hi,

first I'd like to thank you for this great fork! I really love it!

I have 3 simple questions which I can't seem to fix.

• I'd like to kill all the animations on the map. (mainly just the plot hover) fixed it using: "animDuration": 0, stroke: "transparent"
• I do got zoom on scroll, pinch and 2 buttons, But I'd also like to some when pressed on a plot (relative to the position of the plot of course), or zoom on location of the cursor or touch. Solved: http://jsfiddle.net/bx4wqtu4/20
• Also on initial zoom my plots are not being updated and end up huge :( fixed: $.fn.mapael.defaultOptions.map.defaultArea.attrsHover = {}; $.fn.mapael.defaultOptions.map.defaultPlot.attrsHover = {}; $.fn.mapael.defaultOptions.map.defaultLink.attrsHover = {};

It would be good if Mapael passes the JSHint verification.

http://jshint.com

I suggest the following permanent options:

/* jshint jquery:true, unused:true */

• jquery: defines globals exposed by the jQuery JavaScript library
• unused: warns when a variable is defined and never used (note: this is set to true instead of strict to avoid warning about unused parameters in functions).

The following globals needs to be declared:

/* globals Raphael */
/* globals exports, module, require */ // CommonJS
/* globals define */ // AMD

Also, in a first time, I suggest adding the following options to reduce the number of warnings:

/* jshint laxcomma:true, laxbreak:true, expr:true */

• laxcomma: suppresses warnings about comma-first coding style
• laxbreak: suppresses most of the warnings about possibly unsafe line breakings in your code
• expr: suppresses warnings about the use of expressions where normally you would expect to see assignments or function calls

Number of warning remaining: 34 warnings

There are a lot of Use '===' to compare with .... I think Mapael should indeed use the triple eq more often.

I am trying to make map of custom country (Tbilisi, georgia) with mapael. Everything is ok, but the plots. I cannot coordinate them properly with latitude and languitude. How can I do this? I tryed to do according to usa map but it don't work :( where and what I should put?

saqartvelos_regionebi : { width : 844.8, height : 469.2, latLngToGrid: function(lat, lng, phi1, phi2, midLng, scale) { var pi =Math.PI , midLat = (phi1 + phi2) / 2 , n, tmp1, tmp2, tmp3, x, y, p;

                    n = (Math.sin(phi1 / 180 * pi) + Math.sin(phi2 / 180 * pi)) / 2;
                    tmp1 = Math.sqrt(Math.cos(phi1 / 180 * pi)) + 2 * n * Math.sin(phi1 / 180 * pi);
                    tmp2 = scale * Math.pow(tmp1 - 2 * n * Math.sin(midLat / 180 * pi),0.5) / n;
                    tmp3 = n * (lng - midLng);
                    p = scale * Math.pow(tmp1 - 2 * n * Math.sin(lat / 180 * pi),0.5) / n;
                    x = p * Math.sin(tmp3 / 180 * pi);
                    y = tmp2 - p * Math.cos(tmp3 / 180 * pi);

                    return([x,y]);
                },
                getCoords : function (lat, lon) {
                    var coords = {};
                    if(lat > 43.582132) { // alaska

                        // these are guesses
                        var phi1= 15; // standard parallels
                        var phi2= 105;
                        var midLng = 43.5;
                        var scale = 530;
                        coords = this.latLngToGrid(lat, lon, phi1, phi2, midLng, scale);
                        xOffset = 190;
                        yOffset = 543;
                        scaleX= 1;
                        scaleY= -1;

                    } else if (lon < 40) { // hawaii
                        // Lat: 18°?55' N to 28°?27' N, Lng:154°?48' W to 178°?22' W
                        // (225, 504) to (356, 588) on map

                        // these are guesses
                        var phi1= 0; // standard parallels
                        var phi2= 26;
                        var midLng = 42;
                        var scale = 1280;
                        coords = this.latLngToGrid(lat, lon, phi1, phi2, midLng, scale);
                        xOffset = 115;
                        yOffset = 723;
                        scaleX= 1;
                        scaleY= -1;
                    } else {
                        xOffset = -17;
                        yOffset = -22;
                        scaleX = 10.05;
                        scaleY = 6.26;

                        coords[0] = 50.0 + 124.03149777329222 * ((1.9694462586094064-(lat* Math.PI / 180)) * Math.sin(0.6010514667026994 * (lon + 96) * Math.PI / 180));
                        coords[1] = 50.0 + 1.6155950752393982 * 124.03149777329222 * 0.02613325650382181 - 1.6155950752393982* 124.03149777329222 * (1.3236744353715044- (1.9694462586094064-(lat* Math.PI / 180)) * Math.cos(0.6010514667026994 * (lon + 96) * Math.PI / 180));
                    }
                    return {x : (coords[0] * scaleX + xOffset), y : (coords[1] * scaleY + yOffset)};
                },

Bonjour

D'abord un grand merci pour ce plugin ! Voici mon projet : une carte de France des régions, avec les plots des pref et sous pref. Au click sur une région, zoom et apparition des départements et des noms des villes de cette région, les autres régions deviennent invisibles. Dézoom et retour position initiale au click sur un département, callback au click sur une ville.

Ce projet te parait-il réalisable avec Mapael ? Si oui quelles seraient les principales étapes stp ?

Pour le moment j'ai juste monté une carte avec départements + régions (à partir des js que tu mets à dispo), mais les régions ne sont pas exactement superposées sur la carte des départements...

Merci pour ton aide Bonnes fêtes !

Dear Neveldo,

If I may, I would like to suggest some internal change about the plugin architecture.

Right now, the plugins architecture, from top to bottom, is:

• (some processing for lazy loading and such)
• Creation of a function named Mapael:
  • accepts an Options parameters, and parse it
  • performs a huge processing on each elements targeted
• Listing of Mapael internal function Mapael.xxx() used all along
• Listing of default values Mapael.defaultOptions and so on
• Assign $.fn.mapael to Mapael for jQuery

The biggest problem here is the Mapael function, and the huge foreach processing inside of it.

I would like to suggest to implements a slightly different architecture pattern: https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js The difference will not be so big actually. The main thing is that there will be an Init() function, and that we check against an already existing Mapael on the container.

What do you think?

Thanks for that great plugin. I started to play around with Mapael and found that points plotted far left (approx. <-175) and at the top (approx. >85) are not visible (see figure, where less than the half of the large points is visible). Sure, I can change the viewBox of the svg like $(".map_container").find("svg").attr("viewBox", "-40 -30 1030 530"); which will solve this problem. But this introduces new problems, e.g. with the zoom. Thus I would like to ask if it is possible to have a full view of the map from -180 to 180 and -90 to 90? Thanks.

This has been reported several times by users: #72 and #63

Here is a working example of the problem: http://jsfiddle.net/VqwUZ/361/ We hide the container, draw the map, then show the container. As a result, no text is visible on the legend, and the map is not set to the screen width (a resize of the window is needed to force redraw).

This is related to Raphael issue DmitryBaranovskiy/raphael#760

If you call getBBox() to get the bounding box of a text element when the whole Raphael element is hidden (e.g. if it is inside a <div> with display: none) then the properties of the returned object are all set to NaN rather than the actual bounding box values of the element.

My solution was to avoid using display:none and prefer using this kind of class:

.map_hide {
    /* display:none is doing some weird stuff on SVG
     * Solution: hide it, then position it far away
     */
    position:absolute !important;
    visibility: hidden !important;
    top:-1000px !important;
    left:-1000px !important; 
}

However, when using a CSS framework such as Bootstrap, you may not be able to change the behavior of certain element. I don't know what we can do.

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/

This is a ticket to talk about the event signature.

In neveldo/jQuery-Mapael#85, you said you wanted to clean this signature. I agree it became quite complicated and an overhaul would be good. Before:

$(".container").trigger('update', [updatedOptions, newPlots, deletedPlots, opt]);

After:

var options = {
  'mapOptions' : {}, // was updatedOptions
  'replace' : true/false // whether mapsOptions should entirely replace current map options, or just extend it,
  'newPlots' : {},
  'newLinks' : {},
  'deletedPlots: [],  // was opt.deletedPlots
  'deletedLinks' : [],  // was opt.deletedLinks
  'setLegendElemsState' => '...'  // was opt.setLegendElemsState
  'afterUpdate' => ...,  // was opt.afterUpdate
  'animDuration' : ...  // was opt.animDuration
};
$(".container").trigger('update', [options]);

Several questions:

• shall it be backward compatible ? I think not. It would be hard to maintain.
• what happened to resetPlots/resetAreas ? Actually, I never quite understood their purpose...
• deletedPlots and deletedLinks could better be called to reflect what it is. Like DeletePlotNames and DeleteLinkNames?

Hi,

I am interested in Mapael and develop a website based on it.

I created my own map using Inkscape. But the viewbox generated looks quite strange after extracting the path out and used with Mapael.

A picture worth a thousand words. My map is put on this url http://116.226.62.120:40080/ It may take a moment to complete rendering of the page when you first open it.

As you can see, the height of the map container is too large. I take the viewbox value given by Inkscape output as the width and height options of my map. If I manually change the height option in the javascript file to a lower value, the map is also truncated.

Can you give me suggestions on how to reduce the height of the viewbox while at the same time keeping the entire paths of map to be visible?

Feel free to comment if I didn't explain my issue well.

Before submitting a new issue, please search on the issue tracker first (https://github.com/neveldo/jQuery-Mapael/issues)

Description

I'm trying to add a map to my page with mapael, but it's always turned upside down, how can I fix it?

• Mapael version: Version: 2.2.0
• Browser Name and version: Chrome Lastest version

Hello! I am working on a map for an organization, and had to plot some points onto French Guiana, and was surprised to see France light up for this country on hover. Had to guess and test some values from the world_countries template to splice out the bit that was just the country I needed. I was going off of this https://sustainablesources.com/resources/country-abbreviations/ for the data-id to target French Guiana (GF).

Before submitting a new issue, please search on the issue tracker first (https://github.com/neveldo/jQuery-Mapael/issues)

Description

Target French Guiana (South America) without France (EU).

Expected Behavior

Hover nation, get just this nation hovered. Able to target it as well via the data-id as other nations are currently set up.

Current Behavior

Current behavior: both nations are sharing the same data-id.

Suggested change: Two nations = two unique IDs.

Environment

• Mapael version: 2.2.0
• Raphael version:
• Browser Name and version:
• Operating System and version (desktop or mobile):

hey, i want to create a map with clickable areas and if i click one area its get dyed red and on desktop the hover is darkred. so far so good when i click the next area the first area should get back to his standart(blue and hover dark blue). on desktop is everything ok but on mobile there i have a little problem after first click the area gets darkred and after the second click the firtst area gets red (not blue again) and the second area gets dark red. the problem is fixed if i click after the first click anywhere else and then click the second area but this is not the way to go

` var newData = { 'areas': {}, 'plots': {} };

if (mapElem.attrs.fill == blue || mapElem.attrs.fill == blue_dark) { // go through all areas and dye them blue for (area in point_area) { newData.areas[area] = { attrs: { fill: blue }, attrsHover: { fill: blue_dark, }, }; newData.plots[point_area[area]] = { attrs: { fill: red }, attrsHover: { stroke: "#FFF" }, }; } //dye the clicked area red newData.areas[id] = { attrs: { fill: red }, attrsHover: { fill: red_dark }, }; newData.plots[point_area[id]] = { attrs: { fill: "#FFF" }, attrsHover: { stroke: red }, }; } // if the area is not blue else { for (area in point_area) { newData.areas[area] = { attrs: { fill: blue }, attrsHover: { fill: blue_dark, }, }; newData.plots[point_area[area]] = { attrs: { fill: red }, attrsHover: { stroke: "#FFF" }, }; } } $(".mapcontainer").trigger('update', [{ mapOptions: newData }]); `

Hey, i just initiated an init zoom and its working normal but i cant zoom in and only zoom out if i scroll i the other direction its scrolls out too.

$("#mapcointainer").mapael({ map: { name: "...", zoom: { enabled: true, maxLevel: 15, minLevel: 3, init: { latitude: 49.03486046659013, longitude: 8.710460096762555, level: 10 } }, }

Description

If the splices for the legend increases, the ones at the end gets hidden

Expected Behavior

It should come to next line

Current Behavior

Environment

Chrome

• Mapael version: Latest
• Raphael version: Latest
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): Win10