Discussion :

[rgodin]

Bonjour,

Suite à la fin de l'API V2 IGN je me penche donc vers la réécriture de mon application WEB. J'ai réussi à tout réécrire, mais je butte sur un ou deux détails.
1- Avant j'avais réussi avec l'API V2 à personnaliser un certain nombre d’éléments comme les markers et le niveau de zoom prédéfini lorsque je faisais une requête Geocode, Geonames, ou ReverseGeoCode. Comment faire avec l'API V3 et OpenLayers 3 ? Ci joint mon ancien 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
var GeoNames= new Geoportal.Control.LocationUtilityService.GeoNames(
        new Geoportal.Layer.OpenLS.Core.LocationUtilityService("PositionOfInterest:OPENLS;Geocode", { 
            maximumResponses:100,
            formatOptions: {},
            styleMap:new OpenLayers.StyleMap({
                "default": new OpenLayers.Style(
                    OpenLayers.Util.applyDefaults({
                        externalGraphic:"assets/marker.png",
                        graphicOpacity:1.0,
                        pointRadius:24,
                        label:"Accident",
                        labelAlign: "b",
                        labelXOffset: -26,
                        labelYOffset: -35,
                        fontWeight: "bold",
                        fontSize: "16px"
                    },OpenLayers.Feature.Vector.style["default"])),
                "select": new OpenLayers.Style(
                    OpenLayers.Util.applyDefaults({
                        externalGraphic:"assets/marker.png",
                        graphicOpacity:1.0,
                        pointRadius:24
                    },OpenLayers.Feature.Vector.style["select"])),
                "temporary": new OpenLayers.Style(
                    OpenLayers.Util.applyDefaults({
                        externalGraphic:"assets/marker.png",
                        graphicOpacity:1.0,
                        pointRadius:24
                    },OpenLayers.Feature.Vector.style["temporary"]))
            })
        }),{
            drawLocation:true,
            setZoom: function() {return 16}, // Réglage du niveau de zoom
            autoCompleteOptions: {},
            placesOptions: {
                commune:true,
                territory:false,
                importance:false,
                departement:true
            }
        }
    );
    panel.addControls([GeoNames]);

2- Je crois avoir entendu parler du contrôle PrintMap(), mais je ne trouve pas de documentation. Existe-t-il avec l'API IGN V3 et Open Layers 3 ? Avez vous des exemples de code ? Éventuellement connaissez-vous un moyen d'exporter les cartes en PDF si l'impression n'est pas possible ?

[lboulanger]

Bonjour,

Actuellement, il n'est pas possible dans l'API v3 de paramétrer les markers et zooms pour les résultats de géocodage direct et inverse, et aucun contrôle équivalent à PrintMap n'a été mis en place.
Cependant, il existe des solutions de contournement, que je vais essayer de détailler.

1. Paramétrage des markers des résultats du géocodage direct (searchEngine)

Actuellement, il n'est pas possible de paramétrer les styles par défaut des markers des résultats du moteur de recherche. C'est une évolution qu'il faudrait que nous mettions en place prochainement.
Pour contourner le problème en attendant, il existe plusieurs pistes.

* Spécifier une autre image pour le marker

Le marker utilisé pour les résultats est un objet ol.Overlay, dont la propriété "element" est un élément HTML de type 'img', dont la source est définie dans la propriété "_markerUrl" du contrôle SearchEngine. Vous pouvez donc éventuellement modifier cette source pour pointer vers un autre marker, de la manière suivante :

Code :

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

1
2
var searchEngine = ol.control.SearchEngine({(... vos options ...)});
searchEngine._markerUrl = "votre url";

Actuellement, nous utilisons une image encodée en base64 :

Code :

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

searchEngine._markerUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAmCAYAAABpuqMCAAAABHNCS…b1+uaF0pfm3zJ+7zhRGdq1c9eDuwOBOzdLa/OG2X+APwE8DU64Y/5gfAAAAABJRU5ErkJggg=="

* Surcharger la méthode du contrôle pour positionner le marker

Si cela ne vous suffit pas, vous pouvez aussi surcharger la méthode "_setMarker" du controle SearchEngine, dont vous trouverez la définition ici : https://github.com/IGNF/geoportal-ex...Engine.js#L878
Par exemple :

Code :

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

1
2
3
4
var searchEngine = ol.control.SearchEngine({(... vos options ...)});
searchEngine._setMarker = function (position, info) {
	// votre code qui crée et positionne le marker à la position retournée par le géocodage
}

=> Cela vous permettra de créer votre propre marker, avec les interactions que vous souhaitez, mais ça nécessite un peu plus de maîtrise du code.

2. Paramétrage des markers des résultats du géocodage inverse (ReverseGeocode)

Pour le géocodage inverse, c'est légèrement différent :
- il n'est pas possible de paramétrer les styles pour les pointeurs ("pointer un lieu", "dessiner un cercle", "dessiner une emprise"), à moins de surcharger la méthode ReverseGeocode._activateMapInteraction (https://github.com/IGNF/geoportal-ex...eocode.js#L575)
- en revanche il est plus facile de modifier les styles des markers des résultats. En effet, les markers sont cette fois des "features" d'une couche vecteur ol.layer.Vector, créés avec un style par défaut stocké dans ReverseGeocoding._resultsDefaultStyle et un style à la sélection stocké dans ReverseGeocoding._resultsSelectedStyle, que vous pouvez donc surcharger.

Par exemple :

Code :

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

1
2
3
4
5
6
7
8
var reverseGeocode = new ReverseGeocode({... vos options ...});
reverseGeocode._resultsDefaultStyle = new ol.style.Style({
    image : new ol.style.Icon({
        src : "votre source",
        anchor : [0.5, 1]
    })
});

(documentation des styles Ol3 qui peuvent être utilisés : http://openlayers.org/en/latest/apid...yle.Style.html)

3. Paramétrage de zooms prédéfinis pour les différents types de géocodage

Ce n'est pas possible actuellement avec l'extension Ol3, mais c'est une évolution en cours, qui est déjà opérationnelle pour l'extension Leaflet (https://github.com/IGNF/geoportal-extensions/issues/63).


4. contrôle PrintMap()

Concernant le contrôle PrintMap(), il n'y a pas d'équivalent dans l'API v3.
* Une piste possible est d'utiliser la méthode window.print(), en associant à votre page des propriétés CSS spécifiques à l'impression (par exemple dans une feuille de style séparée : <link rel="stylesheet" type="text/css" href="ma_feuille_css_imprimante.css" media="print" /> ).
* Vous pouvez aussi regarder du côté des exemples d'OpenLayers 3 (http://openlayers.org/en/latest/exam...xport-pdf.html).

[rgodin]

Bonjour et merci beaucoup pour votre réponse très précise...
Pour le zoom qui m'intéresse beaucoup(et éventuellement pour les markers) savez-vous quand le(s) fonctions va(vont) être implémentée(s) ?

Bien cordialement

Rodolphe

[lowzonenose]

Pour info
La gestion du zoom sur l'extension SearchEngine sous ol3 est implémentée.
Disponible sur le dépôt github.