neveldo/jquery-mapael

jQuery plugin based on raphael.js that allows you to display dynamic vector maps

jquery-mapael's Issues

Update trigger not executed on mouseout

Situation: I have an area with events bound to mouseover and mouseout, and call $('.map').trigger('update', [ ... ]) (with different options) from those events.

Expected behaviour: The update triggers are executed as the events are fired.

Actual behaviour: The update works fine for mouseover. The mouseout update is not executed until I actually enter the area with my mouse again, which defeats the purpose of triggering an update on mouseout.

This happens regardless of browser used. I use Mapael version 1.0.0 and Raphael version 2.1.2.

edit: for clarification, the actual mouseout event is triggered, it's just the trigger('update', [ ... ]) that is called from inside the event that is not executed.

question events/elements/map

Bonjour Vincent

Comment puis-je faire référence à la carte quand on clique sur un élément, l'évènement click (si j'ai bien compris) ne prend en paramètres que l'élément cliqué, j'aurais besoin lors d'un click sur un élément (path) de la carte, de pouvoir boucler sur tous les autres éléments et de leur affecter des modifications (de couleur, de bordure, etc...) mais je n'arrive pas à parcourir tous les paths sur un click.
Pourrais-tu m'expliquer comment je peux utiliser les fonctions natives de Rapahael telles que Paper.forEach(), Paper.clear()
Par ailleurs, y a t il moyen avec Mapael d'utiliser des 'sets" comme avec Raphael ?
Merci

Add a link on mouseover

Hello,

Is it possible to create a link between two plots when one of them is on mouseover ?
I'm asking that because I only see 'area' and 'plot' in the update section of the documentation.

Thanks,

mapTooltip

I want to thank you for the Mapael plugin, it is perfect for the project I am working on !

I have a question about the "mapTooltip", It works perfectly as the examples show, which is unfortunately not exactly what I would like. I would like to plot the legend in a fix area like this example (which is what I want but use the leaflet plugin) : http://leafletjs.com/examples/choropleth.html

I try to follow this example which use the Raphael library but I didn't suceed : https://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map.

Can you help me ?

Issue on Getting Custom Map Coords

Can you please take a look at this demo (http://jsfiddle.net/Behseini/4D645/3/) and let me know why I am not able to plot lat longs on the map?

I am using BC Canada Map in UTM zone 10 coordinates.

Thanks a lots

SVG Map

Hullo Vicent, I have downloaded an SVG map for Africa (following steps at: http://www.vincentbroute.fr/mapael/create-map.php). I'm stuck from there. I intend to highlight only eight sections (countries): Burundi, Ethiopia, Kenya, Rwanda, Tanzania, South Africa, Uganda, Other countries as rest of Africa. Will appreciate any help offered!
Thank you

pb de positionnement de villes sur une map maison

Hello
Desolee de revenir encore vers toi pour qqchose que tu as déjà expliqué, mais là je ne comprends pas (un peu brain dead sans doute) je n'arrive pas du tout à plotter des villes sur une carte maison.

J'ai refait une map de france sur la meme base que la tienne (plus grande, un chouia differente mais bon la base est la meme). Sur cette carte (fichier inkscape) j'ai un point de reférence que j'ai appelé "REFPOINT".

Le path de ce REFPOINT est comme tous les autres dans mon fichier path.js

Je récupère donc les coordonnées xy de ce REFPOINT pour servir de base au systeme d'equations à résoudre
(REFPOINT.x = 127.15823, REFPOINT.y = 146.25498)

Par ailleurs je retrouve les longitudes les plus à l'ouest et à l'est, idem pour les latitudes nord/sud, comme tu l'indiques

donc mon systeme d'équation à resoudre devrait etre
REFPOINT.x = ax * -4.79539006 + bx
REFPOINT.y = ax * 9.5566463 + bx

ce qui me donne xfactor= 1.3305952 et xoffset = 133.538957

et
REFPOINT.x = ay *51.088851 + by
REFPOINT.y = ay * 41.36453815 + by

qui donnent yfactor = -1.963814 et yoffset = 227.4872802

Mais le résultat n'est pas du tout celui escompté, toutes les villes sont tassées autour de mon point de reference 'REFPOINT'. Pourrais tu m'expliquer stp ?

Merci de ta patience et désolée de revenir encore là dessus, mais je me dis que si je n'y arrive pas je ne dois pas être seule dans ce cas.

Question svp : zoom région puis départements

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 !

Image personnalisée sur un plot

Bonjour,

Mon souci est le suivant : comment remplacer le cercle ou carré d'un plot par une image lors de l'utilisation de newPlots. sachant que mes donnée de plots viennent de ma bdd, j'ai donc réussi a les ajouter mais lorsque je que fais l'update il ne m'affiche pas les images.

exemple de mon code :

$(".maparea4").mapael({

    map: {
        name: "france_departments",
        defaultArea: {
            attrs: {
                fill: "#1b1b1b",
                stroke: "#000000"
            }
        },
        defaultPlot: {
            attrs: {
                opacity: 0.0
            }
        },
        afterInit: function ($self, paper, areas, plots, options) {
            var mapConf = $.fn.mapael.maps[this.name],
                coords = {};

            for (var id in options.plots) {
                coords = mapConf.getCoords(options.plots[id].latitude, options.plots[id].longitude);
                paper.image(options.plots[id].src, coords.x - options.plots[id].width / 2, coords.y - options.plots[id].height / 2, options.plots[id].width, options.plots[id].height);
            }
        }
    },
    plots: {
        'image1': {
            'src': 'http://www.neveldo.fr/mapael/cross-icon.png',
                'latitude': '47.995833',
                'longitude': '-4.097778',
                "text": {
                "content": "Angers Saint Laud"
            },
                'width': 17,
                'height': 15
        },
            'image2': {
            'src': 'http://www.neveldo.fr/mapael/cross-icon.png',
                'latitude': '48.86',
                'longitude': '2.344444',
                'width': 17,
                'height': 15
        }
    }
});

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

    // Update some plots and areas attributes ...
    var updatedOptions = {
        'areas': {},
            'plots': {},
                    afterUpdate: function ($self, paper, areas, plots, options) {
            var mapConf = $.fn.mapael.maps[this.name],
                coords = {};

            for (var id in options.plots) {
                coords = mapConf.getCoords(options.plots[id].latitude, options.plots[id].longitude);
                paper.image(options.plots[id].src, coords.x - options.plots[id].width / 2, coords.y - options.plots[id].height / 2, options.plots[id].width, options.plots[id].height);
            }
        }
    };
    // add some new plots ...
    var newPlots = {
        "Limoge": {
            src: 'http://www.neveldo.fr/mapael/cross-icon.png',
            latitude: 45.834444,
            longitude: 1.261667,
            text: {
                content: "Limoge"
            },
            tooltip: {
                content: "Limoge"
            },
            width: 17,
            height: 15
        },
            "Dijon": {
            size: 60,
            latitude: 47.323056,
            longitude: 5.041944,
            text: {
                content: "Dijon",
                position: "left",
                margin: 5
            }
        }
    }

    $(".maparea4").trigger('update', [updatedOptions, newPlots, {
        animDuration: 1000
    }]);
});

});

Les croix sont bien affichées sur les plots d'origine, mais impossible pour moi de les afficher sur les nouveaux
Avez vous une solution ?

Cordialement,

Yann

mapael and svg-pan-zoom / touch events

Hello!

Great work on the excellent plugin! Are there any plans to implement panning-zooming with touch events? There is an excellent library that besides touch events contains great performance improvements. I have no idea how to connect between the two, but I guess this would sky-rocket the plugin's (already high) popularity!

https://github.com/ariutta/svg-pan-zoom

Ajouter classe à la légende.

Bonjour,

Je vous contacte car je souhaiterais définir une classe pour les différents niveaux de la légende.
C'est à dire que j'aimerais qu'une classe entoure le plot/ l'area et le texte de chaque éléments de la légende. (voir image ci-dessous)

Merci beaucoup pour votre aide. 👍

latitude longitude number

Hi
How i can find latitude and longitude number of a country to put marker on it
Thanks

Zoom / pan enhancement

Hey Vincent,

Your script is great and I already use it in combination with json and serverside requests. One thing I already tried to implement was this raphael plugin to have zooming with the mouse wheel and panning and the best feature - zoom on click to a specific region.
This is my suggestion for an enhancement.
Plugin:
https://github.com/escobar5/raphael-pan-zoom
Example:
http://htmlpreview.github.com/?https://raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index.html

Issue with zoom in the new 1.0

Hi nev, i was testing the new version of the mapael, and the zoom feature is not working dinamically

var coords = $.fn.mapael.maps["argentina_states"].getCoords(lat, lng);
$(".maparea1").trigger('zoom', [8, coords.x, coords.y]);

For some reason the js console is throwing error. I solve this using the older version, but maybe you want to check it for the new version

Load PHP file as tooltip

Hi, I was wondering if there was any way load a PHP file in the tooltip of a plot? Any help would be appreciated. My thinking is that it would end up looking something like this:

'lancaster' : {
    latitude: 40.0399754, 
    longitude: -76.300349,
    tooltip: {content: "<php include 'lancaster.php'; ?>"},
    value: 'lancaster'
}

or maybe even:

tooltip: {content: 'lancaster.php', content-type: PHP}

Open Link in New Tab/Window

It would be helpful if links could be opened in a new tab/window rather than in the map window.

Legend does not appear with IE10

Hello,
Legend area does not appear only in IE10.
Thank you for your help,
Best Regards

how to use raphaels getBBox() inside mapaels afterInit function

Im trying to determine the center of a specific region in my map. Using Raphael its easy to do with getBBox(), but how do I acces the same funcion inside mapaels afterInit function?

Thank you!

Simon

Text color on 'update'

`Hi,

I'm having trouble coloring the text element when using the "update" trigger. Here's my events handlers property :

eventHandlers : {
    click: function(e, id, mapElem, textElem) {
        var selectedArea = {
            'areas': {}
        };
        if (mapElem.originalAttrs['fill-opacity'] == "0") {
            selectedArea.areas[id] = {
                attrs: {
                    'fill-opacity': 1
                },
                text: { // does not work
                    attrs: {
                        'fill': '#ffffff'
                    }
                }
            };
            textElem.attr({fill: '#ffffff'});
        } else {
            selectedArea.areas[id] = {
                attrs: {
                    'fill-opacity': 0
                }
            };
        }
        $map.trigger('update', [selectedArea]);
    }
}

The text property in area doesn't change anything. That's why I'm using textElem.attr({fill: '#ffffff'});.
It works this way but as soon a the mouse leaves the area, my fill color goes away and the original color is used to fill the text element.

Is there a way to disable all the "hover" features ? It makes really hard to customize every element as the hover properties always override custom ones (position, color, etc.).

update plot size after zoom changed

Bonjour Vincent,

Tout d'abord un grand merci pour votre librairie qui est vraiment très simple d'utilisation et super pro !

Est-il possible de modifier la taille des plots lors d'un zoom sur la carte afin que la taille du plot reste proportionnel à l'écran (c.a.d. permettre que la taille des plots soit absolu et non relative au zoom) ?

Cdt

Sébastien

Create My Own Custom Map via svg file

Hello Sir,

I have downloaded your jquery Mapael library which perfectly fits to one of my current projects requirements .

Well the examples are helpful enough to understand the implementation scenarios .

Basically i would like to give me bit of explanation on how i can convert and svg file to the usable js so that i can plot my svg data with your library.

Any help would be really helpfull.

Thanx in advance

How to link the map?

Hello,

I have an intention to use this lovely world map but since I do not know anything about java, I coulnt link the countries in the map. For instance if one clicks on lets say Afghanistan, that should take the user to the Afghanistan page. Is this related to this code?
areas: {
"AF": {
"value": "35320445",
"attrs": {
"href": "#"
},
"tooltip": {
"content": "<span style="font-weight:bold;">Afghanistan</span><br />Population : 35320445"
}

in the examples.js?

Thanks

how get proper coordinates to new map

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)};
                },

Passing json data to options like areas/plots

Congrats for the great library you have provided. I am struggling with the following. It might be just an inability of mine to work properly with Jquery or not supported by mapael.
I want to pass the areas dynamically via Json format. I have placed a testing code just to prove that I have all the variables in order. The map executes in order but there is no alert box. How can I pass the [array of areas objects] to areas for proper compiling? (placed a small pseudo-code)

json = [{"code": "AT", "name": "Austria", "cat": 10 },{"code": "BE", "name": "Belgium", "cat": 6 }};

areas: function(json){
$.each(json, function() {
$.each(this, function(name, value) {
/// create array of areas objects
alert(name + '=' + value);
});
});
return all areas;
},

Any help is welcomed.
Thanks

Multiple tooltip

Hello , I have downloaded and tried, this is great jQuery maps.
How to create multiple tooltip with different class based on country, e.g. France (".mapTooltip-2"), Germany (".mapTooltip-3").
I tried below code but not work:

plots : {
'france' : {
latitude :48.86,
longitude :2.3444,
tooltip: {
cssClass : "mapTooltip-2",
content : "FRANCE"
}
}

Appriciate any help, thanks in advance.

TypeError: paper.safari is not a function

On each hover (in / out), I get this error : TypeError: paper.safari is not a function
Line 976 and 988.

Mapael 1.0.1
Raphaël 2.1.4
Firefox 37.0.2

Missing Michigan

I just now noticed this after implementing your maps on my website.. Michigan is not on the map!

Zoom auto

Vincent,

Tout d'abord, merci pour ton formidable travaille.
Les exemples sur ton site sont très bien.

Je souhaite faire un Zoom automatique sur un département au chargement de la page que j'envoie en paramètre (www.mon_site.fr/affiche_departement.php?dep=06).
J'ai essayé de modifier ta librairie mais impossible d'obtenir un résultat convenable (novice en javascript).

Aurais tu une idée?
Merci.

Issue with submaps

Hi and greetings from Argentina!

First of all, sorry for my bad english/spanglish i'll do the best i can so you can underestand me.
Second, thanks for the free distribution of Mapael, is very helpful and easy to learn how to use.

Now to the main topic, i've done the Argentinan map, with all the states, and manage perfectly the way to put plots with the latitude and longitude.
But my problem is, when i want to pick 2 o 3 states togheter, and make a submap from that, i cant place the plots correctly, i followed exactly the same procedure that i did when i made the Argentinian map but i couldnt go through it.

Any solution to that?

Also, a help for the developers, http://www.quickmath.com/webMathematica3/quickmath/equations/solve/advanced.jsp
A new link to realize 2 variable functions.

Thanks in advance. Diego.

Enlarged area + DOM/TOM

Bravo Vincent, super boulot !

I had to make a map of france once and two features are mandatory, whom I don't see in the documentation :

1. Île-De-France is so small it isn't clickable. A zoomed area should be provided aside the main map. Can we do that ?
2. far country parts (DOM/TOM) should be provided aside the main map. I think you do that already with Corse which is displayed closer to France that it really is. But how do we add any world map fragment to the map ?

If those two features are available, then your lib is a killer !

Not an issue but a question

Salut
Merci pour ce plugin. Juste une question, comment est déterminée la taille de base des cartes ? Par ex, pour les cartes de France ( 'france_departements.js,' ' france_regions.js') la taille est de 'width : 600.08728, height : 626.26221,' d'où sortent ces dimensions (le fichier svg a une taille de 386x296)
D'où ma question comment est calculée (ou extraite du svg?) la taille d'origine de la carte ?
Merci

English version:
Thanks for this plugin.
I'd like to how how do you fix the width and height for the maps. (ie French maps ( 'france_departements.js,' ' france_regions.js') are set with 'width : 600.08728, height : 626.26221,' ), but the svg file is 386x296.
So how do you calculate (or extract from svg?) the original size of the map?

Selection of multiple markers/areas by drawing a rectangle with the mouse

It would be cool if we could select a bunch of markers by simply drawing a rectangle over them.

The implementation could go along the lines of http://stackoverflow.com/questions/14708880/rectangle-selection-of-svg-elements-for-raphael
and http://jsfiddle.net/Wrajf/348/

The cherry on top of the cake would be attaching some callbacks to the selection, signalling the selection has started, is still underway, or has finished.

Examples do not display in Firefox 35.01

Nice plugin but problem in Firefox

How to Convert latitude,longitude to x,y for use getCoords

I not understand to fill the getCoords() function for creating new maps
I creating the SVG map from Inkscape and how to I Convert latitude,longitude to x,y

I would be grateful for any input or suggestions

Map projection equations

Hello,

First of all, I would like to say thanks for the awesome plugin you created.

Would you be able to provide equation examples for each map projection? I think that would be very helpful in your documentation.

Thanks,
Brian

What to do with calculated coordinates?

Hello! Thanks for great jquery plugin. I have read your explanaitions at #11 about how to get coords for the getCoords function. And here is my silly question what to do with calculated coords?

I mean that i used your formula to calculate and my result is:

6 = ax * 19.647687 + bx
483 = ax * -169.932400 + bx

the same procedure i will make for y. And then what? Where to place these datas? Also i misunderstand how to use calculator at http://ncalculators.com/algebra/2-variable-equation-solver.htm. Thank you very much for the answer!

Inversement du comportement de hideElemsOnClick

Bonjour,

Merci beaucoup pour cet excellent plugin.
Voila pour ma part, je souhaiterais inverser le comportement lors d'un hideElemsOnClick.
C'est à dire que mes Areas de base soient en opacité 0.5, et qu'elles passent à l'opacite 1 lors d'un click sur un élément de la légende.

Merci.
Bonne soirée.

basic custom maps

Hi There

I'm not very familiar with SVG or Raphael but am starting a project where Mapael looks to be the best solution. I'll need to create a map from a custom map created by the designer in illustrator showing a stylized layout of the London Boroughs.

If I understand the process for creating new maps correctly I would do the following :

• create the HTMLas per the basic minimal example (obviously including the libraries and plugin)
• I would then need to create a JS file for the map containing a name, width and height as well as elems and getCoords.
• the elems as you've said should come from the SVG file when opened in a text editor.

My actual questions :

1. When creating the SVG map in illustrator should it just be a set of vector shapes (one for each borough), or should there be an entire outline of the region? is this determined by the elements you would like to make interactive on the map ?

2.in this instance, what would I do with the getCoords ? This isn't a geographically accurate map, and I know the designer hasn't considered any kind of specific map projection ? This is a visual UI element that'll link to an info box.

I would be grateful for any input or suggestions, this looks like an incredible project that I'd really like to get to grips with.

Coloration multiple / légende double

Bonjour,

J'utilise actuellement le plugin sur la carte de France pour attribuer plusieurs départements à une personne par exemple 👍

Personne #1 : 62 et 59
Personne #2 : 80, 02, 60
etc...
Jusque la tout va bien, une couleur par personne et on met cette couleur dans les départements. Maintenant j'ai quelques cas ou j'ai le schéma suivant :
Personne #1 : 67, 68
Personne #2 : 54, 57 et 67

Et donc la j'ai un problème imaginons que la personne #1 soit en bleu et la #2 en rouge il faudrait que le 67 soit des deux couleurs (hachuré, dégradé, autre) mais j'ai beau chercher je ne trouve pas de solution :(
Est-ce qu'il y a une possibilité de faire ce genre de "double affectation" ?

Merci d'avance.

issue with text content

Hi,
I need to add a html element in the default plots->text->content..
is it possible....

Handling click event on image

Hi again, i'm triying to execute a function on a click event of a image, here is my code:

actualizarMapa = function(a,b,c,d){ // add some new plots ... var updatedOptions = {'images' : {}}; updatedOptions.images['image1'] = { 'src' : 'img/img02.png', 'latitude' : '-34.27083595', 'longitude' : '-66.54968262', 'width':80, 'height':80 }; updatedOptions.images['image2'] = { 'src' : 'img/img01.png', 'latitude' : '-32.15701249', 'longitude' : '-65.67077637', 'width':80, 'height':80 };

        var newPlots = [];
        // and delete some others ...
        var deletedPlots = [b];
        $(".maparea1").trigger('update', [updatedOptions,newPlots, deletedPlots, {animDuration : 1000, 
            afterUpdate:function(container, paper, areas, plots, options){
                var mapConf = $.fn.mapael.maps['sanluis_departments'], coords = {};
                for (var id in options.images) {
                    coords = mapConf.getCoords(options.images[id].latitude, options.images[id].longitude);
                    paper.image(options.images[id].src, coords.x - options.images[id].width / 2, coords.y - options.images[id].height / 2, options.images[id].width, options.images[id].height);
                }
            }
        }]);
    }

I could put a pointer cursor via CSS, but i cant handle the click event in the image, do you have any ideas? Can i add a new attr to the image object?

Animate zoom

Hi,

Is there any way ton animate zoom when clicking on an area?

Thanks !

I can not update legend

I need to update legend but not have options, any idea.

Paramètres Mapael Population depuis base de données

Bonjour,
Avant tout bravo pour le plugin il est excellent !
Lors de l'utilisation du plugin j'ai utilisé la carte des départements avec la population et la je suis confronté à un problème.
je souhaite récupérer les valeurs de la population depuis une BDD et les insérer avec une boucle.
Pour ce faire je récupère tout mes départements avec leurs noms, numéro et population que je met dans un tableau javascript que je souhaite utilisé dans le paramètre
areas
Voila le Fiddle : http://jsfiddle.net/neveldo/TUYHN/

No option to do transform scales

I am creating a map of Maldives, the map came out nicely, the only problem is that its too large, i want to scale down the map to like 350px , 1200px. i cant find any way to do with Mapael.

Regards

Text positionning more accurate ?

Hello !

First of all, thank you very much for your helpful library ! Good job !

I just want to know if it's possible to position the text more accurate, via coordinates?
I found the textPosition attribute but it is not as accurate as I want.

Thank you very much for your help !

world map with mercator projection

Hi neveldo,

great work !
Is there any parameter to change the projection style ? or should i create my own map ?

Thanks

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

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. Along with plots for things like stairs/escalators (in a mall environment) with it's legend there is 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 tried another workaround which involves another pop up library http://dimsemenov.com/plugins/magnific-popup/documentation.html where I'm trying to show a related popup with the tooltip styling at a fixed position relevant to the area that I click on the legend.

eg http://startupmedia.net/clients/new_maps/L4/

But, here the issue is since I'm unable to add an id to a single text item of the legend, the pop will show for all the legend items including the plot menu and the area menu. In this case, is there a way I can have a id for a single legend menu item. In that case I can call the popup function something like

$('#elem-id').magnificPopup({
items: {
src: '#test-popup',
type: 'inline'
}
});

I hope I was able to explain my situation clearly.

Any ideas/help will be much appreciated!

Thanks,

Arnab

Using CSV Data Instead of Manual Entry

It would be helpful if a CSV file could be used to automatically populate the map. I have a number of datasets with over 1000 plots, which would be obviously too time consume to visualize in map form.

If you could automatically populate the map, matching attributes with CSV columns it would be very helpful.

Setting an image as a plot

Hi, i would like to set an image instead of a circle for my plots (all of them).

Here is my code, but itlooks like it doesn't work, and only display a blue circle instead of my image.

map : {
  name : "paris_districts",
            width : 600,
            defaultPlot : {
                attrs : {
                    src : "http://link/to/my/image/image.jpg"
                }
            }
        }

Do you have a solution for me to resolve this problem ?