Differences

This shows you the differences between two versions of the page.

--- geoinf18:oltuto2 [2018/11/27 22:40]
oertz [B. Pilotage client-side avec OL3 & l'API CARTO]
+++ geoinf18:oltuto2 [2019/01/08 20:00]
oertz [B. Pilotage client-side avec OL3 & l'API CARTO]
@@ Line 39: / Line 39: @@
 **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.
@@ Line 44: / Line 46: @@
 __Pré-requis :__ avoir accès un GeoServer avec l'extension GeoCSS
   * suivre la 2nde section du Tutoriel [[geoinf18:geolastic|GeoServer@jElastic]]
-  * pour cette même 2nde section dans le cas d'une installatio en local
+  * pour une installation en local, voir cette même 2nde section
 **Objectif 1 : définition d'un style interne personnalisé**
@@ Line 84: / Line 86: @@
   * 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>
@@ Line 100: / Line 127: @@
     * 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 ====
-Il s'agit d'ajouter une couche de données servie par CARTO dans notre application OL3 :
+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]]).
-  - l'application charge l'API CORE JavaScript de CARTO (cf. https://carto.com/docs/carto-engine/carto-js/core-api/)
-  - la méthode cartodb.Tiles.getTiles permet d'assembler un dataset sélectionné (sublayers/sql) avec un style donné (sublayers/cartocss) - notez bien aussi l'importance du user_name
-  - le callback construit l'URL qui correspond au cache de tuiles sous-jacent (ex. __a.ashbu.cartocdn.com/ogo/api/v1/map/4c64e8d931417377282738/{z}/{x}/{y}.png__)
-  - l'URL est alors utilisée pour créer une couche ol.layer.Tile sur la base de cette source tuilée avec l'habituel ol.source.XYZ
 <code>
 <html>
     <head>
-        <title>ol3 - Ex5b - On demand CartoCSS</title>
+        <title>ol3 - 5b - On demand CartoCSS</title>
         <script type="text/javascript" src="js/config.js"></script>
-        <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
         <script type="text/javascript">
             var map;
@@ Line 134: / Line 174: @@
                 });
-                cartodb.Tiles.getTiles({
+                // Control client-side the map rendering that will happen server-side
-                    type: 'cartodb', user_name: 'oertz', sublayers: [{
+                var mapConfig = {
-                            sql: 'SELECT * FROM geoinf_contour_yverdon',
+                  'layers': [{
-                            cartocss: "#geoinf_contour_yverdon{line-color:#FF6600;line-width:2;line-opacity:0.7;}"
+                    'type': 'cartodb',
-                        }]
+                    'options': {
-                }, function (tileTemplate) { // create layer with generated tiles URL
+                      'cartocss_version': '2.1.1',
-                    tilesUrl = tileTemplate.tiles[0]
+                      'cartocss': '#geoinf_contour_yverdon{line-color:#FF6600;line-width:2;line-opacity:0.7;}',
-                            .replace('{s}', 'a')
+                      'sql': 'SELECT * FROM geoinf_contour_yverdon'
-                            .replace('{z}', '{z}')
+                    }
-                            .replace('{x}', '{x}')
+                  }]
-                            .replace('{y}', '{y}');
+                };
-                    console.log(tilesUrl);
-                    admLyr = new ol.layer.Tile({
+                var contourLyr = new ol.layer.Tile({
-                        source: new ol.source.XYZ({
+                  source: new ol.source.CartoDB({
-                            url: tilesUrl
+                      account: 'oertz',
-                        })
+                      config: mapConfig
-                    })
+                  })
-                    map.addLayer(admLyr);
                 });
+                map.addLayer(contourLyr);
             });
         </script>
@@ Line 170: / Line 208: @@
 </html>
 </code>
-=== TODO 1 ===
+=== TODO ===
-  - Adapter l'application avec les instructions CartoCSS préparées au point 5a ci-dessus pour **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}})
+  - 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>
-  - 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 (NB : selon votre goût, et dézoomer un peu pour y voir)
+/* 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).
-=== TODO 2 ===
+=== 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 :

GIS and Media fusion

User Tools

Site Tools

Differences

Page Tools