User:Planemad/Kartographer maps workshop

Workshop to create maps with Kartographer at WikidataCon Berlin.
 * Date: Sunday 29 October 2017
 * Venue and Time: Room 'E' 12.30-13.30PM

= Workshop =

The goal of the workshop is to walthrough how Wikidata and OpenStreetMap data can be connected to easily create interactive maps on Mediawiki projects. The workshop makes use of the Extension:Kartographer which is available by default on the Wikivoyage project. The example may not working on other Wikimedia projects without the extension.

Wikimedia Maps
The Wikimedia Map service is the primary provider of open maps for Wikimedia Projects. The service consists of a zoomable street level map of the world generated using data from the OpenStreetMap Project.
 * Wikimedia Maps: Browse
 * Improve the map data on OpenStreetMap: Map | Wiki

OpenStreetMap
The OpenStreetMap Project is the largest source of crowdsourced geographical data. It takes a few minutes to sign up and improve the map of your home neighborhood using the online map editor called iD via the [edit] button. One can add or improve any type of map feature like roads, buildings, trees and even trash cans.

This make OSM the ideal database to store open map data. The data is licensed under the ODbL license which allows data reuse with attribution and share alike.

OSM Data structure
Every map feature is defined as shape (points, lines, areas) and some metadata (`key`=`value` pairs) called tags. This allows adding defining a full geographical feature like a street with its shape and properties like road type, width, multilingual and even a Wikidata reference.

It is also possible to group smaller shapes as a larger group with a different set of tags. This is called a relation and is commonly used for defining boundaries, highway routes and river systems.


 * Use taginfo to find commonly used tags for the feature you want to map

Adding Wikidata ids to OSM
Adding Wikidata tags to OSM map features helps link map features on the OSM database to their associated item on the Wikidata database. This allows:
 * querying a map feature from OSM based on a Qid
 * adding extra metadata form Wikidata to map features like language labels

See http://wiki.openstreetmap.org/wiki/Wikidata#Linking_from_OSM_to_Wikidata

Adding OSM ids to Wikidata
Adding OSM ids to Wikidata is not encouraged since the OSM ids can change as the shapes are merged or split often. Relation ids are more stable and can be added using Property:P402

See http://wiki.openstreetmap.org/wiki/Wikidata#Linking_from_Wikidata_to_OSM

Adding OSM tags to Wikidata
Tags on OSM help describe the various properties of map features. These tags can also be added to their corresponding Wikidata item using Property:P1282. This allows:
 * querying wikidata items by OSM tags. Example: Items on Wikidata tagged with OSM tag for city

= Creating Wiki maps using OSM data =

Now that we have updated map data on the OpenStreetMap Project with Wikidata links, it can be used to embed interactive maps on Mediawiki sites with a few lines of code. There are two ways to do this:

Kartographer Maps
The easiest way to create a map with a shape highlighted from OSM is to use the Kartographer extension. The extension helps to query a shape from OSM using a Qid or a SPARQL query

Usage
==== and

Type and service
You can set the data to overlay on the map using the `type` and `service` parameter.


 * type:feature for directly defining geojson shape
 * type: ExternalData to fetch the shape from an external source like OSM (service:geoshape or geoline) or commons (service:page)


 * Documentation: https://www.mediawiki.org/wiki/Help:Extension:Kartographer

Examples
QID to be updated:- http://overpass-turbo.eu/s/mRF

More examples


 * https://en.wikipedia.org/wiki/User:Naveenpf/sandbox
 * [https://query.wikidata.org/embed.html#%23defaultView%3AMap%0A%23%20constituencies%20for%20the%20election%20to%20the%20German%20Bundestag%202017%2C%20with%20winning%20candidate%20and%20party%0ASELECT%20%3Fdistrict%20%3FdistrictLabel%20%3FdistrictNumber%20%3Fmdb%20%3FmdbLabel%20%3Fparty%20%3FpartyLabelCONF%20%28%3FpartyLabel%20AS%20%3Flayer%29%20%3FvotesPercentage%20%3Frgb%20%3Fshape%20%3FsanityCheckMdb%20WHERE%20%7B%0A%20%20%23%20find%20districts%20with%20shape%0A%20%20%3Fdistrict%20wdt%3AP3896%20%3Fshape%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%20successful%20candidate%20for%2019th%20German%20Bundestag%20with%20party%20and%20%25%20votes%0A%20%20%20%20%20%20%20%20%20%20%20%20p%3AP991%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20ps%3AP991%20%3Fmdb%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20pq%3AP2937%20wd%3AQ30579723%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20pq%3AP1268%20%3Fparty%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20pqv%3AP1111%20%5B%20wikibase%3AquantityAmount%20%3FvotesPercentage%3B%20wikibase%3AquantityUnit%20wd%3AQ11229%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%20district%20number%20in%202017%20Bundestag%20constituencies%0A%20%20%20%20%20%20%20%20%20%20%20%20p%3AP528%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20ps%3AP528%20%3FdistrictNumberString%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20pq%3AP972%20wd%3AQ26971257%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D.%0A%20%20%23%20turn%20string%20district%20number%20into%20integer%0A%20%20BIND%28xsd%3Ainteger%28%3FdistrictNumberString%29%20AS%20%3FdistrictNumber%29%0A%20%20%23%20sanity%20check%0A%20%20OPTIONAL%20%7B%0A%20%20%20%20%3Fmdb%20p%3AP39%20%5B%0A%20%20%20%20%20%20ps%3AP39%20wd%3AQ1939555%3B%0A%20%20%20%20%20%20pq%3AP2937%20wd%3AQ30579723%3B%0A%20%20%20%20%20%20pq%3AP768%20%3Fdistrict%3B%0A%20%20%20%20%20%20pq%3AP4100%20%3Fparty%0A%20%20%20%20%5D.%0A%20%20%20%20BIND%28true%20AS%20%3FsanityCheckMdb%29%0A%20%20%7D%0A%20%20%23%20find%20original%20color%20of%20party%0A%20%20%3Fparty%20wdt%3AP462%3F%2Fwdt%3AP465%20%3FrgbOriginal.%0A%20%20%23%20fade%20color%20depending%20on%20%25%20votes%2C%20knowing%20that%20the%20original%20colors%20are%20only%20composed%20of%20FF%2C%2080%2C%2000%3A%20shift%2080%20to%20A0%20or%20C0%2C%20and%2000%20to%2040%20or%2080%0A%20%20%23%20%28using%20separate%20calls%20to%20replace%20R%2C%20G%2C%20and%20B%20components%20so%20that%20the%20replacements%20are%20aligned%20to%20them%29%0A%20%20BIND%28IF%28%3FvotesPercentage%20%3E%3D%20%28100%2F2%29%2C%0A%20%20%20%20%20%20%20%20%20%20%3FrgbOriginal%2C%0A%20%20%20%20%20%20%20%20%20%20IF%28%3FvotesPercentage%20%3E%3D%20%28100%2F3%29%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20REPLACE%28REPLACE%28REPLACE%28REPLACE%28REPLACE%28REPLACE%28%3FrgbOriginal%2C%20%2280%28..%29%28..%29%22%2C%20%22A0%241%242%22%29%2C%20%22%28..%2980%28..%29%22%2C%20%22%241A0%242%22%29%2C%20%22%28..%29%28..%2980%22%2C%20%22%241%242A0%22%29%2C%20%2200%28..%29%28..%29%22%2C%20%2240%241%242%22%29%2C%20%22%28..%2900%28..%29%22%2C%20%22%24140%242%22%29%2C%20%22%28..%29%28..%2900%22%2C%20%22%241%24240%22%29%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20REPLACE%28REPLACE%28REPLACE%28REPLACE%28REPLACE%28REPLACE%28%3FrgbOriginal%2C%20%2280%28..%29%28..%29%22%2C%20%22C0%241%242%22%29%2C%20%22%28..%2980%28..%29%22%2C%20%22%241C0%242%22%29%2C%20%22%28..%29%28..%2980%22%2C%20%22%241%242C0%22%29%2C%20%2200%28..%29%28..%29%22%2C%20%2280%241%242%22%29%2C%20%22%28..%2900%28..%29%22%2C%20%22%24180%242%22%29%2C%20%22%28..%29%28..%2900%22%2C%20%22%241%24280%22%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%29%0A%20%20%20%20%20%20%20%20%20%29%20AS%20%3Frgb%29%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%0A%20%20%20%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%0A%20%20%20%20%3Fdistrict%20rdfs%3Alabel%20%3FdistrictLabel.%0A%20%20%20%20%3Fparty%20rdfs%3Alabel%20%3FpartyLabel.%0A%20%20%20%20%3Fmdb%20rdfs%3Alabel%20%3FmdbLabel.%0A%20%20%7D%0A%7D%0AORDER%20BY%20%3FdistrictNumber Constituencies for the election to the German Bundestag 2017, with winning candidate and party]

Generate GeoJSON from OSM
Using Overpass Turbo to query OSM for features with a certain tag or feature id and export to a GeoJSON.
 * Lookup the feature with a certain wikidata id http://overpass-turbo.eu/s/sFh

Resources

 * Overpass to query OSM https://overpass-turbo.eu/s/sFe
 * https://www.mediawiki.org/wiki/Help:Extension:Kartographer/OSM
 * https://www.wikidata.org/wiki/Template:Wikidata_list