page ne fonctionnant plus

**chbaus** · 04/11/2019, 02h01

Bonjour
Après une interruption de plus d'un an je reprends mon site ou je présentais sur une carte différentes randonnées. Malheureusement celui-ci n'affiche plus de carte IGN. Ma clé étant périmée j'en commande une nouvelle en pensant que cela suffirait. je modifie sa valeur dans Geoportal.load(...). mais rien ne se passe. J'ai épuré au maximum la page et toujours rien.
Merci d'avance pour votre aide.

voici le contenu de ma page :

Code HTML :

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
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  </head>
  <body >
    <div id="plancheCartographique" style="width:800px;height:200px;"></div>
 
    <script type="text/javascript">
    
    var RandoSavoie= null;
    function loadcarte()
{          RandoSavoie=Geoportal.load(
            // div's ID:
            'plancheCartographique',
            // API's keys:
            ['ma clé'],
            {// map's center :
                // longitude:
                lon:6.3,
                // latitude:
                lat:45.4
            },
            13,
            // option:
            {language:'fr',
            layers:['GEOGRAPHICALGRIDSYSTEMS.MAPS','ORTHOIMAGERY.ORTHOPHOTOS'],
            layersOptions:{'GEOGRAPHICALGRIDSYSTEMS.MAPS':{visibility:true,opacity:1,name:'Nos randonées'},
            'ORTHOIMAGERY.ORTHOPHOTOS':{ visibility:false,opacity: 0.4,name:'Photo aérienne'}},
            overlays:{},
            }
        );
        
        
};
        window.onload= loadcarte();
         
    </script>
 
 <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/2.0/Geoportal.js"><!-- --></script>
 
  </body>
</html>

**sebastien_2** · 04/11/2019, 09h39

Il faut regarder dans la console JavaScript pour déterminer d'où vient l'erreur.

Il y a une erreur JavaScript dans l'API V2 depuis le mois de janvier : https://www.developpez.net/forums/d1...talextended-js
Comme indiqué dans le sujet, un utilisateur a créé un patch : https://github.com/mborne/geoportal-patch-autoconf

Par contre, il faut savoir que l'API V2 sera définitivement arrêtée le 27 novembre : https://geoservices.ign.fr/blog/2019...s_fin2019.html

**chbaus** · 04/11/2019, 21h58

Merci pour votre réponse.
Je vais regarder le guide de la migration depuis l'api 2.
Mais de n'est pas gagné ...

**chbaus** · 06/11/2019, 01h13

Bonjour.
Je ne vois pas comment démarrer ...
J'ai télécharger l’extension Géoportail pour OpenLayers par téléchargement direct et copier sur monsite/geoportail/openlayers

Puis il est indiqué "Les scripts d’OpenLayers s’obtiennent sur la page de téléchargement d’OpenLayers."
Que faire ? Le pactage ol est-il obligatoire ? si oui comment l'intaller.

pour l'instant ma page reste blanche ...

**sebastien_2** · 06/11/2019, 10h59

Bonjour,

Oui, il faut les fichiers ol.js et ol.css.

La documentation de l'IGN mentionne que leur extension est compatible avec les versions d'OpenLayers de 3.14 à 4.4.2.
La version 4.4.2 peut être téléchargée ici : https://github.com/openlayers/openla...ses/tag/v4.4.2
Le ZIP v4.4.2-dist.zip contient les 2 fichiers en question.

**elias couppe** · 06/11/2019, 15h10

Bonjour,

la documentation n'est malheureusement pas à jour (on corrige ça au plus vite) : la dernière version des extensions géoportail est compatible avec openlayers 5.3.0.

Concernant l'intégration des extensions géoportail via leur bundle à une page web, voici une solution explicite :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <head>
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
        <meta charset="UTF-8"> 
 
        <!-- openlayers head common stuf -->
        <!-- Library OpenLayers -->
        <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
        <!-- Plugin OpenLayers IGN -->
        <link rel="stylesheet" href="chemin/vers/GpPluginOpenLayers-map.css" />
        <!-- Library OpenLayers -->
        <script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
        <!-- Plugin OpenLayers IGN -->
        <script src="chemin/vers/GpPluginOpenLayers-map.js"></script>
 
</head>

Comme sebastien_2 l'a noté, il est également possible de récupérer le bundle openlayers en local --> https://github.com/openlayers/openla...ses/tag/v5.3.0

Dans ce cas, remplacer l'intégration des fichiers ol.css et ol.js distants pour leur chemin local sur votre serveur :

Code HTML :

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

1
2
3
4
5
         <!-- Library OpenLayers -->
        <link rel="stylesheet" href="chemin/vers/ol.css" />
 
        <!-- Library OpenLayers 5.3.0-->
        <script src="chemin/vers/ol.js"></script>

**chbaus** · 11/11/2019, 23h08

Bonjour.
Deux dossiers :../geoportail/ol/ et ../geoportail/openlayers contiennent les fichiers css et js appelés. (version 4.4.2)

Après de multiples essais je refait appel à votre aide car je reste sur une page blanche...

Ci-dessous le contenu de ma page.
Merci pour votre éclairage.

Code HTML :

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
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="edit-type" edit="text/html; charset=UTF-8"/>
        <!-- Library OpenLayers -->
        <link  href="../geoportail/ol/ol.css" rel="stylesheet"/>
        <!-- Plugin OpenLayers IGN -->
        <link rel="stylesheet" href="../geoportail/openlayers/GpPluginOpenLayers.css" />
        <!-- Library OpenLayers -->
        <script src="../geoportail/ol/ol.js"></script>
        <!-- Plugin OpenLayers IGN -->
        <script src="../geoportail/openlayers/GpPluginOpenLayers.js"></script>
 
    </head>
  <body >
    <div id="plancheCartographique" style="width:800px;height:200px;"></div>
 
 <script type="text/javascript">
function cleapi() {
                Gp.Services.getConfig({
                    apiKey: 'macle',
                    onSuccess: affiche })
                   }; 
 
function affiche() {
var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.GeoportalWMTS({
          layer: "ORTHOIMAGERY.ORTHOPHOTOS"
      })
    ],
    controls : [
       new ol.control.GeoportalAttribution()
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([2.294, 48.858]),
      zoom: 17
    })
  });
          };
          
window.onload= cleapi();              
    </script>