API Géoportail / Type de viewers

**chris_13** · 25/08/2015, 19h00

Bonjour,

J'utilise l'api 2D Javascript avec la version 2.1.2. Je rencontre un problème le viewers Default avec tous les panneaux visibles. Lorsque j'active l'option comme précisé dans la document, je ne vois plus la carte affichée et les contrôles sur la toolbar ne fonctionnent pas. Par contre si j'utilise le viewers Standard avec le panneau extérieur à la carte s'affiche bien.

Voici la configuration pour le load du Geoportal mis en place :

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
iv= Geoportal.load(
           // div's ID:
           'viewerContainer',
           // API's keys:
           [API_KEY],
           {
               // longitude:
               lon: 0,
               // latitude:
               lat: 0
           },
           //zoom level
           18,
           //options
           {
               // viewer default controls options overloads :
               componentsOptions:{},
               layers: ["GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS", "CADASTRALPARCELS.PARCELS:WMTS", "ORTHOIMAGERY.ORTHOPHOTOS:WMTS"],
               layersOptions: {
                 "GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS": {
                     "opacity": 1,
                     "visibility": true,
                     "alwaysInRange": true
                 },
                 "CADASTRALPARCELS.PARCELS:WMTS": {"opacity": 1, "visibility": true},
                 "ORTHOIMAGERY.ORTHOPHOTOS:WMTS": {"opacity": 1, "visibility": true}
               },
               overlays:{},
               viewerClass: Geoportal.Viewer.Default
           }
 );

**gcebelieu** · 26/08/2015, 08h12

Bonjour,

le code fourni semble bon : je ne constate pas les dysfonctionnements indiqués chez moi. Avez-vous des messages dans la console de votre navigateur ?

**chris_13** · 26/08/2015, 10h18

Je n'ai pas de message dans la console du navigateur. J'utilise la version 40.0 de Firefox. Serait-il possible que cela vienne de la version de mon navigateur?

**gcebelieu** · 26/08/2015, 10h36

J'ai la même version de FF. Pouvez-vous poster un code HTML complet de page reproduisant le problème (directement en ligne serait un plus) ?

**chris_13** · 26/08/2015, 10h49

Voici le code source de la page écrit en twig. Je ne peux pas vous envoyer de version en ligne car il n'y a pas encore de version en ligne.

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
{% extends 'ProductFrontBundle::base.html.twig' %}

{% block content %}
    <div class="step-form page-casier">
        <div class="container">
            <div class="bloc-form">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Votre plan cadastral</h2>
                        <div class="flash-notice"></div>
                        <form id="search_form">
                            <div class="row">
                                <div class="col-md-2 col-xs-12">
                                    <label class="lineHeight">{{ form_label(search_form.cadastral_address) }}</label>
                                </div>
                                <div class="col-md-8 col-xs-12">
                                    {{ form_widget(search_form.cadastral_address, {'attr': {'class': 'form-control city-autocomplete'} }) }}
                                </div>
                                <div class="col-md-2 text-center">
                                    <button type='button'>Search</button>
                                </div>
                            </div>
                        </form>
                        <div id="result">
                            <div id="viewerContainer"></div>
                            <form  method="post" class="form_AAA" action="{{ path('cadastre_service_form') }}" id="formCasier">
                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        <button type="submit" class="important btn_AAA btn-red">Continue</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initAutoComplete" async defer></script>
    <script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/2.1.2/GeoportalExtended.js" charset="utf-8"></script>
    <script type="text/javascript">
        var iv= null;
        function init() {
            iv= Geoportal.load(
                    // div's ID:
                    'viewerContainer',
                    // API's keys:
                    [API_KEY],
                    {
                        // longitude:
                        lon: -4.306161,
                        // latitude:
                        lat: 48.375977
                    },
                    //zoom level
                    18,
                    //options
                    {
                        // viewer default controls options overloads :
                        componentsOptions:{},
                        layers: ["GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS", "CADASTRALPARCELS.PARCELS:WMTS", "ORTHOIMAGERY.ORTHOPHOTOS:WMTS"],
                        layersOptions: {
                            "GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS": {
                                "opacity": 1,
                                "visibility": true,
                                "alwaysInRange": true
                            },
                            "CADASTRALPARCELS.PARCELS:WMTS": {"opacity": 1, "visibility": true},
                            "ORTHOIMAGERY.ORTHOPHOTOS:WMTS": {"opacity": 1, "visibility": true}
                        },
                        overlays:{},
                        viewerClass: Geoportal.Viewer.Default,
                        onView:function() {
                            viewer=iv.getViewer();
                            //Ajout marker
                            var markers= new OpenLayers.Layer.Markers("Repères");
                            viewer.getMap().addLayer(markers);
                            var size= new OpenLayers.Size(29,75);
                            var offset= new OpenLayers.Pixel(-(size.w/2), -(size.h/2));//centered
                            var icon = new OpenLayers.Icon('/img/viseur.png',size,offset);
                            var ll= new OpenLayers.LonLat(-4.306161,48.375977);
                            ll.transform(OpenLayers.Projection.CRS84, viewer.getMap().getProjection());
                            markers.addMarker(new OpenLayers.Marker(ll,icon));
                        }
                    }
            );
        };
    </script>
{% endblock %}

**gcebelieu** · 26/08/2015, 11h23

ça ne m'avance pas beaucoup : la page HTML *finale* épurée me permettrait de la tester dans mon navigateur.

Pour info votre code dans la page suivante fonctionne chez moi :

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
<!DOCTYPE HTML>
<html>
  <head>
  <title>PB viewer default ?</title>
  <link rel="shortcut icon" type="image/x-icon" href="/geoportail/exemples/img/favicon.ico" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>


  <!--meta http-equiv="cache-control" content="no-cache"-->
 <style>
#viewerContainer {
    height:600px;
    width:800px;
}
     </style>
   </head>
  <body>
<div id="viewerContainer">
</div>
 <script type="text/javascript">
var iv= null;
        function init() {
            iv= Geoportal.load(
                    // div's ID:
                    'viewerContainer',
                    // API's keys:
                    ['API-KEY'],
                    {
                        // longitude:
                        lon: -4.306161,
                        // latitude:
                        lat: 48.375977
                    },
                    //zoom level
                    18,
                    //options
                    {
                        // viewer default controls options overloads :
                        componentsOptions:{},
                        layers: ["GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS", "CADASTRALPARCELS.PARCELS:WMTS", "ORTHOIMAGERY.ORTHOPHOTOS:WMTS"],
                        layersOptions: {
                            "GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS": {
                                "opacity": 1,
                                "visibility": true,
                                "alwaysInRange": true
                            },
                            "CADASTRALPARCELS.PARCELS:WMTS": {"opacity": 1, "visibility": true},
                            "ORTHOIMAGERY.ORTHOPHOTOS:WMTS": {"opacity": 1, "visibility": true}
                        },
                        overlays:{},
                        viewerClass: Geoportal.Viewer.Default,
                        onView:function() {
                            viewer=iv.getViewer();
                            //Ajout marker
                            var markers= new OpenLayers.Layer.Markers("Repères");
                            viewer.getMap().addLayer(markers);
                            var size= new OpenLayers.Size(29,75);
                            var offset= new OpenLayers.Pixel(-(size.w/2), -(size.h/2));//centered
                            var icon = new OpenLayers.Icon('/img/viseur.png',size,offset);
                            var ll= new OpenLayers.LonLat(-4.306161,48.375977);
                            ll.transform(OpenLayers.Projection.CRS84, viewer.getMap().getProjection());
                            markers.addMarker(new OpenLayers.Marker(ll,icon));
                        }
                    }
            );
        };
window.onload = init;
    </script>
<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/2.1.2/Geoportal.js"></script>
  </body>
</html>

API Géoportail / Type de viewers

IGN API Géoportail

Discussions similaires

Partager

Partager