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
Last revision Both sides next revision
geoinf18:oltuto2 [2019/01/08 19:34]
oertz [B. Personnaliser un style avec l'extension GeoCSS]
geoinf18:oltuto2 [2019/01/08 20:00]
oertz [B. Pilotage client-side avec OL3 & l'API CARTO]
Line 88: Line 88:
  
 <​code>​ <​code>​
-/* Scale-controlled display of labels */ +/* These GeoCSS instructions should work as a scale-controlled display of labels */ 
 * { * {
     stroke: #000000;     stroke: #000000;
Line 127: 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 ====
Line 189: Line 209:
 </​code>​ </​code>​
 === TODO === === 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}}) +  - 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) */  
 +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).   - 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).
  
geoinf18/oltuto2.txt · Last modified: 2019/01/08 20:17 by oertz