Outils pour utilisateurs

Outils du site


openstreetmap:overpass:turbo_mapcss

Overpass Turbo – MapCSS

Overpass Turbo permet de styliser la carte résultant d'une requête avec la syntaxe MapCSS. Il s'agit d'un langage dérivé de CSS pour définir des feuilles de styles pour des éléments cartographiques.

La base d'une feuille de style

La feuille de style se positionne après la requête, et :

{{style:
   ... directives MapCSS ...
}}

Chaque directive est composée :

  • d'un sélecteur qui s'applique au résultat de la requête, et reprend la syntaxe Overpass
  • du style à appliquer aux éléments sélectionnés, entre accolades

Voici par exemple la feuille de style pour afficher tous les ways issus d'une requête, en traits bruns semi-transparents d'une largeur de 8 pixels :

{{style:
   way {
     color: brown;
     width: 8;
     opacity: 0.5;
   }
}}

Changer le style en fonction des tags

Il est possible de filtrer les données auxquelles s'appliquent un style. Voici un exemple de requête combinée à des styles permettant de distinguer les rues éclairées de celles qui ne le sont pas, ainsi que celles pour lesquelles l'information est absente.

Noter que les clefs et valeurs ne doivent pas être placées entre guillements.

way["highway"]({{bbox}});
out body; >; out skel qt;

{{style:
  way {
    color: grey;
    width: 8;
    opacity: 0.5;
  }
  way[lit=yes] {
    color:yellow;
  }
  way[lit=no] {
    color:brown;
  }
}}

Il est possible de comparer les valeurs numériques (Attention <= et >= ne sont pas compris) :

way["highway"]({{bbox}});
out body; >; out skel qt;

{{style:
  way[maxspeed < 50] { color: green; }
  way[maxspeed = 50] { color: orange; }
  way[maxspeed > 50] { color: red; }
}}

Il est ainsi possible de créer des cartes thématiques. Ces cartes (requête + feuille de styles) peuvent être sauvegardées suos forme de lien, avec l'opération Partager. Un catalogue de cartes peut aussi être créé avec les opérations Enregistrer et Charger.

Ajouter des étiquettes

Il est possible d'ajouter des étiquettes aux éléments affichés sur la carte avec l'instruction text: suivi de la clef dont la valeur doit être affichée.

{{style:
  node { 
    text:name; 
  }
}}

Utiliser des pictogrammes

Il est possible d'utiliser des pictogrammes pour les points. Overpass Turbo inclut en effet les pictos Maki, qui peuvent être référencés :

node["highway"="bus_stop"]({{bbox}});
out body; >; out skel qt;

{{style:
  node[highway=bus_stop] {
    icon-image: url('icons/maki/bus-24.png');
  }
}}

Les pictogrammes utilisés par Overpass Turbo sont visibles sur ce dépôt Github. Il est possible d'utiliser d'autres pictogrammes en utilisant leur URL :

{{style:
node {
  icon-image: url('http://data.cartocite.fr/icons/restaurant-18.png');
}

Utiliser la valeur d'un tag

Il est possible d'utiliser la valeur d'un tag pour adapter une style, avec les fonctions eval() et tag().

Exemple avec la vitesse des routes :

way["highway"]({{bbox}});
out body; >; out skel qt;

{{style:
way {
  color:blue;
  opacity:0.5;
  width: eval('tag("maxspeed")/10');
}
}}

Exemple pour produire une carte représentant les parkings à vélo par des disques de surface proportionnelle à leur capacité :

node["amenity"="bicycle_parking"]({{bbox}});
out body; >; out skel qt;

{{style:
node {
  color:blue;
  opacity:0.5;
  fill-color:blue;
  fill-opacity:0.5;
  symbol-shape: circle;
  symbol-size: eval('max(4,Math.sqrt(3*tag("capacity")))');
}
}}

Sur le Wiki : MapCSS

  • Printable version
  • Export to OpenOffice
  • Export to PDF
  • Add page to book
  • Tools:
openstreetmap/overpass/turbo_mapcss.txt · Dernière modification: 2020/01/10 09:56 par admin