lier evenement google map bounds a l api ign

**smolleyes** · 05/02/2016, 21h30

bonjour

idealement je souhaiterai afficher les images d une requete de ce type

https://wxs.ign.fr/MACLE/inspire/v/w...ML&TILED=FALSE

ma question...

est ce possible de lier ce genre de requête à

Code :

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

1
2
3
4
5

google.maps.event.addListener(map, 'bounds_changed', (function () {
    ..........
}()));

et avoir des tiles ou images a la taille de ma map superposée sur les cartes google maps ?

merci !

**gcebelieu** · 08/02/2016, 10h39

Bonjour,

si vous voulez afficher des tuiles géoportail dans votre application utilisant l'API GMaps, vous avez un tutoriel ici :

http://api.ign.fr/documentation/324/...pi-google-maps

ça n'utilise pas l'événement google maps bounds, mais ça marche très bien

**smolleyes** · 08/02/2016, 11h26

Envoyé par gcebelieu

Bonjour,

si vous voulez afficher des tuiles géoportail dans votre application utilisant l'API GMaps, vous avez un tutoriel ici :

http://api.ign.fr/documentation/324/...pi-google-maps

ça n'utilise pas l'événement google maps bounds, mais ça marche très bien

Bonjour

j utilise déjà cette methode depuis un moment

mais...

1 / depuis quelques temps je me mange un beau 403 sur mes requêtes, je passai la verification par le user-agent Android ça ne semble plus fonctionner et je ne vois pas comment modifier le header sur les requêtes
2 / est ce que cette methode s'applique au type de requête que j'ai indiqué (tile + cumule des couches batiments / routes et numeros d'adresses surtout) ?

merci

cdt

edit : si j essaye avec la methode getTile j'ai un beau

Code :

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

1
2
<ServiceException code="MissingBBox">GetMap requests must include a BBOX parameter.</ServiceException>

**smolleyes** · 08/02/2016, 11h35

Bonjour

j utilise déjà cette methode depuis un moment

mais...

1 / depuis quelques temps je me mange un beau 403 sur mes requêtes, je passai la verification par le user-agent Android ça ne semble plus fonctionner et je ne vois pas comment modifier le header sur les requêtes
2 / est ce que cette methode s'applique au type de requête que j'ai indiqué (tile + cumule des couches batiments / routes et numeros d'adresses surtout) ?

merci

cdt

edit : si j essaye avec la methode getTile j'ai un beau

Code :

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

1
2
<ServiceException code="MissingBBox">GetMap requests must include a BBOX parameter.</ServiceException>

puisque

Code :

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

<ServiceException code="OperationNotSupported" locator="GetTile">No such operation WMS 1.3.0 GetTile</ServiceException>

je vais voir vu que gmap a également un methode getMap s il est possible d utiliser la meme methode qu'avec getTitle mais en utilisant les signaux bounds_changed ...

**gcebelieu** · 08/02/2016, 12h14

OK, désolé, j'ai répondu rapidement sans voir qu'il s'agissait d'une requête WMS (GetMap) et non WMTS (GetTile).

Du coup, par rapport à votre problème :

1/ pour les erreurs 403 :

si vous n'avez pas changé d'utilisation (même user-agent pour la même clef), il n'y a pas de raison que les requêtes se prennent un 403, à moins que la clef soit périmée (vérifiez la date de validité) ou que les ressources demandées - service, couches - soient différentes (est-ce la cas) ?

2/ pour la méthode :

il y a peut-être moyen d'adapter la méthode du tutoriel aux requêtes WMS. Il faudrait que la méthode

Code :

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

1
2
3
4
5
getTileUrl: function(tileCoord,zoom) {
	    var url=...
            return url
},

convertisse les paramètres tileCoord et zoom en BBOX pour pouvoir fabriquer la requête WMS correspondante. Pour cela, il faut connaitre l'organisation du tuilage des couches Google qui est la même que celle du Géoportail en WebMercator. Là dessus, vous pouvez trouver des éléments ici :

http://api.ign.fr/tech-docs-js/fr/developpeur/wmts.html (pour l'organisation des tuiles)

et ici :

http://api.ign.fr/tech-docs-js/fr/we...s_du_Goportail (pour connaitre la résolution - taille des pixels - pour chaque niveau de zoom)

C'est assez technique, mais c'est faisable.

**smolleyes** · 08/02/2016, 13h32

hello

ok merci pour la réponse

1 / non je n'ai rien changé et la clef est la même que la requete que j'ai posté, j ai verifie le getCapabilities et j ai bien droit aux orthoimages... je comprend pas le soucis
si vous avez un mail direct je peut vous donner ma clé voir s 'il y a un soucis

detail (xxx =maclé...)

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
Remote Address:160.92.169.129:80
Request URL:http://wxs.ign.fr/xxxxxxxxxx/wmts?LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS&FORMAT=image/jpeg&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&STYLE=normal&TILEMATRIXSET=PM&TILEMATRIX=12&TILEROW=1413&TILECOL=2078
Request Method:GET
Status Code:403 Forbidden

request headers:
Provisional headers are shown
Accept:image/webp,*/*;q=0.8
User-Agent:Android

query strings

LAYER:GEOGRAPHICALGRIDSYSTEMS.MAPS
FORMAT:image/jpeg
SERVICE:WMTS
VERSION:1.0.0
REQUEST:GetTile
STYLE:normal
TILEMATRIXSET:PM
TILEMATRIX:12
TILEROW:1413
TILECOL:2078

2/ je vais voir avec un getMap et adapter ça à l api ign si ça ne marche pas j essaierai votre méthode, je posterai mes retours pour la communauté

merci

edit: pour votre méthode peut être une piste ici :

http://stackoverflow.com/questions/2...to-tile-pixels

**gcebelieu** · 08/02/2016, 14h48

Vous pouvez envoyer votre clef à contact.api@ign.fr en faisant référence à cette discussion du forum en expliquant votre contexte d'utilisation.

On pourra regarder ce qui cloche.

**smolleyes** · 08/02/2016, 15h20

Envoyé par gcebelieu

Vous pouvez envoyer votre clef à contact.api@ign.fr en faisant référence à cette discussion du forum en expliquant votre contexte d'utilisation.

On pourra regarder ce qui cloche.

j ai envoyé un mail

et j ai une erreur 401 pas 403 pardon :/

**tcoupin** · 09/02/2016, 10h12

Bonjour,

nous avons bien reçu votre clé. C'est une clé de type SIG qui a une sécurisation login/passwd.
Le code 401 indique que le login/passwd fourni n'est pas bon (en fait il n'est pas fourni).
Pour une page web (est-ce votre cas ?), il faut une clé web sécurisée par referer (=url du site).

Thibault

**smolleyes** · 09/02/2016, 10h43

bonjour

merci pour votre retour

non c'est une application nwjs (node-webkit)

je ne pense pas pouvoir donner mon identifiant / mot de passe par l appli ... pourquoi cela marchait il avant juste avec le user-agent (ce qui m arrange plus) ?

merci

cdt

**tcoupin** · 09/02/2016, 11h46

A l'heure actuelle, votre clé est sécurisée par login/passwd et a le droit aux ressources suivantes :
- CP.CadastralParcel, OI.OrthoimageCoverage, OI.OrthoimageCoverage.HR sur http://wxs.ign.fr/CLE/inspire/r/wms
- AD.Address, BU.Building, TN.RoadTransportNetwork sur http://wxs.ign.fr/CLE/inspire/v/wms

Pour une utilisation de ces ressources dans une appli nwjs, la sécurisation par login/passwd ou referer est difficilement réalisable. Il est préférable de privilégier une sécurisation User-Agent (https://github.com/nwjs/nw.js/wiki/m...mat#user-agent).

Je vous propose donc de modifier la sécurisation de votre clé avec le User-Agent que vous nous fournirez.

Thibault

**smolleyes** · 09/02/2016, 15h47

Bonjour

quelle procédure suivre pour vous envoyer un user-agent (sachant que je peut mettre ce que je veux en user-agent...) si possible de juste mettre 'Android' cela me va ...

pourquoi n ais je pas accès aux couches

ORTHOIMAGERY.ORTHOPHOTOS

et

GEOGRAPHICALGRIDSYSTEMS.MAPS

comme indiqué dans mon contrat ?

merci pour votre aide

cdt

edit :

peut être un bug je ne sais pas mais dans mon compte sur professionnels.ign.fr il est bien indique

Données Durée Conditions d'accès prix HT
03/10/2016 Licence de consultation INSPIRE

WMS-Raster-INSPIRE - Ortho-imagerie
WMS-Raster-INSPIRE - Ortho-imagerie HR
WMS-Raster-INSPIRE - Parcelles cadastrales
WMS-Vecteur-INSPIRE - Adresse
WMS-Vecteur-INSPIRE - Bâtiments
WMS-Vecteur-INSPIRE - Réseau de transport routier

Valable 1 an 0,00 €

**gcebelieu** · 09/02/2016, 16h36

Bonjour,

quelle procédure suivre pour vous envoyer un user-agent (sachant que je peut mettre ce que je veux en user-agent...) si possible de juste mettre 'Android' cela me va ...

pour le User-Agent, il faut que vous demandiez à l'IGN de sécuriser votre clef avec le User-Agent qu'enverra votre application lorsqu'elle enverra des requêtes sur wxs.ign.fr. Le choix vous appartient : si l'IGN sécurise avec "Android" il faudra que votre application envoie "Android" pour que les requêtes passent. Ma préco est que vous choisissiez un identifiant qui vous est propre et que vous êtes sur d'envoyer à chaque fois, plutôt qu'un UA que plein d'autres applications sont susceptibles d'envoyer.

Vous pouvez transmettre le UA à associer à votre clef toujours via le mail contact.api@ign.fr tout en demandant d'enlever la sécurisation par login/passwd, toujours en référence à cette discussion.

pourquoi n ais je pas accès aux couches

ORTHOIMAGERY.ORTHOPHOTOS

et

GEOGRAPHICALGRIDSYSTEMS.MAPS

comme indiqué dans mon contrat ?

Peut-être s'agit-il d'un autre contrat (en WMTS ?). La clef que vous avez fournie ne donne accès qu'au service inspire WMS qui ne délivre que les couches citées par tcoupin. Au passage la couche OI.OrthoimageCoverage couvre une partie de la couche ORTHOIMAGERY.ORTHOPHOTOS. Par contre la couche GEOGRAPHICALGRIDSYSTEMS.MAPS n'est pas délivrée par le service inspire car elle n'entre pas dans la règlementation de la directive européenne éponyme. Il faut pour cela passer par le service wmts (ou wms) "géoportail" : wxs.ign.fr/CLEF/geoportail/wmts(ou r/wms).

**smolleyes** · 09/02/2016, 16h58

ok je fais un mail de suite je vais voir pour un UA customisé ...

tant pis pour la couche ortho de toute façon je pourrai utiliser la vue de google map et utiliser (si j y arrive avec les tiles...) les couches batiments, adresses et routes de l ign sur un calque superieur c'est surtout ça dont nous avons besoin ...

j'ai d ailleur vu que sur tab.geoportail.fr des requetes sont faites avec GetTile pour les couches batiments et routes

exemple:

http://wxs.ign.fr/j5tcdln4ya4xggpdu4...AT=image%2Fpng

j'ai accès à ces ressources avec ma clé si j'ai bien compris ?

merci beaucoup

**gcebelieu** · 09/02/2016, 17h41

Envoyé par smolleyes

ok je fais un mail de suite je vais voir pour un UA customisé ...

tant pis pour la couche ortho de toute façon je pourrai utiliser la vue de google map et utiliser (si j y arrive avec les tiles...) les couches batiments, adresses et routes de l ign sur un calque superieur c'est surtout ça dont nous avons besoin ...

Si vous y arrivez avec les batiments couches et adresses, vous y arriverez avec l'ortho IGN (OI.OrthoimageCoverage).

j'ai d ailleur vu que sur tab.geoportail.fr des requetes sont faites avec GetTile pour les couches batiments et routes

exemple:

http://wxs.ign.fr/j5tcdln4ya4xggpdu4...AT=image%2Fpng

j'ai accès à ces ressources avec ma clé si j'ai bien compris ?

Comme vous l'avez noté, votre clef donnes accès aux ressources :

WMS-Vecteur-INSPIRE - Adresse
WMS-Vecteur-INSPIRE - Bâtiments
WMS-Vecteur-INSPIRE - Réseau de transport routier

vous pourrez y accéder à l'aide du service WMS vecteur inspire (http://wxs.ign.fr/CLEF/geoportail/v/wms) ; donc avec des requêtes de type GetMap alors que l'application tablette utilise le service WMTS géoportail (http://wxs.ign.fr/j5tcdln4ya4xggpdu4...eoportail/wmts) donc avec des requêtes de type GetTile.

Concrètement les données d'origine sont les mêmes (Bases de données IGN), mais le protocole pour y accéder est différent et les droits d'accès aussi.

**smolleyes** · 10/02/2016, 10h50

bonjour

tout fonctionne pour moi

j'attend juste ma sécurisation par header pas encore active

voici le code que j utilise comme promis pour une carte google map avec couche batiment + numeros d adresses IGN par dessus

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
function calculateBBOX(coordinates,zoomlvl){
    var bbox = '479406.21274558,6807170.2079419,484298.18255515,6812062.1777515';

    var lULP = new google.maps.Point(coordinates.x*256,(coordinates.y+1)*256);
    var lLRP = new google.maps.Point((coordinates.x+1)*256,coordinates.y*256);

    var projectionMap = new MercatorProjection();

    var lULg = projectionMap.fromDivPixelToSphericalMercator(lULP, zoomlvl);
    var lLRg  = projectionMap.fromDivPixelToSphericalMercator(lLRP, zoomlvl);

    var lUL_Latitude = lULg.y;
    var lUL_Longitude = lULg.x;
    var lLR_Latitude = lLRg.y;
    var lLR_Longitude = lLRg.x;
    //GJ: there is a bug when crossing the -180 longitude border (tile does not render) - this check seems to fix it
    if (lLR_Longitude < lUL_Longitude){
        lLR_Longitude = Math.abs(lLR_Longitude);
    }
    bbox= lUL_Longitude + "," + lUL_Latitude + "," + lLR_Longitude + "," + lLR_Latitude;
    return bbox;
}

function bound(value, opt_min, opt_max) {
    if (opt_min != null) value = Math.max(value, opt_min);
    if (opt_max != null) value = Math.min(value, opt_max);
    return value;
}

function degreesToRadians(deg) {
    return deg * (Math.PI / 180);
}

function radiansToDegrees(rad) {
    return rad / (Math.PI / 180);
}

function MercatorProjection() {
    var MERCATOR_RANGE = 256;
    this.pixelOrigin_ = new google.maps.Point(
    MERCATOR_RANGE / 2, MERCATOR_RANGE / 2);
    this.pixelsPerLonDegree_ = MERCATOR_RANGE / 360;
    this.pixelsPerLonRadian_ = MERCATOR_RANGE / (2 * Math.PI);
};

MercatorProjection.prototype.fromLatLngToPoint = function(latLng, opt_point) {
    var me = this;

    var point = opt_point || new google.maps.Point(0, 0);

    var origin = me.pixelOrigin_;
    point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
    // NOTE(appleton): Truncating to 0.9999 effectively limits latitude to
    // 89.189.  This is about a third of a tile past the edge of the world tile.
    var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999, 0.9999);
    point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) * -me.pixelsPerLonRadian_;
    return point;
};

MercatorProjection.prototype.fromDivPixelToLatLng = function(pixel, zoom) {
    var me = this;

    var origin = me.pixelOrigin_;
    var scale = Math.pow(2, zoom);
    var lng = (pixel.x / scale - origin.x) / me.pixelsPerLonDegree_;
    var latRadians = (pixel.y / scale - origin.y) / -me.pixelsPerLonRadian_;
    var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2);
    return new google.maps.LatLng(lat, lng);
};

MercatorProjection.prototype.fromDivPixelToSphericalMercator = function(pixel, zoom) {
    var me = this;
    var coord = me.fromDivPixelToLatLng(pixel, zoom);

    var r= 6378137.0;
    var x = r* degreesToRadians(coord.lng());
    var latRad = degreesToRadians(coord.lat());
    var y = (r/2) * Math.log((1+Math.sin(latRad))/ (1-Math.sin(latRad)));

    return new google.maps.Point(x,y);
};


function initialize(init) {
  if(map) {
    map.unbindAll()
  }
  geocoder = new google.maps.Geocoder();
  sv = new google.maps.StreetViewService();

  var latlng = new google.maps.LatLng(start.split(',')[0],start.split(',')[1]);
  counter = 0;


  function CoordMapType(tileSize) {
    this.tileSize = tileSize;
  }
  
  CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('div');
    var bbox = calculateBBOX(coord,zoom);
    var url = 'https://wxs.ign.fr/VOTRECLEAPI/inspire/v/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&LAYERS=BU.Building,AD.Address&STYLES=&CRS=EPSG:3857&BBOX='+bbox+'&WIDTH=256&HEIGHT=256&FORMAT=image/png&TRANSPARENT=TRUE&EXCEPTIONS=XML';
    div.innerHTML = '<img src="'+url+'" />';
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    return div;
  };

  var mapOptions = {
    zoom: 11,
    center: latlng,
    streetViewControl: true,
    mapTypeId: 'roadmap',
    mapTypeId: 'IGNLayer',
    mapTypeId: 'hybrid',
      center: new google.maps.LatLng(48.689179,2.510981),
      zoom: 10,
      mapTypeControlOptions: {
        mapTypeIds: ['IGNLayer','roadmap','hybrid']
      }
  }
    map = new google.maps.Map($('#map-canvas')[0],mapOptions);
    
    map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));

    var myStyles =[
      {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
          { "visibility": "off" }
        ]
      },{
        "featureType": "transit",
        "stylers": [
          { "visibility": "off" }
        ]
      }
    ]
    map.setOptions({styles: myStyles});

}