openlayers la recherche n'aboutit pas

**erichissime** · 26/03/2017, 00h40

Bonsoir
j'ai essayé cet exemple de recherche par adresse trouvé là
http://jsfiddle.net/ignfgeoportail/q...t,js,html,css/
et la recherche n'aboutit pas.
Pouvez-vous m'aiguiller svp ?

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
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://openlayers.org/en/v4.0.1/css/ol.css">
<script type="text/javascript" src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<script type="text/javascript" src="https://depot.ign.fr/geoportail/extensions/ol3/develop/bin/GpPluginOl3.js"></script>
<link rel="stylesheet" type="text/css" href="https://depot.ign.fr/geoportail/extensions/ol3/develop/bin/GpPluginOl3.css">
    
  

  <style type="text/css">
    #map {
    padding: 5px;
    width: 100%;
    height: 600px;
    box-shadow: 0 0 10px #999;
}

#info {
    padding: 5px;
    width: 100%;
    height: 20px;
    font-family: "monospace";
    font-size: 10px;
}

  </style>

  <title>OL3 Géoportail Ext : Moteur de recherche by ignfgeoportail</title>

  <script type='text/javascript'>//<![CDATA[
window.onload=function(){
function go() {
    var cartesLyr = new ol.layer.GeoportalWMTS({
                layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
            }) ;
    var map = new ol.Map({
        target: 'map',
        layers: [
            cartesLyr
        ],
        view: new ol.View({
            center: [288074.8449901076, 6247982.515792289],
            zoom: 12
        })
    });    
    var searchControl = new ol.control.SearchEngine({
    });
    map.addControl(searchControl);
}

Gp.Services.getConfig({
    apiKey: "jhyvi0fgmnuxvfv0zjzorvdn",
    onSuccess: go
});

var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> Extension OL3 version " + Gp.ol3extVersion + " (" + Gp.ol3extDate + ")</p>";

}//]]> 

</script>

  
</head>

<body>
  <div id="map"></div>
<div id="info"></div>

  
  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "qpcyp8nr"
    }], "*")
  }
</script>

</body>

</html>

**mga_geo** · 26/03/2017, 08h14

Bonjour,

Que tapez-vous dans la zone de recherche ?
L'auto-complétion fonctionne au fur et à mesure ?

**erichissime** · 26/03/2017, 08h58

hello
j'ai mis une simple ville pour commencer
non elle ne fonctionne pas
au bout de 3 lettres il y a une ombre qui apparait sous la barre mais c'est tout

**IGNC_XT** · 27/03/2017, 09h46

Bonjour,
Petite question au passage : Avez-vous utilisé cet exemple en localhost ou sur votre propre site?
En effet, le code que vous avez indiqué utilise une clé dont les referre sont localhost ou le site de démo de l'IGN.

Xavier

**erichissime** · 27/03/2017, 11h45

bonjour,
Je l'utilise en local et l'ouvre dans un navigateur.
Les cartes s'affichent.

**erichissime** · 27/03/2017, 14h04

En fait mon objectif est d'utiliser les ressources en lignes d'openlayers à partir d'une page html locale, à la quelle je rajouterai des couches vecteurs kml, tout en donnant la possibilité de modifier ou de rechercher des lieux.

**IGNC_XT** · 28/03/2017, 08h19

Bonjour,
J'ai exactement copié/collé le code de votre post, l'ai mis dans un fichier html que j'ai posé sur un serveur localhost (exemple de caddy server) et la recherche aboutit.

**erichissime** · 28/03/2017, 23h47

cela veut-il dire que je suis obligé de passer par un serveur ?
Je ne sais pas comment marche caddy server, le guide indique des lignes de commandes...

**erichissime** · 29/03/2017, 01h06

bon j'ai reussi à installer et demarrer un mini serveur Tiny

mais comme il y a des numéros de versions, mes html continueront-ils à fonctionner si les versions évoluent ?

**IGNC_XT** · 29/03/2017, 09h57

Par numéro de version, je suppose que vous évoquez les bibliothèques javascript appelées.
Là vous êtes dépendant de liens URL dont vous n'avez pas l'assurance qu'ils seront maintenus ad vitam.

La solution serait de rapatrier les bibliothèques javascript sur votre mini serveur tel que réalisé dans le chapitre mise en œuvre à cette page : https://geoservices.ign.fr/documenta...mise-en-oeuvre

**erichissime** · 29/03/2017, 23h49

ok j'ai essayé en locale avec ce code
et il n'y a que la couche OSM qui s'affiche et Internet explorer me demande un nom d'utilisateur et un mot de passe.
Il faut que cela fonctionne aussi sur IE

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
<html>
    <head>
        <!-- Library OpenLayers 3 -->
        <link rel="stylesheet" type="text/css" href="/v4.0.1/css/ol.css">
		<script type="text/javascript" src="/v4.0.1/build/ol.js">
		</script>
        <!-- Extension Géoportail pour OpenLayers 3 -->
		<link rel="stylesheet" type="text/css" href="/ol3/GpPluginOl3.css"> 
        
		<script type="text/javascript" src="/ol3/GpPluginOl3.js">
		</script>

			<style type="text/css">
   #map {
    padding: 5px;
    width: 100%;
    height: 300px;
    box-shadow: 0 0 10px #999;
}

#info {
    padding: 5px;
    width: 100%;
    height: 20px;
    font-family: "monospace";
    font-size: 10px;
}
  </style>
 
    </head>
    <body>
        <script type='text/javascript'>//<![CDATA[
            window.onload = function () {
                Gp.Services.getConfig({
                    apiKey: 'CLE_API',
                    onSuccess: function (response) {
                        // votre utilisation de l'extension Géoportail pour OpenLayers 3
						

    var osmLyr = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var map = new ol.Map({
        target: 'map',
        layers: [
            osmLyr,
            new ol.layer.GeoportalWMTS({
                layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
            }),
            new ol.layer.GeoportalWMTS({
                layer: "ORTHOIMAGERY.ORTHOPHOTOS",
                olParams: {
                    opacity: 0.7
                }
            })
        ],
        view: new ol.View({
            center: [288074.8449901076, 6247982.515792289],
            zoom: 12
        })
    });    
    var lsControl = new ol.control.LayerSwitcher({
        layers : [{
            layer: osmLyr,
            config: {
                title: "OSM",
                description: "Couche OpenStreet Map",
            }
        }], 
        options : {
            collapsed: true
        }
    });
    map.addControl(lsControl);


var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> Extension OL3 version " + Gp.ol3extVersion + " (" + Gp.ol3extDate + ")</p>";

}
//]]> 
})
}
        </script>
	<div id="map"></div>
	<div id="info"></div>

    </body>
</html>

**IGNC_XT** · 29/03/2017, 23h58

Avez-vous remplacé apiKey: 'CLE_API' par une clé API de l'IGN configurée sur professionnels.ign.fr ?

**erichissime** · 30/03/2017, 00h48

biensur que j'ai mis ma propre clé

**IGNC_XT** · 30/03/2017, 09h10

Bonjour,
J'ai pris votre code et ai juste modifié les accès au script et css.
Chez moi cela donne cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
<!-- OL3 -->
		<script src="http://openlayers.org/en/v3.17.1/build/ol-debug.js" type="text/javascript"> </script>
				<!-- Extension Géoportail pour OL3. Attention la clé périme le 10/08/2017-->
		<script  src="http://localhost/apis/GpOpenLayers3/ol3/GpPluginOl3.js" type="text/javascript"></script>

<!-- Styles CSS -->
		<!-- Styles d'OL3 (par exmple les styles des boutons zoom+ et zoom-) -->
 		<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
		<!-- Styles de l'extension Géoportail pour OL3 -->
		<link rel="stylesheet" href="http://localhost/apis/GpOpenLayers3/ol3/GpPluginOl3.css" />

Certes je n'ai pas rapatrié OL.js mais GpPluginOl3.js si, et cela fonctionne très bien.

Si ce n'est pas vos chemins relatifs (ne pas oublier par exemple le ../ dans vos href pour naviguer dans les dossiers par rapport au dossier de votre page), il faut vérifier votre clé et l'allocation des bonnes ressources.
Que donne la console de débugage (F12 dans firefox) ?

**erichissime** · 31/03/2017, 00h41

bonsoir
alors sur le code actuel dans la console il y a
401 Authorization Required pour les couches wmts
https://wxs.ign.fr/cle api/geoportail/wmts?gp-ol3-ext=0.11.0&layer=GEOGRAPHICALGRIDSYSTEMS.MAPS&style=normal&tilematrixset=PM&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix=12&TileCol=2077&TileRow=1409
et internet explorer m'affiche en effet une fenetre d'authentification.
pourtant ma clé est bonne
ça pourrait venir de la configuration ?