map-machine/doc/moi/readme.moi

The \b {Map Machine} project consists of

\list
    {a Python \ref {http://openstreetmap.org} {OpenStreetMap} renderer:
    \list
        {SVG \ref {#map-generation} {map generation},}
        {SVG and PNG \ref {#tile-generation} {tile generation},}}
    {the \ref {#röntgen-icon-set} {Röntgen} icon set\: unique CC-BY 4.0 map icons.}

The idea behind the Map Machine project is to \b {show all the richness of the OpenStreetMap data}\: to have a possibility to display any map feature represented by OpenStreetMap data tags by means of colors, shapes, and icons.  Map Machine is created both for map contributors\: to display all changes one made on the map even if they are small, and for map users\: to dig down into the map and find every detail that was mapped.

Unlike standard OpenStreetMap layers, \b {Map Machine is a playground for experiments} where one can easily try to support any unsupported tag, proposed tagging scheme, tags with little or even single usage, deprecated ones that are still in use.

Map Machine is intended to be highly configurable, so it can generate precise but messy maps for OSM contributors as well as pretty and clean maps for OSM users.  It can also use some slow algorithms for experimental features.

See
\list
    {\ref {#installation} {installation instructions},}
    {\ref {#map-features} {map features},}
    {\ref {#use-röntgen-as-josm-map-paint-style} {using Röntgen as JOSM style}.}

\2 {Usage example} {usage-example}

\code {shell} {map-machine render -b=2.284,48.860,2.290,48.865}

will automatically download OSM data and render an SVG map of the specified area to \m {out/map.svg}.  See \ref {#map-generation} {Map generation}.

\code {shell} {map-machine tile -b=2.361,48.871,2.368,48.875}

will automatically download OSM data and render PNG tiles that cover the specified area to the \m {out/tiles} directory.  See \ref {#tile-generation} {Tile generation}.

\2 {Röntgen icon set} {röntgen-icon-set}

The central feature of the project is the Röntgen icon set.  It is a set of monochrome 14 × 14 px pixel-aligned icons specially created for the Map Machine project.  Unlike the Map Machine source code, which is under the MIT license, all icons are under the \ref {http://creativecommons.org/licenses/by/4.0/} {CC BY} license.  So, with the appropriate credit the icon set can be used outside the project.  Some icons can be used as emoji symbols.

All icons tend to support a common design style, which is heavily inspired by \ref {https://github.com/mapbox/maki} {Maki}, \ref {https://github.com/gmgeo/osmic} {Osmic}, and \ref {https://github.com/ideditor/temaki} {Temaki}.

\image {doc/grid.svg} {Icons}

Feel free to request new icons via issues for whatever you want to see on the map.  No matter how frequently the tag is used in OpenStreetMap since the final goal is to cover all tags.  However, commonly used tags have priority, other things being equal.

Generate an icon grid and sets of individual icons with \m {\command {icons}}.  It will update the \m {doc/grid.svg} file, and create SVG files in the \m {out/icons_by_id} directory where files are named using shape identifiers (e.g. \m {power_tower_portal_2_level.svg}) and in the \m {icons_by_name} directory where files are named using shape names (e.g. \m {Röntgen portal two-level transmission tower.svg}).  Files from the last directory are used in the OpenStreetMap wiki (e.g. \ref {https://wiki.openstreetmap.org/wiki/File:R%C3%B6ntgen_portal_two-level_transmission_tower.svg} {\m {File:Röntgen_portal_two-level_transmission_tower.svg}}).

\2 {Map features} {map-features}

\3 {Extra icons} {extra-icons}

Map Machine uses icons to visualize tags for nodes and areas.  But unlike other renderers, Map Machine can use more than one icon to visualize an entity and can use colors to visualize \osm {colour} value or other entity properties (like \osm {material} or \osm {genus}).

\3 {Isometric building shapes} {isometric-building-shapes}

With \m {--buildings isometric} or \m {--buildings isometric-no-parts} (not set by default), buildings are drawn using isometric shapes for walls and shade in proportion to \osm {building:levels}, \osm {building:min_level}, \osm {height}, and \osm {min_height} values.

\image {doc/buildings.svg} {3D buildings}

\3 {Road lanes} {road-lanes}

To determine the road width Map Machine uses the \osm {width} tag value or estimates it based on the \osm {lanes} value. If lane value is specified, it also draws lane separators.  This map style is highly inspired by Christoph Hormann's post \ref {http://blog.imagico.de/navigating-the-maze-part-2/} {Navigating the Maze}.

\image {doc/lanes.svg} {Road lanes}

\3 {Trees} {trees}

Visualization of tree leaf types (broadleaved or needle-leaved) and genus or taxon by means of icon shapes and leaf cycles (deciduous or evergreen) by means of color.

/*

Visualization of tree \icon {tree} leaf types (broadleaved \icon {tree_with_leaf} or needle-leaved \icon {needleleaved_tree}) and genus or taxon by means of icon shapes and leaf cycles (unknown \color {#98AC64}, deciduous \color {#fcaf3e} or evergreen \color {#688C44}) by means of color. If diameter, circumference, and/or diameter_crown are specified, we draw crown and trunk as circles. We also have special icons for some genus and taxons\: birch (\i {Betula}) \icon {betula}, palm (\i {Arecaceae}) \icon {palm}, maple (\i {Acer}) \icon {tree}\icon {leaf_maple}.

\table
    {{\osm {natural=tree}} {\icon {tree}}}
    {{\osm {leaf_type=broadleaved}} {\icon {tree_with_leaf}}}
    {{\osm {leaf_type=needleleaved}} {\icon {needleleaved_tree}}}
    {{\osm {taxon=Arecaceae}} {\icon {palm}}}
    {{\osm {genus=Betula}} {\icon {betula}}}

\table
    {{} {\color {#98AC64}}}
    {{\osm {leaf_cycle=deciduous}} {\color {#fcaf3e}}}
    {{\osm {leaf_cycle=evergreen}} {\color {#688C44}}}

*/

\image {doc/trees.svg} {Trees}

\3 {Viewpoint and camera direction} {viewpoint-and-camera-direction}

\osm {direction} tag values for \osm {tourism=viewpoint} and \osm {camera:direction} for \osm {man_made=surveillance} are rendered with sectors displaying the direction and angle (15º if angle is not specified) or the whole circle for panorama view.  Radial gradient is used for surveillance and inverted radial gradient is used for viewpoints.

\image {doc/surveillance.svg} {Surveillance}

\image {doc/viewpoints.svg} {Viewpoints}

\3 {Power tower design} {power-tower-design}

Visualize \osm {design} values used with \osm {power=tower} and \osm {power=pole} tags.  \m {design} has more than 1 million usages in OpenStreetMap.

\image {doc/icons_power.svg} {Power tower design}

\image {doc/power.svg} {Power tower design}

\3 {Colors} {colors}

Map icons have \osm {colour} tag value if it is present, otherwise, icons are displayed with dark grey color by default, purple color for shop nodes, red color for emergency features, and special colors for natural features.  Map Machine also takes into account \osm {building:colour}, \osm {roof:colour} and other \m {*:colour} tags, and uses the \osm {colour} tag value to paint subway lines.

\image {doc/colors.svg} {Building colors}

\3 {Emergency} {emergency}

\image {doc/icons_emergency.svg} {Emergency}

\3 {Japanese map symbols} {japanese-map-symbols}

Japanese maps usually use \ref {https://en.wikipedia.org/wiki/List_of_Japanese_map_symbols} {special symbols} called \i {chizukigou} (地図記号) which are different from standard map symbols used in other countries.  They can be enabled with \m {--country jp} option.

\image {doc/icons_japanese.svg} {Japanese map symbols}

\3 {Indoor features} {indoor-features}

Draw indoor features specifying level with \m {--level} option. Possible values are numbers (e.g. \m {1}, \m {0.5}), lists of number separated by \m {;} (e.g. \m {1;2;4;4.5}), \m {all}, \m {overground}, and \m {underground}. The default value is not \m {all}, but \m {overground}, so underground objects are not shown on the map if \m {--level} option is not specified.

\code {shell} {map-machine render -c 4.5978,-74.07507 -s 600,400 -z 19.5 --level 0}

\image {doc/indoor.svg} {Indoor}

\3 {Shape combination} {shape-combination}

One of the key features of Map Machine is constructing icons from several shapes.

/* Some icons consist of just one shape, to construct others it may be necessary to combine two or more shapes. */

\4 {Masts} {masts}

For \osm {man_made=mast} distinguish types (communication, lighting, monitoring, and siren) and construction (freestanding or lattice, and using of guys) are rendered by combining 7 unique icon shapes.

\image {doc/mast.svg} {Mast types}

\4 {Volcanoes} {volcanoes}

For \osm {natural=volcano} status (active, dormant, extinct, or unspecified) and type (stratovolcano, shield, or scoria) are rendered by combining 7 unique icon shapes.

\image {doc/volcano.svg} {Volcano types}

/*

\image {doc/bus_stop.png} {Bus stop icon combination}

\3 {Icon settings} {icon-settings}

\4 {Japanese map symbols} {japanese-map-symbols}

\table
    {
        {}
        {\code {\{
    include: ['world'],
    exclude: ['jp']
\}} (\ref {https://ideditor.github.io/location-conflation/?locationSet=%7Binclude%3A%20%5B%27world%27%5D%2C%20exclude%3A%20%5B%27jp%27%5D%7D&referrer=nsi} {view map})}
        {\code {\{
    include: ['jp']
\}} (\ref {https://ideditor.github.io/location-conflation/?locationSet=%7Binclude%3A%20%5B%27jp%27%5D%7D&referrer=nsi} {view map})}
    }
    {
        {\m {amenity=post_office}}
        {\icon {envelope} {-}}
        {\icon {japan_post} {-}}
    }
    {
        {\m {amenity=school}} {}
        {\icon {japan_elementary_school} {-}}
    }

\4 {Script direction} {script-direction}

Countries with right-to-left script direction\:

\code {\{include: [
    'ae', 'af', 'bh', 'eg', 'il', 'iq', 'ir', 'jo', 'kw', 'lb', 'om', 'pk',
    'ps', 'qa', 'sa', 'sy', 'ye'
]\}}

*/

\2 {Wireframe view} {wireframe-view}

\3 {Creation time mode} {creation-time-mode}

Visualize element creation time with \m {--mode time}.

\image {doc/time.svg} {Creation time mode}

\3 {Author mode} {author_mode}

Every way and node displayed with the random color picked for each author with \m {--mode author}.

\image {doc/author.svg} {Author mode}

\2 {Installation} {installation}

Requirements\: Python 3.9/* or higher*/.

\list
    {Install the \ref {https://www.cairographics.org/download/} {cairo 2D graphic library},}
    {install the \ref {https://libgeos.org} {GEOS library},}
    {install the Python packages with the command\:}

\code {shell} {pip install git+https://github.com/enzet/map-machine}

For more detailed instructions, see \ref {doc/INSTALL.md} {instructions}.

\2 {Map generation} {map-generation}

The \m {render} command is used to generate an SVG map from OpenStreetMap data.  You can run it using\:

\code {shell} {map-machine render \\
    -b=\formal {min longitude},\formal {min latitude},\formal {max longitude},\formal {max latitude} \\
    -o=\formal {output file name} \\
    -z=\formal {OSM zoom level} \\
    \formal {other arguments}}

\3 {Example} {example}

\code {shell} {map-machine render \\
    --boundary-box=2.284,48.860,2.290,48.865 \\
    --output=out/esplanade_du_trocadéro.svg}

will download OSM data to \m {cache/2.284,48.860,2.290,48.865.osm} and render an SVG map of the specified area to \m {out/esplanade_du_trocadéro.svg}.

\3 {Arguments} {arguments}

\options {render}

plus \ref {#map-options} {map configuration options}

\2 {Tile generation} {tile-generation}

Command \m {tile} is used to generate PNG tiles for \ref {https://wiki.openstreetmap.org/wiki/Slippy_Map} {slippy maps}.  To use them, run \ref {#tile-server} {Map Machine tile server}.

\options {tile}

plus \ref {#map-options} {map configuration options}

\3 {Generate one tile} {generate-one-tile}

Specify the tile coordinates\:

\code {shell} {map-machine tile --tile \formal {OSM zoom level}/\formal {x}/\formal {y}}

or specify any geographical coordinates inside a tile\:

\code {shell} {map-machine tile \\
    --coordinates=\formal {latitude},\formal {longitude} \\
    --zoom=\formal {OSM zoom levels}}

The tile will be stored as an SVG file \m {out/tiles/tile_<zoom level>_<x>_<y>.svg} and a PNG file \m {out/tiles/tile_<zoom level>_<x>_<y>.svg}, where \m {x} and \m {y} are tile coordinates.  The \m {--zoom} option will be ignored if it is used with the \m {--tile} option.

Example\:

\code {shell} {map-machine tile -c=55.7510637,37.6270761 -z=18}

will generate an SVG file \m {out/tiles/tile_18_158471_81953.svg} and a PNG file \m {out/tiles/tile_18_158471_81953.png}.

\3 {Generate a set of tiles} {generate-a-set-of-tiles}

Specify the boundary box to get the minimal set of tiles that covers the area\:

\code {shell} {map-machine tile \\
    --boundary-box=\formal {min longitude},\formal {min latitude},\formal {max longitude},\formal {max latitude} \\
    --zoom=\formal {OSM zoom levels}}

The boundary box will be extended to the boundaries of the minimal tileset that covers the area, then it will be extended a bit more to avoid some artifacts on the edges rounded to 3 digits after the decimal point.  The map with the new boundary box coordinates will be written to the cache directory as SVG and PNG files. All tiles will be stored as SVG files \m {out/tiles/tile_<zoom level>_<x>_<y>.svg} and PNG files \m {out/tiles/tile_<zoom level>_<x>_<y>.svg}, where \m {x} and \m {y} are tile coordinates.

Example\:

\code {shell} {map-machine tile -b=2.361,48.871,2.368,48.875}

will generate 36 PNG tiles at zoom level 18 from tile 18/132791/90164 all the way to 18/132796/90169 and two cached files \m {cache/2.360,48.869,2.370,48.877_18.svg} and \m {cache/2.360,48.869,2.370,48.877_18.png}.

\2 {Tile server} {tile-server}

The \m {server} command is used to run a tile server for slippy maps.

\code {shell} {map-machine server}

Stop server interrupting the process with \kbd {Ctrl} + \kbd {C}.

\options {server}

\3 {Example} {example-2}

Create a minimal amount of tiles that cover specified boundary box for zoom levels 16, 17, 18, and 19\:

\code {shell} {map-machine tile -b=2.364,48.854,2.367,48.857 -z=16-19}

Run tile server on 127.0.0.1\:8080\:

\code {shell} {map-machine server}

Use JavaScript code for \ref {https://leafletjs.com/} {Leaflet}\:

\code {javascript} {var map = L.map('mapid').setView([48.8555, 2.3655], 18);

L.tileLayer('http://127.0.0.1:8080/tiles/\{z\}/\{x\}/\{y\}', \{
    maxZoom: 19,
    attribution: 'Map data &copy; ' +
        '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> ' +
        'contributors, imagery &copy; ' +
        '<a href="https:/github.com/enzet/map-machine">Map Machine</a>',
    id: 'map_machine',
    tileSize: 256,
    zoomOffset: 0
\}).addTo(map);}

HTML code\:

\code {html} {<div id="mapid" style="width: 1000px; height: 600px;"></div>}

\2 {Map options} {map-options}

Map configuration options used by \m {render} and \m {tile} commands\:

\options {map}

\2 {MapCSS 0.2 generation} {mapcss-0-2-generation}

The \m {mapcss} command can be used to generate a MapCSS scheme.  \m {\command {mapcss}} will create an \m {out/map_machine_mapcss} directory with simple MapCSS 0.2 scheme adding icons from the Röntgen icon set to nodes and areas\: \m {.mapcss} file and directory with icons.

To create a MapCSS style with Map Machine style also for ways and relations, run \m {map-machine mapcss --ways}.

\options {mapcss}

\3 {Use Röntgen as JOSM map paint style} {use-rntgen-as-josm-map-paint-style}

\list
    {Run \m {\command {mapcss}}.}
    {Open \ref {https://josm.openstreetmap.de/} {JOSM}.}
    {Go to \kbd {Preferences} → Third tab on the left → \kbd {Map Paint Styles}.}
    {Active styles: press \kbd {+}.}
    {URL / File: set path to \m {out/map_machine_mapcss/map_machine.mapcss}.}

To enable/disable the Map Machine map paint style go to \kbd {View} → \kbd {Map Paint Styles} → \kbd {Map Machine}.

\4 {Example} {example-3}

\image {doc/josm.png} {JOSM example}

Example of using Röntgen icons on top of the Mapnik style in JOSM.  Map Paint Styles look like this\:
\list
    {✓ Mapnik (true)}
    {✓ Map Machine}