Problème en ajoutant des markers sur la carte IGN

**cuongpham** · 22/04/2013, 11h24

Bonjour,
J'ai un problème en ajoutant un marker sur la carte IGN. Je pense qu'il y a une erreur dans mon code.
Tout d'abord, j'utilise Geoportal.Load() pour charger la carte IGN:

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
  var map = null;
            window.onload= function() {
                map = Geoportal.load(
                         // div's ID:
                         'viewerDiv',
                         // API's keys:
                         ['6mp5i31tq3ghlu2yxxocxz9v'],
                         {// map's center :
                                        // longitude:
                                        lon:4.06747,
                                        // latitude:
                                        lat:48.27828
                         },
                         //zoom level 
                         10,
                         //options
                         {
                         	type:'js',
                         	viewerClass:Geoportal.Viewer.Default,
                         	label:'LHôpital Hauts-Clos',
							layers:['GEOGRAPHICALGRIDSYSTEMS.MAPS', 'TRANSPORTNETWORKS.ROADS', 'CADASTRALPARCELS.PARCELS', 'BUILDINGS.BUILDINGS'],
							layersOptions:{
						        'TRANSPORTNETWORKS.ROADS': {
						          visibility: false,
						          opacity: 0.45,
						          minZoomLevel: 1,
						          maxZoomLevel: 15
						        },
						        'CADASTRALPARCELS.PARCELS': {
						          visibility: true,
						          minZoomLevel: 16,
						          maxZoomLevel: 20
						        },
						        'BUILDINGS.BUILDINGS': {
						          visibility: false,
						          opacity: 0.9,
						          minZoomLevel: 12,
						          maxZoomLevel: 15
						        }
							}
                         }
                         );  
}

Pour ajouter un marker, j'ai utilisé OpenLayers.Layer.Markers():

Code :

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

1
2
3
4
5
6
7
8
9
10
var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
				var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
				var position       = new OpenLayers.LonLat(4.06747,48.27828).transform( fromProjection, toProjection);
				
				var size = new OpenLayers.Size(15,10);
				var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);	    
				var icon = new OpenLayers.Icon('green1.png',size,offset);
		    	var couche_markers = new OpenLayers.Layer.Markers("Markers");
			    map.addLayer(couche_markers);			
				couche_markers.addMarker(new OpenLayers.Marker(position,icon));

Ca marche pas, dans le firebug, j'ai vu: "OpenLayers.Layer.Markers is not a constructor".
Donc, j'ai essayer: OpenLayers.Layer.Vector()

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
var layerStyle = new OpenLayers.Style({
					externalGraphic: "green.png",
					graphicWidth: 32,
					graphicHeight: 32,
					graphicXOffset: -16,
					graphicYOffset: -32,
					pointRadius: 16    
			    });
			    var couche_markers = new OpenLayers.Layer.Vector("Markers");
			    map.addLayer(couche_markers);			  
			    var layerStyleMap = new OpenLayers.StyleMap({'default': layerStyle});
			    couche_markers.styleMap = layerStyleMap;
			    var features = [];
			 
			    var lonlat=new OpenLayers.LonLat(4.06730,48.27822).transform(
			        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
			        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
			    ); 
				var mon_marker = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat));			    
			    features.push(mon_marker);
			    couche_markers.addFeatures(features);

Mais, ca marche pas aussi, et dans le firebug, j'ai vu: "Image corrupt or truncated:". J'ai changé "externalGraphic:green.png" par un link extérieur mais ca marche pas toujours.

Dans tous les deux cas, la carte est affichée bien mais je ne vois par les markers.

Merci pour vos aides.

**mga_geo** · 22/04/2013, 11h38

Une petite url ?

**cuongpham** · 22/04/2013, 12h07

Envoyé par mga_geo

Une petite url ?

Voila mon code complet:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
	<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>API Geoportail - votre carte personnelle</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
            <style type="text/css"><!--/*--><![CDATA[/*><!--*/
        div#viewerDiv {
            width:1300px;
            height:700px;
            background-color:white;
            background-image:url(http://api.ign.fr/geoportail/api/js/2.0.0beta/theme/geoportal/img/loading.gif);
            background-position:center center;
            background-repeat:no-repeat;
        }
        /*]]>*/--></style>
      </head>
      <body>
        <div id="viewerDiv"></div>
        <script>
        	// var markers = new OpenLayers.Layer.Markers("Markers");
        	var map = null;
            window.onload= function() {
                map = Geoportal.load(
                         // div's ID:
                         'viewerDiv',
                         // API's keys:
                         ['6mp5i31tq3ghlu2yxxocxz9v'],
                         {// map's center :
                                        // longitude:
                                        lon:4.06747,
                                        // latitude:
                                        lat:48.27828
                         },
                         //zoom level 
                         10,
                         //options
                         {
                         	type:'js',
                         	viewerClass:Geoportal.Viewer.Default,
                         	label:'LHôpital Hauts-Clos',
							layers:['GEOGRAPHICALGRIDSYSTEMS.MAPS', 'TRANSPORTNETWORKS.ROADS', 'CADASTRALPARCELS.PARCELS', 'BUILDINGS.BUILDINGS'],
							layersOptions:{
						        'TRANSPORTNETWORKS.ROADS': {
						          visibility: false,
						          opacity: 0.45,
						          minZoomLevel: 1,
						          maxZoomLevel: 15
						        },
						        'CADASTRALPARCELS.PARCELS': {
						          visibility: true,
						          minZoomLevel: 16,
						          maxZoomLevel: 20
						        },
						        'BUILDINGS.BUILDINGS': {
						          visibility: false,
						          opacity: 0.9,
						          minZoomLevel: 12,
						          maxZoomLevel: 15
						        }
							}
                         }
                         );   
                var layerStyle = new OpenLayers.Style({
					externalGraphic: "http://projects.eutech-ssii.com/attachments/1731/green.png",
					graphicWidth: 32,
					graphicHeight: 32,
					graphicXOffset: -16,
					graphicYOffset: -32,
					pointRadius: 16    
			    });
			    var couche_markers = new OpenLayers.Layer.Vector("Markers");
			    map.addLayer(couche_markers);			  
			    var layerStyleMap = new OpenLayers.StyleMap({'default': layerStyle});
			    couche_markers.styleMap = layerStyleMap;
			    var features = [];
			 
			    var lonlat=new OpenLayers.LonLat(4.06730,48.27822).transform(
			        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
			        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
			    ); 
				var mon_marker = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat));			    
			    features.push(mon_marker);
			    couche_markers.addFeatures(features);  
			    
			    /*
                var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
				var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
				var position       = new OpenLayers.LonLat(4.06747,48.27828).transform( fromProjection, toProjection);
				
				var size = new OpenLayers.Size(15,10);
				var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);	    
				var icon = new OpenLayers.Icon('green1.png',size,offset);
		    	var couche_markers = new OpenLayers.Layer.Markers("Markers");
			    map.addLayer(couche_markers);			
				couche_markers.addMarker(new OpenLayers.Marker(position,icon)); */  

          };
               
	           					
				
				
				
		</script>
		<script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/2.0.3/Geoportal.js"></script>
		<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/2.0.0beta/Geoportal.js"><!-- --></script>
	</body>
</html>

**mga_geo** · 22/04/2013, 14h20

Geoportal.load ne rend pas un objet "map" ! Il faut corriger ce début de code.

Il y a un chargement de trop:

**cuongpham** · 22/04/2013, 14h46

Envoyé par mga_geo

Geoportal.load ne rend pas un objet "map" ! Il faut corriger ce début de code.

Il y a un chargement de trop:

Normalement, on utilise un de deux ces chargement. J'ai déjà essayé comme te dis, et quelque fois, il y a une erreur avec OpenLayer (OpenLayer in not defined).
Pour le début, on peut utiliser quel fonction pour rend un objet "map". Je n'est pas familier avec les applications géographiques.

**gcebelieu** · 22/04/2013, 15h57

Pour l'objet map, on l'obtient comme ceci :

Code :

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

1
2
3
var iv= Geoportal.load( ...) ;
var map= iv.getViewer().getMap() ;

Sinon, le code qui est situé après l'appel à Geoportal.load() doit être rassemblé dans une fonction qui doit être référencée avec l'option onView :

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
function initMap() {
  var layerStyle = ...
   ...
  couche_markers.addFeatures(features);
}

windows.onload=  function () {
  iv= Geoportal.load(
            ...
            //options
            {
               onView: initMap,
               type:'js', 
               ...
            }
  ) ;
}

**mga_geo** · 23/04/2013, 06h45

J'ai effectué de nombreuses modifications et cela semble mieux : http://atlasnw.free.fr/geoportail/ex...cuongpham.html
surtout avec une bonne clé !

**cuongpham** · 23/04/2013, 15h08

Envoyé par mga_geo

J'ai effectué de nombreuses modifications et cela semble mieux : http://atlasnw.free.fr/geoportail/ex...cuongpham.html
surtout avec une bonne clé !

Parfait, ca marche. Merci bien

**cuongpham** · 23/04/2013, 17h19

Envoyé par gcebelieu

Pour l'objet map, on l'obtient comme ceci :

Code :

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

1
2
3
var iv= Geoportal.load( ...) ;
var map= iv.getViewer().getMap() ;

J'ai essayé la deuxième méthode, et ca marche bien.
Mais, je doit ajouter les nouveaux marquers chaque 5s. Donc, tout d'abord je veux charger l'objet "map", et utilisé fonction setInterval() pour relancer la fonction d'ajouter les marquers chaque 5s.
J'ai utilisé la première méthode, mais il y a une erreur: "Geoportal is not defined". C'est un peu bizarre.

**mga_geo** · 23/04/2013, 22h22

J'avais fait une animation : http://atlasnw.free.fr/geoportail/ex...animation.html

**cuongpham** · 24/04/2013, 15h39

Envoyé par mga_geo

J'avais fait une animation : http://atlasnw.free.fr/geoportail/ex...animation.html

Est-ce qu'il est possible d'ajouter les markers avec les icons différentes? J'ai le fait par utiliser les différentes "couche_markers" (map.addLayer(couche_markers1), map.addLayer(couche_markers2)...) mais ca marche pas, je ne vois pas les icons.

**gcebelieu** · 02/05/2013, 13h35

Oui, il y a moyen de modifier des propriétés de style en fonction des propriétés des objets de la couche vecteur (et donc en particulier l'url de l'icone des markers). Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
new OpenLayers.Style ({
				    'externalGraphic': "${getIcon}",
                                    ...
				   },{  
                                     context : {								    
							getIcon: function (f){
								// ecrire ici le code qui retourne l'url 
                                                                // d'une icone en fonction d'un attribut de f.
							 }
				     }
				}) ;
...

Problème en ajoutant des markers sur la carte IGN

IGN API Géoportail

Discussions similaires

Partager

Partager