IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

IGN API Géoportail Discussion :

Pas d'affichage des popups KML


Sujet :

IGN API Géoportail

  1. #1
    Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2014
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mai 2014
    Messages : 71
    Points : 66
    Points
    66
    Par défaut Pas d'affichage des popups KML
    Bonjour à tous ! Une nouvelle fois, besoin de vos avis éclairés !

    Je ne comprends pas pourquoi je n'ai pas l'affichage des popups des objets KML sur mon projet.

    Je vous joins la version la plus simple du projet sur lequel je travaille actuellement : Il s'agit du projet "Quickstart", mis à disposition par le site de l'API géoportail. j'ai simplement "rapatrié" le javascript dans la page HTML, en fin de body. + quelques autres ajouts mineurs dans cette version. Dont (en incorporant les infos de la rubrique "Débuter avec l'API" du site de l'API), l'ajout d'une couche KML et d'une couche GPX. Avec la couche GPX, les popups s'affichent, mais pas avec la couche KML ... Grrrr !

    Voici donc le 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
    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
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    <!DOCTYPE html>
    	
    <html>
    <head>
        <title>JS API Tutorials - Quickstart</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[/*><!--*/
        h1 {
            text-align:center;
            font-size:0.75em;
            font-style: italic;
            width:800px;
        }
        div#example_explain {
            margin:0px 0px 10px 0px;
            border: thin solid #595E61;
            width:800px;
            position:relative;
            left:0px;
            top:0px;
            text-align:justify;
            font-size: 0.75em;
            font-style: italic;
            color: #595E61;
        }
        form#gpLangChange {
            border:0px;
            margin:0px;
            padding:0px;
        }
        div#viewerDiv {
            width:800px;
            height:600px;
            background-color:white;
            background-image:url(http://api.ign.fr/geoportail/api/js/2.0.0/theme/geoportal/img/loading.gif);
            background-position:center center;
            background-repeat:no-repeat;
        }
        div#footer {
            font-size:x-small;
            text-align:center;
            width:800px;
        }
        div#footer a, div#footer a:link, div#footer a:visited, div#footer a:hover {
            text-decoration:none;
            color:black;
        }
        div#code a, div#code a:link, div#code a:visited, div#code a:hover {
            text-decoration:none;
            color: #ffffff;
        }
         
        div#code {
            margin:0px 0px 10px 0px;
            width:800px;
            position:relative;
            left:0px;
            top:0px;
            text-align:justify;
            font-size: 0.75em;
            font-style: italic;
            
        }
        /*]]>*/--></style>
    	
    	<!-- Style pour le bouton de réinitialisation de la carte -->
    	<style type="text/css">
        .olControlZoomOrigItemInactive {
    		display: block;
    		float: left;
    		left: 0px;
    		position: relative;
    		top: 0;
    		background: #ff0000;
    		border: 1px solid #ffffff;
    		border-radius: 4px;
    		width: 21px;
    		height: 21px;
        }
    	
        .olControlZoomOrigItemActive {
    		display: block;
    		float: left;
    		left: 0px;
    		position: relative;
    		top: 0;
    		background: #00ff00;
    		border: 1px solid #ffffff;
    		border-radius: 4px;
    		width: 21px;
    		height: 21px;
        }
        </style>	
    	
    	<!-- Style pour le bouton de centrage de la carte sur Sartène -->
    	<style type="text/css">
        .olControlZoomSarteneItemInactive {
    		display: block;
    		float: left;
    		left: 2px;
    		position: relative;
    		top: 0;
    		background: #ffff00;
    		border: 1px solid #ffffff;
    		border-radius: 4px;
    		width: 21px;
    		height: 21px;
        }
        .olControlZoomSarteneItemActive {
    		display: block;
    		float: left;
    		left: 2px;
    		position: relative;
    		top: 0;
    		background: #ffff00;
    		border: 1px solid #ffffff;
    		border-radius: 4px;
    		width: 21px;
    		height: 21px;
        }
        </style>
    
    	<!-- Style pour régler la largeur du contrôle "Gestionnaire de couches" -->
    	<style>
        .gpControlLayerSwitcher.olControlNoSelect.gpMainDivClass {
            width: 200px;
        }
    	</style>	
    	
    	<!-- Style pour régler la hauteur maxi du contrôle "Gestionnaire de couches" -->
    	<style>
        .gpGroupDivClass {
            max-height: 270px !important;
        }
    	</style>		
    	
    </head>
      
    <body style="background-color:#585858">
    	<h1 id="example_title" style="color: white; font-family:verdana; font-size:150%; text-align:center"></h1>
        <form id="gpLangChange" name="gpLangChange" action="#">
          <select style="font-size:0.75em;" id="gpChooseLang" name="gpChooseLang" size="1">
            <option value="en">English</option>
            <option value="fr">Français</option>
          </select>
        </form>
        <div id="viewerDiv"></div>
        <div id="example_explain" style="color:#FFFFFF"></div>
        <div id='code' style="color:#FFFFFF"><a href="js/quickstart.js" alt="quickstart" id="example_jscode" target="_blank"></a></div>
        <div id="footer"><a href="https://api.ign.fr/geoportail/document.do?doc=legal_mentions" id="legal" target="_blank"></a> - &copy;IGN 2008-2011</div>
    
    	<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/latest/GeoportalExtended.js"></script>
    	
    	
        <script type="text/javascript">
    /*
     * Copyright (c) 2008-2011 Institut Geographique National France, released under the
     * BSD license.
     */
    
    if (window.__Geoportal$timer===undefined) {
        var __Geoportal$timer= null;
    }
    
    /**
     * Function: checkApiLoading
     * Assess that needed classes have been loaded.
     *
     * Parameters:
     * retryClbk - {Function} function to call if any of the expected classes
     * is missing.
     * clss - {Array({String})} list of classes to check.
     *
     * Returns:
     * {Boolean} true when all needed classes have been loaded, false otherwise.
     */
    function checkApiLoading(retryClbk,clss) {
        if (__Geoportal$timer!=null) {
            //clearTimeout: cancels the timer "__Geoportal$timer" before its end
            //clearTimeout: annule le minuteur "__Geoportal$timer" avant sa fin
            window.clearTimeout(__Geoportal$timer);
             __Geoportal$timer= null;
        }
    
        /**
        * It may happen that the init function is executed before the API is loaded
        * Addition of a timer code that waits 300 ms before running the init function
        *
        * Il se peut que l'init soit exécuté avant que l'API ne soit chargée
        * Ajout d'un code temporisateur qui attend 300 ms avant de relancer l'init
        */
        var f;
        for( var i=0, l= clss.length; i<l; i++) {
            try {
                eval('var f='+clss[i]);
            } catch (e) {
                f= undefined;
            }
            if (typeof(f)==='undefined') {
                 __Geoportal$timer= window.setTimeout(retryClbk, 300);
                return false;
            }        
        }
        return true;
    }
    
    var Geoportal$translations= {
        'new.instance.failed':
        {
            
            'en':"Map creation failed",
           
            'fr':"Création de la carte échouée"
        },
        'legal':
        {
    
            'en':"Terms of Use",
         
            'fr':"Mentions Légales"
        },
        'example_jscode':
        {
           
            'en':"See the example's JavaScript code",
           
            'fr':"Voir le code Javascript de l'exemple"
           
        }
    };
    
    /**
     * Function: translate
     * Allow changing current language in the web page.
     *
     * Parameters:
     * eids - {Array({String})} list of DOM elements id whose content is i18n's
     *      governed. ['example_title', 'example_explain', 'example_jscode',
     *      'legal' ] is prepended.
     * vwrs - {Array({String}) list of variable names of type
     *      {<Geoportal.Viewer>} that handle the i18n "changelang" events.
     */
    function translate(eids, vwrs) {
        Geoportal.Lang.add(Geoportal$translations);
    
        if (!eids) {
            eids= [];
        }
        eids.unshift('example_title');
        eids.unshift('example_explain');
        eids.unshift('example_jscode');
        eids.unshift('legal');
    
        var eids$i18n= function() {
            var e= null;
            for (var i= 0, l= eids.length; i<l; i++) {
                e= OpenLayers.Util.getElement(eids[i]);
                if (e) {
                    var t= e.getAttribute('type');
                    if (t && t.match(/^button$/i)) {
                        e.value= OpenLayers.i18n(eids[i]);
                    } else {
                        e.innerHTML= OpenLayers.i18n(eids[i]);
                    }
                }
            }
        };
        eids$i18n();
    
        var slct= OpenLayers.Util.getElement('gpChooseLang');
        if (slct) {
            slct.onchange= function() {
                //Changing the map's language
                if (vwrs) {
                    var v;
                    for (var i= 0, l= vwrs.length; i<l; i++) {
                        try {
                            eval('var v= '+vwrs[i]);
                        } catch (e) {
                            v= undefined;
                        }
                        if (v) {
                            v.getMap().setLocale(this.options[this.selectedIndex].value);
                        }
                    }
                } else {
                    if (window.viewer!=undefined &&
                        typeof(Geoportal)=='object' && typeof(Geoportal.Viewer)!='undefined' &&
                        (viewer instanceof Geoportal.Viewer)) {
                        viewer.getMap().setLocale(this.options[this.selectedIndex].value);
                    } else {
                        // minimum API:
                        OpenLayers.Lang.setCode(this.options[this.selectedIndex].value);
                    }
                }
    
                //Translation of expressions due to the languages's change which has been made
                //Traduction des expressions suite au changement de langue effectué (i18n= internationalisation)
                eids$i18n();
                this.blur();
            };
            //Retrieval of the default language (the one of the Web browser's installation)
            //Récupération de la langue par défaut(celle d'installation du butineur Web)
            var language= OpenLayers.Lang.getCode();
            var re= new RegExp("^"+language);
            //Search in the change language form of the langage that best matches
            //the web browser's language.  This language is selected
            //
            //Recherche dans le formulaire de la langue qui correspond au mieux à la
            //langue du butineur Web.  Cette dernière est selectionnée
            for (var i= 0; i<slct.options.length; i++) {
                if (slct.options[i].value.match(re)) {
                    slct.options[i].selected= true;
                }
            }
        }
    }
    	</script>     
        
    	
    	<script type="text/javascript">
    /*
     * Copyright (c) 2008-2011 Institut Geographique National France, released
     * under the
     * BSD license.
     */
    OpenLayers.Util.extend(Geoportal$translations, {
        'example_title':
        {
            'en':"Basic map",
            'fr':"Carte de base"
        },
        'example_explain':
        {   
            'en':"This map is used as a base for all tutorials, it shows a WMTS layer center on Paris area.",
            'fr':"Cette carte est utilisée comme base pour tous les turoriels, elle affiche une couche WMTS centrée sur la région parisienne."
        }
    });
    	</script>
    	
    
    
    <script type="text/javascript">
    
    /*******************************************************************
     * Copyright (c) 2008-2011 Institut Geographique National France, 
     * released under the BSD license.
     ******************************************************************/
    
    /*****************************************************
     * Property: key
     *
     * The API key to use
     ****************************************************/
     
    var APIkey= "zazzr0hbvffko8hltl1pjkj0";
    
    /*****************************************************
     * Property: viewer
     * {<Geoportal.Viewer>} the viewer global instance.
     ****************************************************/
    viewer= null;
    
    // ----- Variables : Coordonnées (Lat., Long.) et Zoom du centre de la carte
     var LonMaCarte= 2.418611;			// )
     var LatMaCarte= 48.842222;			// ) Paris
     var ZoomMaCarte= 10;				// )
     
     
     /*****************************************************
     * Property: layersVisibility
     * The initial state of visibility of all layers of the map
     ****************************************************/
    var layersVisibility = {};
    
    /*****************************************************
     * Property: layersOpacity
     * The initial state of opacity of all layers of the map
     ****************************************************/
    var layersOpacity = {};
    
    /*****************************************************
     * Function: initMap
     * Load the application. Called when all information
     * have been loaded by <loadAPI>().
     ****************************************************/
    function initMap() {
       
        // ----- Traduction
        translate();
    
        // ----- Options
        
        var options= {
            mode:'normal',
    		territory:'FXX',
    		proxy:'assets/proxy.php?url='
        };
    	
    	// ----- Modification du style pour une couche GPX (Début)
    	var myStyleMapGpx = new OpenLayers.StyleMap({
    		"default": new OpenLayers.Style({
    			'pointRadius': 10,
    			// ----- Couleur trace et bord features
    			'strokeColor': '#FFFF00',	
    			// ----- Couleur de remplissage features
    			'fillColor': '#FF0000'
            }),
    		"select": new OpenLayers.Style({
    			'pointRadius': 15,
    			'strokeColor': '#ff00ff',
    			'fillColor': '#ff00ff'
            })
        });
    	// ----- Modification du style pour une couche GPX (Fin)
    	
    	// ----- Modification du style pour une couche KML (Début)	
    	var myStyleMapKml = new OpenLayers.StyleMap({
    		"default": new OpenLayers.Style({
    			'pointRadius': 10,
    			// ----- Couleur trace et bord des repères			
    			'fillColor': '#ff0000'
    		}),
    		"select": new OpenLayers.Style({
    			'pointRadius': 15,
    			// ----- Couleur trace et bord des repères sélectionnés			
    			'fillColor': '#ff00ff'
    		})
    	});
    	// ----- Modification du style pour une couche KML (Fin)		
    
    	
        viewer= new Geoportal.Viewer.Default('viewerDiv', OpenLayers.Util.extend(
            options,
            // API keys configuration variable set by <Geoportal.GeoRMHandler.getConfig>
            // variable contenant la configuration des clefs API remplie par <Geoportal.GeoRMHandler.getConfig>
            window.gGEOPORTALRIGHTSMANAGEMENT===undefined? {'apiKey':APIkey} : gGEOPORTALRIGHTSMANAGEMENT)
        );
    	
    
        if (!viewer) {
            // problem ...
            OpenLayers.Console.error(OpenLayers.i18n('new.instance.failed'));
            return;
        }
       
        // ----- Layers (WMTS)
        viewer.addGeoportalLayers(
    		[
    		'CADASTRALPARCELS.PARCELS:WMTS',		
    		'ORTHOIMAGERY.ORTHOPHOTOS:WMTS',
    		'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS',
    		],
    		{
    		'CADASTRALPARCELS.PARCELS:WMTS':{visibility:false, opacity: 1},
    		'ORTHOIMAGERY.ORTHOPHOTOS:WMTS':{visibility:true, opacity: 1},
    		'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS':{visibility:true, opacity: 0.3},
    		//global:{opacity:0.75}
    		}
    	);	
    	
    	// ----- External or user's layers (KML)
    	viewer.getMap().addLayer(
    	    // Type couche
    		"KML",
    		// Nom couche
    		'Couche KML : Velib',
    		// URL du fichier KML		
    		"./assets/velib.kml",
    		// Options KML
    		{
    			visibility:true,
    			opacity:1,
    			styleMap:myStyleMapKml			
    		},
    		{
    			formatOptions:{extractStyles:false}
    		}  
    		// ----- Options popup		
    	);
    
    	// ----- External or user's layers (GPX)	
    	viewer.getMap().addLayer(
    		// Type couche
            'GPX',
    		// Nom couche		
            'Couche GPX : Route',
    		// URL du fichier GPX		
            "./assets/routes.gpx",
    		// Options GPX		
            {
                visibility:true,
    			opacity:1,
    			styleMap:myStyleMapGpx
            }
    		// ----- Options popup			
        );
    	
    	
    		// ----- Enregistrement des valeurs initiales de visibilité/opacité des couches
    	var layers = viewer.getMap().layers;
    	for (var i=0; i<layers.length; i++) {
    		layersVisibility[layers[i].name] = layers[i].getVisibility();
    		layersOpacity[layers[i].name] = layers[i].opacity;
    	}	
    	
    	
        // ----- Autres (Centrage de la carte et niveau de zoom)
    	viewer.getMap().setCenterAtLonLat(LonMaCarte, LatMaCarte, ZoomMaCarte);
    	
        // ----- Ajout de la barre de mesures (Mesure de distance, mesure de surface, mesure d'azimuth)	
    	// Récupération de la toolbox
    	var tbx= viewer.getMap().getControlsByClass("Geoportal.Control.ToolBox")[0];
    	var panel= new Geoportal.Control.Panel({
    		div:OpenLayers.Util.getElement(tbx.id+"_search")
    	});
    	// Ajout de la barre de mesure 
    	viewer.getMap().addControls([panel]);
    								   
        // ----- Création du contrôle d'impression
    	var nv= viewer.getMap().getControlsByClass("Geoportal.Control.NavToolbar")[0];
    	nv.addControls([new Geoportal.Control.PrintMap()]);
     							
    	var measurebar= new Geoportal.Control.MeasureToolbar({
    		div: OpenLayers.Util.getElement(tbx.id+"_measure"),
    		displaySystem:(viewer.getMap().getProjection().getProjName()=="longlat"?"geographic":"metric"),
    		targetElement: OpenLayers.Util.getElement(tbx.id+"_meares")
    	});
    	// Ajout du contrôle d'impression	
    	viewer.getMap().addControl(measurebar);
    	
    	
    	// ----- Création et ajout de la LayerToolbar
    	//         (Réservé)
    	// ------------------------------------------
    		   												
        // ----- Création du Bouton de réinitialisation de la carte :
    	//      [RECENTRAGE de la carte (Lon, Lat, Zoom) aux valeurs de départ]
    	var button = new OpenLayers.Control.Button({
    		displayClass: "olControlZoomOrig",		
    		title: "Réinitialisation Carte",
    		trigger: function() {
    			viewer.getMap().setCenterAtLonLat(LonMaCarte,LatMaCarte,ZoomMaCarte);
    			// Réaffectation des valeurs initiales de visibilité/opacité des couches
    			var layers = viewer.getMap().layers;
    			for (var i=0; i<layers.length; i++) {
    				layers[i].setVisibility(layersVisibility[layers[i].name]);
    				layers[i].setOpacity(layersOpacity[layers[i].name]);
    			}
    		}
    	});
    	
    	
    	// Ajout du Bouton de réinitialisation	
    	panel.addControls(button);	
    									
        // ----- Création du Bouton de centrage de la carte (Lon, Lat, Zoom) sur Sartène (Corse)								
    	// Ajout d'un bouton de centrage
    	var button = new OpenLayers.Control.Button({
    		displayClass: "olControlZoomSartene",		
    		title: "Centrage Carte sur Sartène",
    		trigger: function() {
    			viewer.getMap().setCenterAtLonLat(8.833,41.588,10);
    		}
    	});
    	// Ajout d'un bouton de centrage				
    	panel.addControls(button);	
    }
    
    
    /*****************************************************
     * Function: loadAPI
     * Load the configuration related with the API keys.
     * Called on "onload" event.
     * Call <initMap>() function to load the interface.
     *****************************************************/
    function loadAPI() {
        // wait for all classes to be loaded
        // on attend que les classes soient chargées
        if (checkApiLoading('loadAPI();',['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false) {
            return;
        }
        
        Geoportal.GeoRMHandler.getConfig([APIkey], null,null, {
            onContractsComplete: initMap
        });
    	
    	// ----- Pour un affichage EN ENTIER des noms des couches dans le Gestionnaire de couches
    	Geoportal.Control.LayerSwitcher.LAYER_LABEL_MAXLENGTH = 50;
    	Geoportal.Control.LayerSwitcher.LAYER_LABEL_REPLACEMENT_INDEX = 47;	
    }
    
    // assign callback when "onload" event is fired
    // assignation de la fonction à appeler lors de la levée de l'évènement "onload"
    window.onload= loadAPI;
    </script>
    
    </body>
    </html>
    Je n'avais pas encore fait attention à ce défaut depuis l'ajout de la couche KML ...

    Je propose à l'examen un autre code, créé par le générateur du site de l'API. Là, les popups KML s'affichent sans problèmes, alors que les lignes de code correspondant à la couche KML SONT LES MEMES !

    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
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    <!DOCTYPE html>
    <html>
    <head>
    <title>Essai 04</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css"><!--/*--><![CDATA[/*><!--*/
        div#viewerContainer {
            width:800px;
            height:600px
        }
        h1 {
            font-size:25px;
            font-weight:bold;
            font-family: sans-serif;
        }
    /*]]>*/--></style>
    
    <!-- Style pour le bouton de réinitialisation de la carte -->	
    <style type="text/css">
    	.olControlZoomBNItemInactive {
    		float:right;
    		background: #ff0000;
    		border: 2px solid #ffffff;
    		width:23px;
    		height:23px;
        }
        .olControlZoomBNItemActive {
    		float:right;
    		background: #00ff00;
    		border: 2px solid #ffffff;
    		width:23px;
    		height:23px;
        }
    </style>
    
    
    
    
    </head>
    
    <body>
    
    <body bgcolor=#000000>
    
    <h1 id="title">Essai 04</h1>
    <div id="viewerContainer"></div>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        /**
         * Property: iViewer
         * {<Geoportal.InterfaceViewer>} The Geoportal API viewer interface.
         */
        iViewer= null;
    	
    	
    // ====================================================	
     var LonMaCarte= 6.804;				// )
     var LatMaCarte= 45.522;			// ) Rosuel - Les Loyes
     var ZoomMaCarte= 15;				// )
    // ====================================================		
    	 
        /**
         * Function: init
         * Load the map. Called when "onload" event is fired.
         */
        function init() {
    	
    	// ----- Modification du style pour une couche GPX (Début)
    	var myStyleMapGpx = new OpenLayers.StyleMap({
    		"default": new OpenLayers.Style({
    			'pointRadius': 10,
    			// ----- Couleur trace et bord features
    			'strokeColor': '#FFFF00',	
    			// ----- Couleur de remplissage features
    			'fillColor': '#FF0000'
            }),
    		"select": new OpenLayers.Style({
    			'pointRadius': 15,
    			'strokeColor': '#ff00ff',
    			'fillColor': '#ff00ff'
            })
        });
    	// ----- Modification du style pour une couche GPX (Fin)
    	
    	// ----- Modification du style pour une couche KML (Début)	
    	var myStyleMapKml = new OpenLayers.StyleMap({
    		"default": new OpenLayers.Style({
    			'pointRadius': 10,
    			// ----- Couleur trace et bord des repères			
    			'fillColor': '#ff0000'
    		}),
    		"select": new OpenLayers.Style({
    			'pointRadius': 15,
    			// ----- Couleur trace et bord des repères sélectionnés			
    			'fillColor': '#ff00ff'
    		})
    	});
    	// ----- Modification du style pour une couche KML (Fin)	
    	
    	
            iViewer= Geoportal.load(
    				
                // map's div id - identifiant de la div de la carte :
                "viewerContainer",
                // API's keys - clefs API :
                ["zazzr0hbvffko8hltl1pjkj0"],
                {
                    // center in WGS84G - centre en WGS84G
                    lon:6.804,
                    lat:45.522
                },
                // zoom level (0-20) - niveau de zooms (0 à 20) :
                15,
                {   // various options :
                    loadTheme: function() {
                        Geoportal.Util.setTheme("geoportal3");
                        Geoportal.Util.loadCSS("http://api.ign.fr/geoportail/api/js/2.0.3/theme/geoportal3/style.css","__GeoportalBlackCss__","");
                        if (OpenLayers.Util.alphaHack()) {
                            Geoportal.Util.loadCSS("http://api.ign.fr/geoportail/api/js/2.0.3/theme/geoportal3/ie6-style.css","__IE6GeoportalBlackCss__","");
                        }
                    },
                    // viewer default controls options overloads :
                    componentsOptions:{},
                    // Geoportal's layers to load (when none, all contracts' layers are loaded) :
                    layers:["ORTHOIMAGERY.ORTHOPHOTOS:WMTS","GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS","CADASTRALPARCELS.PARCELS:WMTS"],
                    // Geoportal's layers options :
                    layersOptions:{"ORTHOIMAGERY.ORTHOPHOTOS:WMTS":{"opacity":1,"visibility":true},"GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS":{"opacity":0.3,"visibility":true},"CADASTRALPARCELS.PARCELS:WMTS":{"opacity":1,"visibility":false}},
                    overlays:{},
                    // External or user's layers :
    				"KML":[{"name":"Centres d'intéret","url":"./assets/velib","options":{"params":{"opacity":1,"visibility":true, styleMap:myStyleMapKml,},"options":{formatOptions:{extractStyles :false}}}}]},
    				
    				
                    // callback to use before returning (after centering) :
                    onView:function() {viewer=iViewer.getViewer();
    				
    								   // Minimize/Maximise layers panel :
    								   viewer.openLayersPanel(true); // True : Développe le Panneau des couches, False: Minimise ...
    								   
    	// Minimise coordinates panel :
        //(viewer.getMap().getControlsByClass('Geoportal.Control.Information')[0]).minimizeControl(false); // Minimise le panneau inférieur des coordonnées
    	
    	
    	
    	
     
                                       // =========================================================================================
    								   //Récupération de la barre d'outils
                                       var tbx= viewer.getMap().getControlsByClass("Geoportal.Control.ToolBox")[0];
                                       var panel= new Geoportal.Control.Panel({
                                                              div:OpenLayers.Util.getElement(tbx.id+"_search")
                                                  });
     
                                       viewer.getMap().addControls([panel]);
    								   
                                       // ========================================================================================= 
                                       //Ajout du contrôle d'impression
                                       var nv= viewer.getMap().getControlsByClass("Geoportal.Control.NavToolbar")[0];
                                       nv.addControls([new Geoportal.Control.PrintMap()]);
     							
                                       var measurebar= new Geoportal.Control.MeasureToolbar({
                                            div: OpenLayers.Util.getElement(tbx.id+"_measure"),
                                            displaySystem:(viewer.getMap().getProjection().getProjName()=="longlat"?"geographic":"metric"),
                                            targetElement: OpenLayers.Util.getElement(tbx.id+"_meares")
                                       });
                                       viewer.getMap().addControl(measurebar);
                                       // =========================================================================================
    		   
                                      //Ajout de la LayerToolbar
    
                                       // ========================================================================================= 
    																
    									// Ajout d'un bouton de RECENTRAGE de la carte (Lon, Lat, Zoom) aux valeurs de départ
    									var button = new OpenLayers.Control.Button({
    										displayClass: "olControlZoomBN",		
    										title: "Réinitialisation Carte",
    										trigger: function() {
    											viewer.getMap().setCenterAtLonLat(LonMaCarte,LatMaCarte, ZoomMaCarte);
    										}
    									});
    									panel.addControls(button);	
    									
                                       // ========================================================================================= 								   
                                       //Accès au GéoCatalogue
                                       var CSW= new Geoportal.Control.CSW(
                                                   OpenLayers.Util.extend(
                                                           {
                                                               title:"gpControlCSW.title"
                                                           },
                                                           {
                                                               cswUrl:"http://www.geocatalogue.fr/api-public/servicesRest?"
                                                           }
                                                   ))
                                       panel.addControls([CSW]);
     
                                       //Ajout du contrôle de recherche par noms de lieux
                                       var GeoNames= new Geoportal.Control.LocationUtilityService.GeoNames(
                                                   new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
                                                    "PositionOfInterest:OPENLS;Geocode",//layer name
                                                    {
                                                        maximumResponses:100,
                                                        formatOptions: {
                                                        }
                                                   }
                                                   ),{
                                                        drawLocation:true,
                                                        setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
                                                        autoCompleteOptions: {}
                                                   }
                                       );
                                       panel.addControls([GeoNames]);
     
                                       //Ajout du contrôle de recherche par adresses
                                       var Geocode= new Geoportal.Control.LocationUtilityService.Geocode(
                                                   new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
                                                           "StreetAddress:OPENLS;Geocode",//layer name
                                                           {
                                                               maximumResponses:100,
                                                               formatOptions: {
                                                               }
                                                           }
                                                   ),{
                                                           drawLocation:true,
                                                           setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
                                                           autoCompleteOptions: {}
                                                   }
                                       );
                                       panel.addControls([Geocode]);
      
                    },
                    // class of viewer to use :
                    viewerClass:"Geoportal.Viewer.Default"
                }
            );
        }
     
     
        window.onload= init;
    //--><!]]></script>
    <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/latest/GeoportalExtended.js"><!--//--><![CDATA[//><!--
    //--><!]]></script>
    </body>
    </html>
    Si le second fonctionne, diront certains, pourquoi s’entêter sur le premier ?
    Ben parce que préfère, d'abord, parce que c'est le code du projet "Quickstart", prévu par les développeurs pour servir de support au tutoriel de l'API, et que ça me va bien de progresser petit à petit en m'appuyant sur ce tutoriel.
    Et puis aussi, dans l'esprit d'aider ceux qui, comme moi, se serviront de ce même quickstart et de ce même tutoriel. Voilà !

    Donc, d'avance merci aux contributeurs/contributrices !

  2. #2
    Membre éclairé Avatar de jrenard
    Homme Profil pro
    Webdesigner / développeur front-end
    Inscrit en
    Septembre 2013
    Messages
    456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webdesigner / développeur front-end
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2013
    Messages : 456
    Points : 894
    Points
    894
    Par défaut
    Bonjour,

    Le problème sur le premier exemple vient d'un conflit entre la couche GPX et la couche KML. Si l'on décoche la couche GPX (ou qu'on la descend dans le gestionnaire de couches), les objets de la couche KML redeviennent sélectionnables et les pop-ups réapparaissent. Je reviens plus tard pour une réponse sur la façon de contourner ce problème.

    Je suis en revanche perplexe sur le deuxième exemple, dont le code ne fonctionne pas du tout, et pour cause il contient de nombreuses incohérences :
    - définition de fonctions à l'intérieur même du Geoportal.load() alors qu'elles devraient être en dehors (mais toujours à l'intérieur du initMap)
    - définition du KML en dehors des {} du overlays alors qu'elle devrait se situer entre ces accolades
    - ...
    Donc je ne comprends pas comment tu peux afficher quelque chose avec ce code
    Développeur Web - Agglo La Rochelle
    Anciennement pôle technique Géoportail - IGN
    Twitter : @dje_renard

  3. #3
    Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2014
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mai 2014
    Messages : 71
    Points : 66
    Points
    66
    Par défaut
    J'espère que je n'ai pas fais une fausse manip de copier-coller pour le 2ème exemple de code transmis. Le revoici. Je mets l'accent sur le fait que ce code vient tout droit du générateur de code mis à dispo par le site de l'API. Je l'avais abandonné parce que je n'arrivais pas à implémenter mes fameux boutons. Mais à part ça, pour ce qui concerne la couche KML, ça fonctionne très bien. Et même avec la "cohabitation" avec la couche GPX.


    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
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    <!DOCTYPE html>
    <html>
    <head>
    <title>Essai 04</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css"><!--/*--><![CDATA[/*><!--*/
        div#viewerContainer {
            width:800px;
            height:600px
        }
        h1 {
            font-size:25px;
            font-weight:bold;
            font-family: sans-serif;
        }
    /*]]>*/--></style>
    
    <!-- Style pour le bouton de réinitialisation de la carte -->	
    <style type="text/css">
    	.olControlZoomBNItemInactive {
    		float:right;
    		background: #ff0000;
    		border: 2px solid #ffffff;
    		width:23px;
    		height:23px;
        }
        .olControlZoomBNItemActive {
    		float:right;
    		background: #00ff00;
    		border: 2px solid #ffffff;
    		width:23px;
    		height:23px;
        }
    </style>
    
    <!-- Pour régler la largeur du contrôle "Gestionnaire de couches" -->
    <style>
        .gpControlLayerSwitcher.olControlNoSelect.gpMainDivClass
        {
            width: 200px;
        }
    </style>
    
    
    </head>
    
    <body>
    
    <body bgcolor=#000000>
    
    <h1 id="title">Essai 04</h1>
    <div id="viewerContainer"></div>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        /**
         * Property: iViewer
         * {<Geoportal.InterfaceViewer>} The Geoportal API viewer interface.
         */
        iViewer= null;
    	
    // ====================================================	
     var LonMaCarte= 6.804;				// )
     var LatMaCarte= 45.522;			// ) Rosuel - Les Loyes
     var ZoomMaCarte= 15;				// )
    // ====================================================		
    	 
        /**
         * Function: init
         * Load the map. Called when "onload" event is fired.
         */
        function init() {
    	
    	// ----- Modification du style pour une couche GPX (Début)
    	var myStyleMapGpx = new OpenLayers.StyleMap({
    		"default": new OpenLayers.Style({
    			'pointRadius': 10,
    			// ----- Couleur trace et bord features
    			'strokeColor': '#FFFF00',	
    			// ----- Couleur de remplissage features
    			'fillColor': '#FF0000'
            }),
    		"select": new OpenLayers.Style({
    			'pointRadius': 15,
    			'strokeColor': '#ff00ff',
    			'fillColor': '#ff00ff'
            })
        });
    	// ----- Modification du style pour une couche GPX (Fin)
    	
    	// ----- Modification du style pour une couche KML (Début)	
    	var myStyleMapKml = new OpenLayers.StyleMap({
    		"default": new OpenLayers.Style({
    			'pointRadius': 10,
    			// ----- Couleur trace et bord des repères			
    			'fillColor': '#ff0000'
    		}),
    		"select": new OpenLayers.Style({
    			'pointRadius': 15,
    			// ----- Couleur trace et bord des repères sélectionnés			
    			'fillColor': '#ff00ff'
    		})
    	});
    	// ----- Modification du style pour une couche KML (Fin)	
    	
    	
            iViewer= Geoportal.load(
    		
                // map's div id - identifiant de la div de la carte :
                "viewerContainer",
                // API's keys - clefs API :
                ["zazzr0hbvffko8hltl1pjkj0"],
                {
                    // center in WGS84G - centre en WGS84G
                    lon:6.804,
                    lat:45.522
                },
                // zoom level (0-20) - niveau de zooms (0 à 20) :
                15,
                {   // various options :
                    loadTheme: function() {
                        Geoportal.Util.setTheme("geoportal3");
                        Geoportal.Util.loadCSS("http://api.ign.fr/geoportail/api/js/2.0.3/theme/geoportal3/style.css","__GeoportalBlackCss__","");
                        if (OpenLayers.Util.alphaHack()) {
                            Geoportal.Util.loadCSS("http://api.ign.fr/geoportail/api/js/2.0.3/theme/geoportal3/ie6-style.css","__IE6GeoportalBlackCss__","");
                        }
                    },
                    // viewer default controls options overloads :
                    componentsOptions:{},
                    
    				// Geoportal's layers to load (when none, all contracts' layers are loaded) :
                    layers:[
    					"CADASTRALPARCELS.PARCELS:WMTS", 
    					"ORTHOIMAGERY.ORTHOPHOTOS:WMTS",
    					"GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS"
    				],
                    
    				// Geoportal's layers options :
                    layersOptions:{
    					"CADASTRALPARCELS.PARCELS:WMTS":{"opacity":1,"visibility":false}, 
    					"ORTHOIMAGERY.ORTHOPHOTOS:WMTS":{"opacity":1,"visibility":true},
    					"GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS":{"opacity":0.3,"visibility":true}
    				},
    										
    				// External or user's layers :
                    overlays:{
    					"GPX":[{
    						"name":"Routes",
    						"url":"./assets/routes.gpx",
    						"options":{"params":{"opacity":1,"visibility":true, styleMap:myStyleMapGpx,},
    						"options":{}}
    					}],
    					"KML":[{
    						"name":"Vélib",
    						"url":"./assets/velib",
    						"options":{"params":{"opacity":1,"visibility":true, styleMap:myStyleMapKml,},
    						"options":{formatOptions:{extractStyles :false}}}
    					}]
    				},
    				
    	
    				
    				
    				
    					
                    // callback to use before returning (after centering) :
                    onView:function() {viewer=iViewer.getViewer();
    				
    				// Minimize/Maximise layers panel :
    				viewer.openLayersPanel(true); // True : Développe le Panneau des couches, False: Minimise ...
    								   
    				// Minimise coordinates panel :
    				//(viewer.getMap().getControlsByClass('Geoportal.Control.Information')[0]).minimizeControl(false); // Minimise le panneau inférieur des coordonnées
    	
    
    
                                       // =========================================================================================
    								   //Récupération de la barre d'outils
                                       var tbx= viewer.getMap().getControlsByClass("Geoportal.Control.ToolBox")[0];
                                       var panel= new Geoportal.Control.Panel({
                                                              div:OpenLayers.Util.getElement(tbx.id+"_search")
                                                  });
     
                                       viewer.getMap().addControls([panel]);
    								   
                                       // ========================================================================================= 
                                       //Ajout du contrôle d'impression
                                       var nv= viewer.getMap().getControlsByClass("Geoportal.Control.NavToolbar")[0];
                                       nv.addControls([new Geoportal.Control.PrintMap()]);
     							
                                       var measurebar= new Geoportal.Control.MeasureToolbar({
                                            div: OpenLayers.Util.getElement(tbx.id+"_measure"),
                                            displaySystem:(viewer.getMap().getProjection().getProjName()=="longlat"?"geographic":"metric"),
                                            targetElement: OpenLayers.Util.getElement(tbx.id+"_meares")
                                       });
                                       viewer.getMap().addControl(measurebar);
                                       // =========================================================================================
    		   
                                      //Ajout de la LayerToolbar
    
                                       // ========================================================================================= 
    																
    									// Ajout d'un bouton de RECENTRAGE de la carte (Lon, Lat, Zoom) aux valeurs de départ
    									var button = new OpenLayers.Control.Button({
    										displayClass: "olControlZoomBN",		
    										title: "Réinitialisation Carte",
    										trigger: function() {
    											viewer.getMap().setCenterAtLonLat(LonMaCarte,LatMaCarte, ZoomMaCarte);
    										}
    									});				
    									panel.addControls(button);	
    									
                                       // ========================================================================================= 								   
                                       //Accès au GéoCatalogue
                                       var CSW= new Geoportal.Control.CSW(
                                                   OpenLayers.Util.extend(
                                                           {
                                                               title:"gpControlCSW.title"
                                                           },
                                                           {
                                                               cswUrl:"http://www.geocatalogue.fr/api-public/servicesRest?"
                                                           }
                                                   ))
                                       panel.addControls([CSW]);
     
                                       //Ajout du contrôle de recherche par noms de lieux
                                       var GeoNames= new Geoportal.Control.LocationUtilityService.GeoNames(
                                                   new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
                                                    "PositionOfInterest:OPENLS;Geocode",//layer name
                                                    {
                                                        maximumResponses:100,
                                                        formatOptions: {
                                                        }
                                                   }
                                                   ),{
                                                        drawLocation:true,
                                                        setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
                                                        autoCompleteOptions: {}
                                                   }
                                       );
                                       panel.addControls([GeoNames]);
     
                                       //Ajout du contrôle de recherche par adresses
                                       var Geocode= new Geoportal.Control.LocationUtilityService.Geocode(
                                                   new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
                                                           "StreetAddress:OPENLS;Geocode",//layer name
                                                           {
                                                               maximumResponses:100,
                                                               formatOptions: {
                                                               }
                                                           }
                                                   ),{
                                                           drawLocation:true,
                                                           setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
                                                           autoCompleteOptions: {}
                                                   }
                                       );
                                       panel.addControls([Geocode]);
      
                    },
                    // class of viewer to use :
                    viewerClass:"Geoportal.Viewer.Default"
                }
            );
    	// Pour un affichage EN ENTIER des noms des couches dans le Gestionnaire de couches
    	Geoportal.Control.LayerSwitcher.LAYER_LABEL_MAXLENGTH = 50;
    	Geoportal.Control.LayerSwitcher.LAYER_LABEL_REPLACEMENT_INDEX = 47;
        }
    
     
        window.onload= init;
    //--><!]]></script>
    <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/latest/GeoportalExtended.js"><!--//--><![CDATA[//><!--
    //--><!]]></script>
    </body>
    </html>

  4. #4
    Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2014
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mai 2014
    Messages : 71
    Points : 66
    Points
    66
    Par défaut
    Citation Envoyé par Duriv73 Voir le message
    J'espère que je n'ai pas fait une fausse manip de copier-coller pour le 2ème exemple de code transmis. Le revoici. Je mets l'accent sur le fait que ce code vient tout droit du générateur de code mis à dispo par le site de l'API. Je l'avais abandonné parce que je n'arrivais pas à implémenter mes fameux boutons. Mais à part ça, pour ce qui concerne la couche KML, ça fonctionne très bien. Et même avec la "cohabitation" avec la couche GPX.


    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
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    <!DOCTYPE html>
    <html>
    <head>
    <title>Essai 04</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css"><!--/*--><![CDATA[/*><!--*/
        div#viewerContainer {
            width:800px;
            height:600px
        }
        h1 {
            font-size:25px;
            font-weight:bold;
            font-family: sans-serif;
        }
    /*]]>*/--></style>
    
    <!-- Style pour le bouton de réinitialisation de la carte -->	
    <style type="text/css">
    	.olControlZoomBNItemInactive {
    		float:right;
    		background: #ff0000;
    		border: 2px solid #ffffff;
    		width:23px;
    		height:23px;
        }
        .olControlZoomBNItemActive {
    		float:right;
    		background: #00ff00;
    		border: 2px solid #ffffff;
    		width:23px;
    		height:23px;
        }
    </style>
    
    <!-- Pour régler la largeur du contrôle "Gestionnaire de couches" -->
    <style>
        .gpControlLayerSwitcher.olControlNoSelect.gpMainDivClass
        {
            width: 200px;
        }
    </style>
    
    
    </head>
    
    <body>
    
    <body bgcolor=#000000>
    
    <h1 id="title">Essai 04</h1>
    <div id="viewerContainer"></div>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        /**
         * Property: iViewer
         * {<Geoportal.InterfaceViewer>} The Geoportal API viewer interface.
         */
        iViewer= null;
    	
    // ====================================================	
     var LonMaCarte= 6.804;				// )
     var LatMaCarte= 45.522;			// ) Rosuel - Les Loyes
     var ZoomMaCarte= 15;				// )
    // ====================================================		
    	 
        /**
         * Function: init
         * Load the map. Called when "onload" event is fired.
         */
        function init() {
    	
    	// ----- Modification du style pour une couche GPX (Début)
    	var myStyleMapGpx = new OpenLayers.StyleMap({
    		"default": new OpenLayers.Style({
    			'pointRadius': 10,
    			// ----- Couleur trace et bord features
    			'strokeColor': '#FFFF00',	
    			// ----- Couleur de remplissage features
    			'fillColor': '#FF0000'
            }),
    		"select": new OpenLayers.Style({
    			'pointRadius': 15,
    			'strokeColor': '#ff00ff',
    			'fillColor': '#ff00ff'
            })
        });
    	// ----- Modification du style pour une couche GPX (Fin)
    	
    	// ----- Modification du style pour une couche KML (Début)	
    	var myStyleMapKml = new OpenLayers.StyleMap({
    		"default": new OpenLayers.Style({
    			'pointRadius': 10,
    			// ----- Couleur trace et bord des repères			
    			'fillColor': '#ff0000'
    		}),
    		"select": new OpenLayers.Style({
    			'pointRadius': 15,
    			// ----- Couleur trace et bord des repères sélectionnés			
    			'fillColor': '#ff00ff'
    		})
    	});
    	// ----- Modification du style pour une couche KML (Fin)	
    	
    	
            iViewer= Geoportal.load(
    		
                // map's div id - identifiant de la div de la carte :
                "viewerContainer",
                // API's keys - clefs API :
                ["zazzr0hbvffko8hltl1pjkj0"],
                {
                    // center in WGS84G - centre en WGS84G
                    lon:6.804,
                    lat:45.522
                },
                // zoom level (0-20) - niveau de zooms (0 à 20) :
                15,
                {   // various options :
                    loadTheme: function() {
                        Geoportal.Util.setTheme("geoportal3");
                        Geoportal.Util.loadCSS("http://api.ign.fr/geoportail/api/js/2.0.3/theme/geoportal3/style.css","__GeoportalBlackCss__","");
                        if (OpenLayers.Util.alphaHack()) {
                            Geoportal.Util.loadCSS("http://api.ign.fr/geoportail/api/js/2.0.3/theme/geoportal3/ie6-style.css","__IE6GeoportalBlackCss__","");
                        }
                    },
                    // viewer default controls options overloads :
                    componentsOptions:{},
                    
    				// Geoportal's layers to load (when none, all contracts' layers are loaded) :
                    layers:[
    					"CADASTRALPARCELS.PARCELS:WMTS", 
    					"ORTHOIMAGERY.ORTHOPHOTOS:WMTS",
    					"GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS"
    				],
                    
    				// Geoportal's layers options :
                    layersOptions:{
    					"CADASTRALPARCELS.PARCELS:WMTS":{"opacity":1,"visibility":false}, 
    					"ORTHOIMAGERY.ORTHOPHOTOS:WMTS":{"opacity":1,"visibility":true},
    					"GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS":{"opacity":0.3,"visibility":true}
    				},
    										
    				// External or user's layers :
                    overlays:{
    					"GPX":[{
    						"name":"Routes",
    						"url":"./assets/routes.gpx",
    						"options":{"params":{"opacity":1,"visibility":true, styleMap:myStyleMapGpx,},
    						"options":{}}
    					}],
    					"KML":[{
    						"name":"Vélib",
    						"url":"./assets/velib",
    						"options":{"params":{"opacity":1,"visibility":true, styleMap:myStyleMapKml,},
    						"options":{formatOptions:{extractStyles :false}}}
    					}]
    				},
    				
    	
    				
    				
    				
    					
                    // callback to use before returning (after centering) :
                    onView:function() {viewer=iViewer.getViewer();
    				
    				// Minimize/Maximise layers panel :
    				viewer.openLayersPanel(true); // True : Développe le Panneau des couches, False: Minimise ...
    								   
    				// Minimise coordinates panel :
    				//(viewer.getMap().getControlsByClass('Geoportal.Control.Information')[0]).minimizeControl(false); // Minimise le panneau inférieur des coordonnées
    	
    
    
                                       // =========================================================================================
    								   //Récupération de la barre d'outils
                                       var tbx= viewer.getMap().getControlsByClass("Geoportal.Control.ToolBox")[0];
                                       var panel= new Geoportal.Control.Panel({
                                                              div:OpenLayers.Util.getElement(tbx.id+"_search")
                                                  });
     
                                       viewer.getMap().addControls([panel]);
    								   
                                       // ========================================================================================= 
                                       //Ajout du contrôle d'impression
                                       var nv= viewer.getMap().getControlsByClass("Geoportal.Control.NavToolbar")[0];
                                       nv.addControls([new Geoportal.Control.PrintMap()]);
     							
                                       var measurebar= new Geoportal.Control.MeasureToolbar({
                                            div: OpenLayers.Util.getElement(tbx.id+"_measure"),
                                            displaySystem:(viewer.getMap().getProjection().getProjName()=="longlat"?"geographic":"metric"),
                                            targetElement: OpenLayers.Util.getElement(tbx.id+"_meares")
                                       });
                                       viewer.getMap().addControl(measurebar);
                                       // =========================================================================================
    		   
                                      //Ajout de la LayerToolbar
    
                                       // ========================================================================================= 
    																
    									// Ajout d'un bouton de RECENTRAGE de la carte (Lon, Lat, Zoom) aux valeurs de départ
    									var button = new OpenLayers.Control.Button({
    										displayClass: "olControlZoomBN",		
    										title: "Réinitialisation Carte",
    										trigger: function() {
    											viewer.getMap().setCenterAtLonLat(LonMaCarte,LatMaCarte, ZoomMaCarte);
    										}
    									});				
    									panel.addControls(button);	
    									
                                       // ========================================================================================= 								   
                                       //Accès au GéoCatalogue
                                       var CSW= new Geoportal.Control.CSW(
                                                   OpenLayers.Util.extend(
                                                           {
                                                               title:"gpControlCSW.title"
                                                           },
                                                           {
                                                               cswUrl:"http://www.geocatalogue.fr/api-public/servicesRest?"
                                                           }
                                                   ))
                                       panel.addControls([CSW]);
     
                                       //Ajout du contrôle de recherche par noms de lieux
                                       var GeoNames= new Geoportal.Control.LocationUtilityService.GeoNames(
                                                   new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
                                                    "PositionOfInterest:OPENLS;Geocode",//layer name
                                                    {
                                                        maximumResponses:100,
                                                        formatOptions: {
                                                        }
                                                   }
                                                   ),{
                                                        drawLocation:true,
                                                        setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
                                                        autoCompleteOptions: {}
                                                   }
                                       );
                                       panel.addControls([GeoNames]);
     
                                       //Ajout du contrôle de recherche par adresses
                                       var Geocode= new Geoportal.Control.LocationUtilityService.Geocode(
                                                   new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
                                                           "StreetAddress:OPENLS;Geocode",//layer name
                                                           {
                                                               maximumResponses:100,
                                                               formatOptions: {
                                                               }
                                                           }
                                                   ),{
                                                           drawLocation:true,
                                                           setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
                                                           autoCompleteOptions: {}
                                                   }
                                       );
                                       panel.addControls([Geocode]);
      
                    },
                    // class of viewer to use :
                    viewerClass:"Geoportal.Viewer.Default"
                }
            );
    	// Pour un affichage EN ENTIER des noms des couches dans le Gestionnaire de couches
    	Geoportal.Control.LayerSwitcher.LAYER_LABEL_MAXLENGTH = 50;
    	Geoportal.Control.LayerSwitcher.LAYER_LABEL_REPLACEMENT_INDEX = 47;
        }
    
     
        window.onload= init;
    //--><!]]></script>
    <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/latest/GeoportalExtended.js"><!--//--><![CDATA[//><!--
    //--><!]]></script>
    </body>
    </html>

  5. #5
    Membre éclairé Avatar de jrenard
    Homme Profil pro
    Webdesigner / développeur front-end
    Inscrit en
    Septembre 2013
    Messages
    456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webdesigner / développeur front-end
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2013
    Messages : 456
    Points : 894
    Points
    894
    Par défaut
    Effectivement, ça marche mieux avec le bon code.

    La différence entre les deux codes est la suivante :
    - le code issu du quickstart ajoute les couches via un viewer.getMap().addLayer(), après création du viewer de la carte dans la fonction initMap (API Javascript bas niveau)
    - le code issu du générateur ajoute les couches via l'options overlays, directement dans la fonction Geoportal.load() qui crée le viewer de la carte (API haut niveau)

    Il y a une différence fondamentale entre ces deux façons de faire, même si les deux permettent l'une comme l'autre d'ajouter des couches vecteurs à la carte.

    Il se trouve que l'ajout par overlays gère bien la simultanéité des couches vecteur (avec pour conséquence une gestion optimale du clic sur le KML), mais que l'ajout par addLayer introduit potentiellement des inégalités entre les couches ajoutées les unes après les autres. Pour résumer : les couches ne sont pas considérées comme étant "au même niveau", et l'une passant au-dessus de l'autre peut potentiellement intercepter l'évènement de clic et ne pas le propager aux couches situées dessous. C'est exactement ce qu'il se passe ici : la couche GPX considérée au-dessus intercepte le clic, qui n'est pas transmis à la couche KML située dessous, donc rien ne se passe sur le KML. Je précise que cette histoire d'ordre est indépendante de l'ordre d'affichage des couches dans le gestionnaire de couches, il s'agit d'ordre d'interception des évènements, ce qui explique que la couche GPX peut intercepter le clic même lorsqu'elle apparaît en-dessous de la couche KML dans le gestionnaire de couches.

    Cette mauvaise gestion de la simultanéité de couches vecteurs peut être contournée de la façon suivante.

    D'abord, enregistrer les couches dans des objets lors de leur création via addLayer :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    var velib = viewer.getMap().addLayer(
      ...
    )
    
    var routes = viewer.getMap().addLayer(
      ...
    )
    Ensuite, définir un contrôle de sélection qui remettra les deux couches au même niveau en les traitant simultanément dans le même contrôle :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // Options du selectControl
    var selectCtrlOpts= OpenLayers.Util.extend( viewer.getMap().getPopupDefaults('KML'), {
    	hover:false,
    	renderIntent: "select",
    	autoActivate: true,
    });
    // Création du selectControl
    var selectCtrl= new OpenLayers.Control.SelectFeature([velib, routes], selectCtrlOpts);
    // Ajout du selectControl
    viewer.getMap().addControl(selectCtrl);
    Avec ça, normalement, plus de problèmes.
    Développeur Web - Agglo La Rochelle
    Anciennement pôle technique Géoportail - IGN
    Twitter : @dje_renard

  6. #6
    Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2014
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mai 2014
    Messages : 71
    Points : 66
    Points
    66
    Par défaut Nickel !
    Nickel !

    Bon, là, malgré vos explications circonstanciées (comme d'hab ), je suis obligé d'avouer que je n'ai rien compris. Je me suis donc contenté, cette fois, d'appliquer la "recette de cuisine" ...

    Mais l'essentiel est là : Çà marche !

    Juste une petite suggestion :
    Modifier le tutoriel de "Débuter avec l'API", pour les paragraphes concernant les couches KML et GPX, afin d'y inclure cette importante correction.


    Vous voyez, comme d'hab je pense aux autres béotiens comme moi ...

    Encore une fois, un grand merci !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. pas d'affichage des statistiques dans navigateur
    Par claire274 dans le forum Statistiques
    Réponses: 2
    Dernier message: 05/07/2008, 00h51
  2. Pas d'affichage des données d'un formulaire
    Par Fresal dans le forum IHM
    Réponses: 4
    Dernier message: 17/06/2008, 22h53
  3. [AJAX] [Struts] Pas d'affichage des boutons lors du raffraîchissement
    Par AnneB dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/07/2007, 14h29
  4. Pas d'affichage des valeurs nulles avec un COUNT
    Par phoenixz22 dans le forum Langage SQL
    Réponses: 13
    Dernier message: 30/05/2007, 19h39
  5. [Swing][ListCellRenderer]Pas d'affichage des composants
    Par Cyberwan dans le forum AWT/Swing
    Réponses: 9
    Dernier message: 08/02/2006, 01h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo