MediaWiki:Kartographer.js

/**********************************************************************
 * The JavaScript in this file is a CUSTOMIZATION of the Kartographer
 * extension for Wikivoyage.
 *
 * For any information about Kartographer, visit the page:
 *     https://www.mediawiki.org/wiki/Extension:Kartographer
 *
 * WHAT IS IT DOING ?
 *
 * This code listens to a Kartographer extension hook `wikipage.maps`
 * and adds a few features onto the map:
 *
 * - Adds a control (top right) to select a different tile layer and toggle
 *   overlays:
 *     - Adds tile layers (mapnik, mapquestopen, mapquest, landscape)
 *     - Adds overlays (traffic, maplabels, boundaries, hill, cycling, hiking)
 *
 * HOW CAN YOU HELP ?
 *
 * We need to collect feedback, about the experimentation itself, about the
 * features, the design, the user experience, the code... We also need to
 * start tracking bugs and fixing them. Please help.
 *
 * To report a bug or an issue:
 *     https://phabricator.wikimedia.org/maniphest/task/create/?projects=maps
 *     https://phabricator.wikimedia.org/tag/maps
 *
 * To contribute to the code:
 *     https://phabricator.wikimedia.org/r/p/mediawiki/extensions/Kartographer;browse/master/
 *     https://github.com/wikimedia/mediawiki-extensions-Kartographer
 *
 **********************************************************************/
 
( function ( mw ) {

	var wv,
		ready,
	/* jscs:disable validateQuoteMarks, disallowQuotedKeysInObjects */
		maptiles = {
			"mapnik": {
				"tilesUrl": "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
				"options": {
					"wvIsExternal": true,
					"wvName": "Mapnik",
					"subdomains": [
						"a",
						"b",
						"c"
					],
					"attribs": [
						{
							"url": "https://www.openstreetmap.org/copyright",
							"name": "OpenStreetMap",
							"label": "Map data"
						}
					]
				}
			},
			"landscape": {
				/* [[User:DTankersley (WMF)]] is the contact person for this API key */
				"tilesUrl": "https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=ca8e8a8e3f9a44c19a8edcf8fb5f90c4",
				"options": {
					"wvIsExternal": true,
					"wvName": "Relief map",
					"attribs": [
						{
							"url": "https://www.openstreetmap.org/copyright",
							"name": "OpenStreetMap",
							"label": "Map data"
						},
						{
							"url": "https://www.thunderforest.com/",
							"name": "Thunderforest",
							"label": "Map style"
						}
					]
				}
			},
			"traffic-line-network": {
				"tilesUrl": "https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=ca8e8a8e3f9a44c19a8edcf8fb5f90c4",
				"options": {
					"wvIsOverlay": true,
					"wvIsExternal": true,
					"wvName": "Traffic line network",
					"attribs": [
						{
							"url": "https://www.openstreetmap.org/copyright/",
							"name": "OpenStreetMap",
							"label": "Map data"
						},
						{
							"url": "https://www.thunderforest.com/",
							"name": "Thunderforest",
							"label": "Map style"
						}
					],
					"opacity": 0.5,
					"maxNativeZoom": 17
				}
			},
			"cycling": {
				"tilesUrl": "https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png",
				"options": {
					"wvIsOverlay": true,
					"wvIsExternal": true,
					"wvName": "Cycling",
					"attribs": [
						{
							"url": "https://cycling.waymarkedtrails.org",
							"name": "Waymarked Trails",
							"label": "Cycling routes"
						}
					]
				}
			},
			"hiking": {
				"tilesUrl": "https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png",
				"options": {
					"wvIsOverlay": true,
					"wvIsExternal": true,
					"wvName": "Hiking",
					"attribs": [
						{
							"url": "https://hiking.waymarkedtrails.org",
							"name": "Waymarked Trails",
							"label": "Hiking trails"
						}
					]
				}
			},
			"hill-shading": {
				"tilesUrl": "https://tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png",
				"options": {
					"wvIsOverlay": true,
					"wvIsExternal": true,
					"wvName": "Hill shading",
					"attribs": [
						{
							"url": "https://www2.jpl.nasa.gov/srtm/",
							"name": "NASA",
							"label": "Hill shading"
						}
					]
				}
			}
		};
	/* jscs:enable validateQuoteMarks, disallowQuotedKeysInObjects */

	mw.hook( 'wikipage.maps' ).add( function ( maps ) {

		ready = ready || mw.loader.using( [ 'oojs-ui', 'ext.kartographer.wv' ] ).done( function () {
				wv = mw.loader.require( 'ext.kartographer.wv' );

				$.each( maptiles, function ( i, tile ) {
					wv.wikivoyage.addTileLayer( i, tile.tilesUrl, tile.options );
				} );
			} );

		// `maps` can be an array
		maps = $.isArray( maps ) ? maps : [ maps ];

		ready.done( function () {

			// customize each map
			$.each( maps, function ( i, map ) {

				var wvmap = new wv.WVMap( map );
				wvmap.controlLayers()
					.basemap( 'mapnik' )
					.basemap( 'landscape' )
					.overlay( 'traffic-line-network' )
					.overlay( 'hill-shading' )
					.overlay( 'cycling' )
					.overlay( 'hiking' )
					.datalayer( map.dataLayers )
					.update();

			} );
		} );
	} );
} )( mediaWiki );