Taginfo/Taglists

From OpenStreetMap Wiki
Jump to navigation Jump to search

The taginfo API can give you extended lists of tags. You decide which tags you want in that list and taginfo will add element types, description, example images, and (optionally) usage counts from the database.

This can be used to create tables of tags in the OSM wiki using a simple template {{Taglist}}. Instead of assembling and maintaining the tables manually, let taginfo do the work for you.

Currently we are rolling out Taglists in this wiki. For the project page, see Taginfo/Taglists/Wiki project. For advantages/disadvantages between taglists and templates, see taglists_vs_templates.

Embed tag lists in this wiki

See Template:Taglist.

Embed tag lists in your own web pages

Include jQuery and taglists.js in your web page:

<script type="text/javascript" src="https://taginfo.openstreetmap.org/js/taglists.js"></script>

Now you can add tag lists to your web page by adding a small HTML snippet:

<div class="taglist"
     data-taginfo-taglist-tags="highway=motorway,trunk,primary,secondary,tertiary">
</div>

The list of tags can be anything in the format: KEY1=VALUE1a,VALUE1b,...,KEY2=VALUE2a,VALUE2b,.... If you only add a key, the table will contain all values of that key we have a wiki page for.

You can add options using data-taginfo-taglist-options. This allows you to change the language used:

<div class="taglist"
    data-taginfo-taglist-tags="natural=wood,landuse=forest"
    data-taginfo-taglist-options='{"lang": "de"}'>
</div>

And you can add usage counts from the database:

<div class="taglist"
    data-taginfo-taglist-tags="natural=wood,landuse=forest"
    data-taginfo-taglist-options='{"with_count": true}'>
</div>

Lastly you have to call the convert_to_taglist function to create the tables:

<script type="text/javascript">
function whenReady() {
    taginfo_taglist.convert_to_taglist('.taglist');
}
if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", whenReady);
} else {
    whenReady();
}
</script>

This will replace the div you entered into your page with the table.

The table element will have a class of taginfo-taglist. You can use this to style the table with CSS.

This functionality is using the tags/list taginfo API call. See https://taginfo.openstreetmap.org/taginfo/apidoc#api_4_tags_list for further information.