Créer carte personnalisée

Version imprimable

03/04/2013, 11h54
stefcio

Créer carte personnalisée

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?
03/04/2013, 19h49
NoSmoking

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

créer carte personnalisé

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:

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

04/04/2013, 10h54
dragonno

Citation:

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.

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:

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

04/04/2013, 20h26
NoSmoking

Citation:

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

Citation:

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.
04/04/2013, 22h53
dragonno

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.

bonjour

les choses progressent
avec ce bout de code

Code:

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

09/04/2013, 12h02
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 ?
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.
09/04/2013, 18h33
NoSmoking

Citation:

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
:fleche: http://javascript.developpez.com/faq...age=InfoWindow
:fleche: http://javascript.developpez.com/faq...wDernierMarker
...la solution devrait être la même.
09/04/2013, 20h58
dragonno

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 ;)
10/04/2013, 00h19
stefcio

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.
10/04/2013, 14h46
dragonno

Ok, merci de ta précision stefcio ;)
11/04/2013, 19h39
stefcio

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 :D
11/04/2013, 21h39
dragonno

cool :ccool:

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