GIS and Media fusion

"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild

User Tools

Site Tools


geoinf18:oltuto2

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
geoinf18:oltuto2 [2018/12/06 23:01]
oertz [B. Pilotage client-side avec OL3 & l'API CARTO]
geoinf18:oltuto2 [2019/01/08 20:17]
oertz [B. Pilotage client-side avec OL3 & l'API CARTO]
Line 86: 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)   * 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) ​   * 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 102: 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]]     * 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|}}     * 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 ==== ==== 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/​carto-js/v3/guides/core-API-functionality/​|mapConfig]]).+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>​ <​code>​
Line 164: Line 209:
 </​code>​ </​code>​
 === TODO === === 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 (selon votre goût et en dézoomer un peu) +/* This would be the new mapConfig (just adding a filter instruction) */  
-  - 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).+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 ? === === Et avec WMS/SLD ? ===
geoinf18/oltuto2.txt · Last modified: 2019/01/08 20:17 by oertz