Créer carte personnalisée

**stefcio** · 03/04/2013, 11h54

bonjour

Je souhaite créer une carte personnalisée pour géolocaliser les adhérents de mon association.
j'ai une base SQL avec adresse complète des adhérents

Je suis souhaite utiliser openstreetmap (pour plein de raisons

)

du coup il faut que j'utilise
nominatim pour récupérer les coordonnées longitude et latitude
et OpenLayers pour l'affichage

je bloque sur deux choses :
1 - comment réinjecter les coordonnées dans ma base où j'ai l'adresse de mes adhérents
2 - j'ai beau suivre ce tuto http://fsery.fr/spip.php?article55 je n'arrive pas à afficher plusieurs points sur ma carte.

Est ce que quelqu'un peut me donner un coup de main?

**NoSmoking** · 03/04/2013, 19h49

Bonjour,
je déplace vers le forum javascript, mais il conviendrait que tu nous mettes le code qui te pose problème.

**stefcio** · 03/04/2013, 23h10

voilà je vous donne des plus d'infos:

je n'avais jamais travaillé avec du json et java (le principal problème doit être là

)

j'utilise ce code et tout fonctionne

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var couche_markers = new OpenLayers.Layer.Markers("Markers");
 
var dimension_icon = new OpenLayers.Size(24,24);
var offset_icon = new OpenLayers.Pixel(-(dimension_icon.w/2), -dimension_icon.h);
var icon = new OpenLayers.Icon('icon.png', dimension_icon, offset_icon);
 
 
lonlat=new OpenLayers.LonLat(55.44834,-20.87729).transform(
          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
          new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
        );
 
var mon_marker=new OpenLayers.Marker(lonlat, icon);
 
couche_markers.addMarker(mon_marker);
 
la_carte.addLayer(couche_markers);

mais la boucle proposé en dessous de l'article noté dans mon poste ne fonctionne pas!
visiblement

pour la géolocalisaton je souhaiterai créer une boucle avec ce type d'url

http://nominatim.openstreetmap.org/s...is&format=json

pour récupérer le coordonnées longitude et latitude des adresses de mes adhérents et d'enregistrer cela dans un champs SQL

comment récupérer le champs json, prendre l'élément qui va bien et actualiser ma base

Merci pour votre aide

**dragonno** · 04/04/2013, 10h54

pour géolocaliser les adhérents de mon association.

Le veulent-ils vraiment aussi ? Tu dois te poser la question d'abord non ?

Car j'imagine que c'est pour être affiché sur ton site, et les utilisateurs n'ont peut-être pas à savoir les données des autres utilisateurs.
En tous cas, perso, si j'étais inscris dans ton assoc, je ne voudrais pas que mon lieu d'habitation soit affiché sur un site internet qui plus est sur une carte géographique, sans mon consentement.

**stefcio** · 04/04/2013, 19h52

je te remercie dragonno pour ta remarque, mais le principe de mon assoc est de faciliter la mise en relation entre personne, le lieu affiché ne correspond pas au lieu d'habitation, et la page sera accessible que sur partie privé

j'avance tranquillement sur mon code

maintenant la boucle fonctionne

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
for (i = 0; i < adherent.length; i++){
 
var dimension_icon = new OpenLayers.Size(24,24);
var offset_icon = new OpenLayers.Pixel(-(dimension_icon.w/2), -dimension_icon.h);
var icon = new OpenLayers.Icon('icons/up.png', dimension_icon, offset_icon);
 
lonlat=new OpenLayers.LonLat(adherent[i][2], adherent[i][1]).transform(
          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
          new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
        );
 
var mon_marker=new OpenLayers.Marker(lonlat, icon);
 
couche_markers.addMarker(mon_marker);
mon_marker.icon.imageDiv.title = adherent[i][0];
 
   }

où mes coordonnées sont dans un tableau imbriqué.
maintenant j'ai un title sur chaque point, mais quitte à être gourmand je souhaiterai avoir une info-bulle
comment faire?

visiblement pour pour récupérer les coordonnées je vais être obligé de coder un bout d'ajax pour réinjecter dans ma base SQL les coordonnées récupérées via nominatim, c'est ça?

merci d'avance

**NoSmoking** · 04/04/2013, 20h26

où mes coordonnées sont dans un tableau imbriqué.
maintenant j'ai un title sur chaque point, mais quitte à être gourmand je souhaiterai avoir une info-bulle
comment faire?

je ne connais pas openLayers mais pas mal d'exemples sont visiblement disponibles et il existe la documentation officielle

visiblement pour pour récupérer les coordonnées je vais être obligé de coder un bout d'ajax pour réinjecter dans ma base SQL les coordonnées récupérées via nominatim, c'est ça?

je crois qu'il n'y aura pas moyen d'y échapper, mais c'est peut être également faisable coté serveur, je parle de la récupération des infos au format jSon.

**dragonno** · 04/04/2013, 22h53

Compris, stefcio

Le principal c'est que tu aie l'autorisation de l'utilisateur sinon cela ne plaira pas à la CNIL^^

Pour ton infobulle, je suppose qu'à l'endroit où se situe un utilisateur sur la carte, il y a un élément HTML pouvant supporter événement "hover" ?
Si ce n'est pas le cas, tu peux placer un petit div transparent par dessus, qui supportera le "hover" et fera apparaître un div caché servant d'info-bulle.

**stefcio** · 09/04/2013, 10h05

bonjour

les choses progressent
avec ce bout de code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 // gestion icone
    var icon = new OpenLayers.Layer.Vector('icone', {
        styleMap: new OpenLayers.StyleMap({
            externalGraphic: 'icons/up.png',
            graphicWidth: 24, graphicHeight: 24, graphicYOffset: -12, graphicYOffset: -12,
            title: '${tooltip}'
        })
    });
 
//boucle mutlipoint en fonction du nombre de champs dans le tableau adherent
 
for (i = 0; i < adherent.length; i++){ 
 
    // position a marquer
    var point = new OpenLayers.Geometry.Point(adherent[i][10], adherent[i][11])
        .transform('EPSG:4326', 'EPSG:900913');
 
    // liaison point/icone/popup 
    icon.addFeatures([
        new OpenLayers.Feature.Vector(point, {tooltip: 'OpenLayers'})
    ]);
 
    // declaration du popup avec son contenu
    var popup = new OpenLayers.Popup.FramedCloud("Popup", 
        point.getBounds().getCenterLonLat(), null,
        ''+adherent[i][3]+' '+adherent[i][4]+'<br>'+adherent[i][5]+'<br>'+adherent[i][6]+'<br>', null,
        true // <-- true si on veut fermer le popup avec le bouton (X), false sinon
    );
}
    // au final on créé la carte dans la div map
	//declaration du centre de la carte
	var centre=new OpenLayers.LonLat(0,0) // Centre de la carte
	centre=centre.transform(
           new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
           new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
         );
	var zoom=11;
 
    carte = new OpenLayers.Map({
        div: "map", projection: "EPSG:900913",
        layers: [new OpenLayers.Layer.OSM(), icon],
    });
	carte.setCenter(centre,zoom);	
    carte.addPopup(popup);

j'arrive :
- à afficher mes points sur la carte
- centrer et zoomer sur un point déterminé

je bloque toujours sur le popup, avec ce code le popup n'apparait que sur le dernier point, et les points ne sont pas cliquable pour faire apparaitre les popup
de plus je bloque toujours sur la récupération à la volé des données lonlat via nominatim

**dragonno** · 09/04/2013, 12h02

C'est bizarre que tu mettes 10 et 11 dans ton tableau adhérents, ces valeurs ne changent pas en fonction de l'adhérent ?
Car là ces valeurs sont fixes.

Et en général quand on a une suite d'identités (ici un popup) et qu'on ne voit toujours que le dernier, il y a deux causes :

1) Soit chaque identité écrase la précédente et donc on ne voit que la dernière.
2) Soit toutes les identités ont la même référence et donc on voit que la dernière déclarée.

**NoSmoking** · 09/04/2013, 18h33

Envoyé par dragonno

C'est bizarre que tu mettes 10 et 11 dans ton tableau adhérents, ces valeurs ne changent pas en fonction de l'adhérent ?

c'est en fait un tableau de tableau adherent[i][10].

Ton soucis vient qu'au moment de l’exécution des fonctions, tu fais appel aux derniers éléments initialisés, regarde ce que valent tes objets à la sortie de la boucle.

Regarde ce qu'il est raconté dans la faq googleMap, tu as le même problème

http://javascript.developpez.com/faq...age=InfoWindow

http://javascript.developpez.com/faq...wDernierMarker
...la solution devrait être la même.

**dragonno** · 09/04/2013, 20h58

Thank's NoSmoking

Mais je savais que c'était un tableau 2D, je faisais remarquer que ces valeurs 10 et 11 ne bougeaient pas, et s'il ne fait pas bouger l'indice (à part "i") il aura toujours la même valeur dans la case du tableau.
Ou alors j'ai mal suivi et ce ne sont pas des indices de tableaux

**stefcio** · 10/04/2013, 00h19

Merci NoSmoking pur les liens je vais regarder dans ce sens et je vous tiens au courant

@dragonno ; un exemple illustrera peut être mieux
[[toto,titi],[tata,tutu],]
i correspond aux cellules du premier tableau
[2] la deuxième cellule du tableau imbriqué du coup dans la boucle [i][2]
j'ai deux valeurs titi et tutu

si le deuxième tableau correspond au champs nom, prenom j'obtiens le prenom de tous mes adhérents

je reviens vers vous pour vous tenir au jus.

**dragonno** · 10/04/2013, 14h46

Ok, merci de ta précision stefcio

**stefcio** · 11/04/2013, 19h39

ramant un peu pour trouver la solution, même en regardant tes liens NoSmoking

J'ai poursuivi mes recherches et je suis tombé sur un exemple inspiré de la localisation de POI.

ça marche!

j'ai enfin une carte avec popup

deux problèmes subsistent :

- le centre et le zoom sur la carte (il faut que je continu à gratter)
- la gestion des longitudes et latitude avec les données présentent en base.

pour créer ma carte, il faut que je fasse un fichiers TXT avec les différentes données.
il faut donc que j'arrive à mettre dans ce fichier longitude et latitude récupérer par via nominatim (donnée json)
exemple

http://nominatim.openstreetmap.org/s...is&format=json

comment récupérer les données, les faire transiter vers une variable php pour que je puisse créer mon fichier?

Merci encore
Promis une fois finalisé je ferai une page sur un wiki en expliquant l'ensemble

**dragonno** · 11/04/2013, 21h39

cool

N'oublie pas si tu as des données de membres dans un fichier txt de placer ce fichier dans un dossier sécurisé, question de principe et respect pour les utilisateurs

Créer carte personnalisée

JavaScript

Discussions similaires

Partager

Partager