====== OpenLayers3 (2018, part 2) ======
Dans un contexte client/serveur web, comment piloter les styles à appliquer aux couches de données à afficher dans l'application de webmapping. C'est l'objet de cette partie.

===== 4. Pilotage server-side =====
__Pré-requis :__ avoir accès à une installation de GeoServer
  * suivre la 1ère section du Tutoriel [[geoinf18:geolastic|GeoServer@jElastic]]
  * ou installer GeoServer en local : https://docs.geoserver.org/stable/en/user/installation/index.html

==== A. Publier une couche de données ====
Il s'agit de publier une couche de gédonnées qui peut être un shapefile (le cas ici) ou une géotable dans une base de données PostgreSQL/PostGIS. Il faut donc d'abord alimenter/connecter GeoServer avec ces géodonnées.

**Objectif 1 :** copier le shapefile vers GeoServer
  * Dans le cas d'un déploiement [[geoinf18:geolastic|GeoServer avec Jelastic]], se connecter en Web SSH sur le serveur de déploiement GeoServer sur Jelastic \\ {{:geoinf18:screenshot_from_2018-11-27_18-25-53.png?nolink|}}
  * Charger la couche de données dans le dossier de stockage des données de GeoServer en exécutant les commandes suivantes avec la console Web SSH<code>
cd /var/geoserver/datadir/
mkdir geodata
cd geodata
wget 'https://drive.switch.ch/index.php/s/Eb56mUvMSrKkKqo/download' -O pk25.zip
unzip pk25.zip
</code>
  * __Remarque :__ dans le cas d'une installation en local, il faut localiser le dossier de stockage qui peut aussi dépendre de l'OS utilisé, exemple /home/olivier/Applications/geoserver-2.14.0/data_dir

**Objectif 2 :** configurer la publication avec GeoServer
  * Retourner se loguer au back-office web de GeoServer
  * Créer un **Workspace** par défaut (exemple : geoinf -> http://mediamaps.ch/geoinf)
  * Créer un **Store** de type //Directory of spatial files (shapefiles)//
    * nommer le Store, par exemple //geoinf-data//
    * explorer/pointer le dossier //geodata// préalablement créé \\ {{:geoinf18:screenshot_from_2018-11-27_18-44-17.png?nolink|}} et sauver le Store
  * Publier la couche de données //pk25_decoupage_251// comme le propose immédiatemment d'interface
  * Dans l'onglet **Data**
    * raccourcir le nom de la **Layer** avec l'intitulé //pk25//
    * définir le SRS approprié pour la géodonnées à publier (ici EPSG:4326) - utiliser le //SRS finder// si besoin
    * faire calculer l'enveloppe géographique en SRS natif --> //Compute from data//
    * de même en Lat/Lon --> //Compute from native bounds//
    * sauvegarder la configuration de la **Layer**
  * Avec l'outil Layer Preview, visualiser le rendu cartographique par défaut servi par le géoservice WMS de GeoServer (ex. format PNG) \\ {{:geoinf18:screenshot_from_2018-11-27_18-55-00.png?nolink|}}
  * Résultat : \\ http://docker4785-env-5840548.jcloud.ik-server.com/geoserver-master/geoinf/wms?service=WMS&version=1.1.0&request=GetMap&layers=geoinf:pk25&styles=&bbox=5.873513,45.802669,10.684721,47.86446&width=768&height=330&srs=EPSG:4326&format=image%2Fpng

**Objectif 3 : intégration avec OpenLayers** 
  * Ajouter cette couche dans votre application de webmapping réalisée au [[https://mediamaps.ch/doku.php?id=geoinf18:oltuto1#d_un_controle_layerswitcher_plus_souple|point 3d]]. \\ {{:geoinf18:screenshot_from_2018-11-27_19-01-20.png?nolink|}}

  * Publier une autre couche de données de votre choix et l'intégrer dans votre application (ex. avec les shapefiles ici https://drive.switch.ch/index.php/s/0BjD03Uz4zF5eYW)
==== B. Personnaliser un style avec l'extension GeoCSS ====
Il s'agit de créer un code cartographique pour personnaliser le rendu fait par GeoServer. Pour cela le langage utilisé est [[https://docs.geoserver.org/stable/en/user/styling/css/index.html|GeoCSS]], s'inspirant fortement du CSS du W3C.

__Pré-requis :__ avoir accès un GeoServer avec l'extension GeoCSS 
  * suivre la 2nde section du Tutoriel [[geoinf18:geolastic|GeoServer@jElastic]] 
  * pour une installation en local, voir cette même 2nde section

**Objectif 1 : définition d'un style interne personnalisé**
Le style créé a pour but de représenter le découpage PK25 d'une autre manière que le style par défaut //polygon//
  * Se connecter au back-office de GeoServer
  * Créer un **Style** et le nommer //pk25style//
  * Choisir le format CSS (uniquement avec l'[[https://mediamaps.ch/doku.php?id=geoinf18:geolastic#ajouter_l_extension_geocss|extension GeoCSS correctement installée]])
  * Générer une base de code cartographique pour la représentation d'entités géographiques de type POLYGON
  * Ajouter la propriété GeoCSS de contrôle de la transparence comme suit:<code>
* {
    stroke: #000000;
    stroke-width: 2;
    
    fill: #ffcc00;
    fill-opacity: 0.6;
}
</code>
  * Sauvegarder le style
  * Visualiser la layer pk25 avec le Layer Preview par une requête WMS qu formqt PNG
  * Dans la requête définir le **paramètre //styles=//** comme suit<code>
http://...&request=GetMap&layers=geoinf:pk25&styles=pk25style&...
</code>

**Objectif 2 : utilisation du style interne personnalisé avec OpenLayers**
Ajouter dans l'application réalisée au point 3d la layer pk25 avec le style personnalisé //pk25style// en configurant l'instance //ol.source.ImageWMS// comme suit (avec le ##MYSERVERNAME## qui va bien) :<code>
source: new ol.source.ImageWMS({
    url: "http://##MYSERVERNAME##.jcloud.ik-server.com/geoserver-master/geoinf/wms",
    params: {
        VERSION: "1.0.0",
        LAYERS: 'pk25',
        FORMAT: 'image/png',
        STYLES: 'pk25style'
    }
})
</code>

**TODO : "labeling"**
GeoCSS offre des possibilités d'étiquettage des entités géographiques à représenter (on parle de labeling) :
  * Ajouter un label avec l'attribut ''Name'' (voir https://docs.geoserver.org/stable/en/user/styling/css/properties.html#text-symbology-labeling-part-1)
  * Limiter l'affichage du labeling à partir d'un certain niveau d'échelle (voir https://docs.geoserver.org/stable/en/user/styling/css/filters.html#filtering-by-rendering-context-scale) 

<code>
/* These GeoCSS instructions should work as a scale-controlled display of labels */ 
* {
    stroke: #000000;
    stroke-width: 2;
  
    /* no fill
    fill: #ffcc00;
    fill-opacity: 0.6;
    */
    
    [@sd <= 800k] {
      label: [Name];
      label-anchor: 0.5, 0.5;
      
      font-fill: black;
      font-size: 40;
      font-weight: bold;
      
      halo-color: white;
      halo-radius: 2;
    }
}
</code>


===== 5. Pilotage client-side =====
Jusqu'à présent, c'est le serveur qui fait tourner son moteur cartographique pour créer une représentation image des données géographiques et ceci sur la base de styles prédéfinis (ex. avec les langages SLD ou GeoCSS dans GeoServer). Voyons comment le client peut dire son mot et piloter le style “à distance”.

==== A. Préliminaire CartoCSS ====
Découverte d'une intéressante plateforme cartographique, CARTO (aka CartoDB) et du langage CartoCSS.
  - Naviguer vers https://oertz.carto.com/datasets
  - Choisir le dataset **geoinf_contour_yverdon** (fabriqué avec QGIS à partir du [[https://drive.switch.ch/index.php/s/AzQ7OY28BZxBsEr|MNT N46E006.hgt]], Modèle Numérique de Terrain)
  - Choisir "Create map" (le cas échéant créer un compte)
  - Renommer la carte "Jouons avec CARTO!"
  - Elle se compose d'une layer nommé "cartodb_query_N", la renommer "contour_yverdon_label"
  - Sélectionner cette layer et utiliser le sélecteur MAP|DATA \\ {{:geoinf18:screenshot_from_2018-11-27_22-01-28.png?nolink|}}
  - Editer le style pour **afficher les altitudes sur les lignes de contour** : 
    * l'UI Style Editor est pratique et avec le sélecteur VALUES|CARTOCSS on peut passer dans un mode "code cartographique" pour affiner la description de style et accéder aux [[https://carto.com/docs/carto-engine/cartocss/properties/|instructions CartoCSS]]
    * voir aussi {{:geoinf16:cartocss.pdf|Custom basemap tiles with CartoCSS, J. Freyre, 2014}} \\ {{:geoinf18:screenshot_from_2018-11-27_22-06-38.png?nolink|}}
<code>
/* These CartoCSS instructions should display elevation labels along the contour lines */
#layer {
  line-width: 2;
  line-color: #890500;
  line-opacity: 1;
}

#layer::labels {
  text-name: [elevation];
  text-face-name: 'DejaVu Sans Book';
  text-size: 14;
  text-fill: #ffffff;
  text-label-position-tolerance: 0;
  text-halo-radius: 1;
  text-halo-fill: #000000;
  text-dy: 4;
  text-allow-overlap: true;
  text-placement: line;
  text-placement-type: dummy;
}
</code>

==== B. Pilotage client-side avec OL3 & l'API CARTO ====
La classe [[http://openlayers.org/en/v3.20.1/apidoc/ol.source.CartoDB.html|ol.source.CartoDB]] permet d'ajouter une couche de données hébergée par CARTO dont la représentation servie par CARTO est contrôlée client-side par une configuration ([[https://carto.com/developers/maps-api/guides/quickstart/#anonymous-maps|mapConfig]]).

<code>
<html>
    <head>
        <title>ol3 - 5b - On demand CartoCSS</title>
        <script type="text/javascript" src="js/config.js"></script>
        <script type="text/javascript">
            var map;
            $(document).ready(function () {
                map = new ol.Map({
                    view: new ol.View({
                        center: ol.proj.transform([6.45, 46.7], 'EPSG:4326', 'EPSG:3857'),
                        zoom: 14
                    }),
                    target: 'map',
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ]
                });

                // Control client-side the map rendering that will happen server-side
                var mapConfig = {
                  'layers': [{
                    'type': 'cartodb',
                    'options': {
                      'cartocss_version': '2.1.1',
                      'cartocss': '#geoinf_contour_yverdon{line-color:#FF6600;line-width:2;line-opacity:0.7;}',
                      'sql': 'SELECT * FROM geoinf_contour_yverdon'
                    }
                  }]
                };

                var contourLyr = new ol.layer.Tile({
                  source: new ol.source.CartoDB({
                      account: 'oertz',
                      config: mapConfig
                  })
                });
                map.addLayer(contourLyr);
            });
        </script>

        <style type="text/css">
            #map {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>
</code>
=== TODO ===
  - Adapter l'application avec les instructions CartoCSS permettant **d'afficher les altitudes sur les lignes de contour**, uniquement pour les altitudes supérieures à 800m (voir aussi {{:geoinf16:cartocss.pdf|Custom basemap tiles with CartoCSS, J. Freyre, 2014}})<code>
/* This would be the new mapConfig (just adding a filter instruction) */ 
var mapConfig = {
  'layers': [{
    'type': 'cartodb',
    'options': {
      'cartocss_version': '2.1.1',
      'cartocss': '#geoinf_contour_yverdon[elevation > 800]{line-color:#FF6600;line-width:2;line-opacity:0.7;}',
      'sql': 'SELECT * FROM geoinf_contour_yverdon'
    }
  }]
};
</code>
  - Ajouter une couche ol.layer.Tile à partir du dataset des **districts de Suisse** https://ogo.cartodb.com/tables/g4districts98/public et en construisant un style qui affiche les districts Vaudois différemment des autres (selon votre goût et en dézoomer un peu)<code>
/* This would be the new mapConfig (again using a filter instruction) */
var mapConfig = {
  'layers': [{
    'type': 'cartodb',
    'options': {
      'cartocss_version': '2.1.1',
      'cartocss': '#g4districts98{polygon-fill:#FF6600;polygon-opacity:0.3;[ak = "VD"]{polygon-fill:#FF0000;}}',
      'sql': 'SELECT * FROM g4districts98'
    }
  }]
};
</code>
  - Adapter l'application pour que le style CartoCSS soit chargé **asynchronnement** depuis un fichier //myGreatRemoteStyle.mss// (on proclame le suffixe mss pour Map Style Sheet). https://www.mediamaps.ch/oltuto/Ex5b-3.html

=== Et avec WMS/SLD ? ===

Quelles similitudes et différences entre l'approche précédente et celle-ci, qui peut se résumer à une requête :
''https://wms.geo.admin.ch/?SERVICE=WMS&VERSION=1.0.0&REQUEST=GetMap&FORMAT=image/png&LAYERS=ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt&SRS=EPSG:3857&STYLES=&WIDTH=2285&HEIGHT=897&BBOX=174582,5648084,1571851,6196597&SLD=https://drive.switch.ch/index.php/s/brNwxHVjcBeZVDc/download
''