hiddewie / osm-cycling-maps

Generating beatiful cycling maps using Mapnik and OpenStreetMap data
https://hiddewie.github.io/map-it
MIT License
34 stars 5 forks source link

Visualize incline #83

Closed hiddewie closed 4 years ago

hiddewie commented 4 years ago

Can be done with >, <, >> and <<. See incline tag https://taginfo.openstreetmap.org/keys/?key=incline#overview

hiddewie commented 4 years ago

A simple experiment did not give satisfactory results

image

hiddewie commented 4 years ago

icon

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="shop-11"
   width="11px"
   height="11px"
   viewBox="0 0 11 11"
   sodipodi:docname="incline.svg"
   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
  <metadata
     id="metadata8">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs6" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1628"
     inkscape:window-height="860"
     id="namedview4"
     showgrid="false"
     inkscape:zoom="15.170655"
     inkscape:cx="-18.401498"
     inkscape:cy="9.0180312"
     inkscape:window-x="52"
     inkscape:window-y="27"
     inkscape:window-maximized="0"
     inkscape:current-layer="shop-11" />
  <rect
     width="1.3521944"
     height="6.743783"
     x="5.6644177"
     y="-2.55446"
     id="rect5"
     transform="rotate(52.006062)"
     style="stroke-width:1.35219443" />
  <rect
     width="1.3521944"
     height="6.743783"
     x="-1.1069411"
     y="6.1143746"
     id="rect5-3"
     transform="matrix(-0.6155781,0.78807589,0.78807589,0.6155781,0,0)"
     style="stroke-width:1.35219443" />
</svg>
hiddewie commented 4 years ago

data

- id: road-incline
  geometry: linestring
  <<: *extentsOSM
  Datasource:
    <<: *osm2pgsql
    table: |-
      (
        SELECT
          ST_Line_Interpolate_Point(way, 0.5) as way,
          DEGREES(ST_Azimuth(ST_Line_Interpolate_Point(way, 0.499), ST_Line_Interpolate_Point(way, 0.501))) as azimuth,
          (tags->'incline') as incline
        FROM
          planet_osm_line
        WHERE
          way && !bbox! AND
          highway IS NOT NULL AND
          highway NOT IN ('platform', 'construction', 'proposed', 'steps') AND
          (access IS NULL OR access != 'private') AND
          (tunnel IS NULL OR tunnel != 'yes') AND
          (tags->'incline') IN (
            'up',
            'down'
          )
      ) AS data
hiddewie commented 4 years ago

rendering

#road-incline {
  marker-width: 10;
  marker-fill: @black;
  marker-transform: rotate([azimuth]);
  marker-width: 5;
  marker-file: url('data/icons/openstreetmap/incline.svg');
  marker-allow-overlap: true;
  marker-ignore-placement: true;
}