Discussion :

[a.collery]

Bonjour,

Il me faudrait le résultat suivant:

Et je suis actuellement à l'étape suivante( voici mon code):
http://jsfiddle.net/rzrdh0m0/

En faite, je ne sais pas trop comment je pourrais rattacher mes noms de villes à mes points.
Merci pour votre futur aide.

[SylvainPV]

Raccrocher du CSS à des données ne veut rien dire, le CSS agit sur le contenu HTML qui est une représentation de ces données.

Tu crées une <div> pour chaque agence que tu ajoutes sur la carte. Il te suffit de créer à la place la structure curseur + nom de ville tel que présenté dans le coin en haut à gauche.

Voilà pour débuter comment ajouter le paragraphe avec le nom de la ville:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
     $.each(monJSON, function (nom, data) {
        $agence = $('<div />').css({
            'height': '41px',
                "width": "35px",
                'display': 'inline-block',
                'position': 'absolute',
                'top': data.coordy + 'px',
                'left': data.coordx + 'px',
                "z-index": 2
        }).addClass('agence ville1').data('agence', nom);
        $("<p />").text(nom).appendTo($agence);
        $("#carte1").append($agence);
    });

[a.collery]

Merci.

Et après pour avoir le style au nom de ville, comment faire svp?

[SylvainPV]

Un petit effort, cherche par toi-même. Tu as le code jQuery pour ajouter les éléments à la page, et tu as un exemple d'éléments déjà stylisés. Regarde comment j'ai fait pour ajouter l'élément <p> et fais la même chose pour ta div curseur.

[danielhagnoul]

Amélioration du code jQuery : http://jsfiddle.net/rzrdh0m0/6/

[a.collery]

Pourquoi mes points de ma 2ème carte("Nord-pas-de Calais") ne sont pas attachés à celle-ci alors qu'on fait un appendTo( "#carte2" );

Voici mon code: http://jsfiddle.net/jpns1syu/4/

[SylvainPV]

Ils sont bien attachés à #carte2, tu peux le vérifier avec un inspecteur du DOM. Le problème est que l'image de la carte a un positionnement statique tandis que les points sont positionnés de manière absolue. D'après ton JSON, les coordonnées renvoyées nécessitent que les deux cartes soit côte à côte horizontalement.

[a.collery]

Quelle position devrais-je donner à mes points et à ma carte? svp

[SylvainPV]

Idéalement ils devraient être relatifs au coin en haut à gauche de l'image. Ainsi en ajoutant position:relative; à l'élément carte, tu auras l'assurance qu'ils sont toujours bien positionnés peu importe si la carte passe à la ligne ou non.

[a.collery]

Merci