MediaWiki:Kartographer.js

/**********************************************************************
 * The JavaScript in this file is a CUSTOMIZATION of the Kartographer
 * extension for Wikivoyage.
 * It was taken from https://en.wikivoyage.org/wiki/MediaWiki:Kartographer.js
 * or more specifically https://en.wikivoyage.org/w/index.php?oldid=4193226
 *
 * 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 (currently not implemented)
 *
 * 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 = {
			"cyclosm": {
				"tilesUrl": "https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
				"options": {
					"wvIsExternal": true,
					"wvName": "CyclOSM",
					"subdomains": [
						"a",
						"b",
						"c"
					],
					"attribs": [
						{
							"url": "https://www.openstreetmap.org/copyright",
							"name": "OpenStreetMap contributors",
							"label": "Map data ©"
						},
						{
							"url": "https://github.com/cyclosm/cyclosm-cartocss-style/releases",
							"name": "CyclOSM v0.6",
							"label": " Map style"
						}
					]
				}
			},
			"cycle-map": {
				"tilesUrl": "https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=6170aad10dfd42a38d4d8c709a536f38",
				"options": {
					"wvIsExternal": true,
					"wvName": "Cycle Map",
					"attribs": [
						{
							"url": "https://www.openstreetmap.org/copyright",
							"name": "OpenStreetMap contributors",
							"label": "Map data ©"
						},
						{
							"url": "https://www.thunderforest.com/",
							"name": "Thunderforest",
							"label": " Map style"
						}
					]
				}
			},
			"transport-map": {
				"tilesUrl": "https://tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=6170aad10dfd42a38d4d8c709a536f38",
				"options": {
					"wvIsExternal": true,
					"wvName": "Transport Map",
					"attribs": [
						{
							"url": "https://www.openstreetmap.org/copyright",
							"name": "OpenStreetMap contributors",
							"label": "Map data ©"
						},
						{
							"url": "https://www.thunderforest.com/",
							"name": "Thunderforest",
							"label": " Map style"
						}
					],
					"maxNativeZoom": 17
				}
			},
			"oepnv": {
				"tilesUrl": "https://tile.memomaps.de/tilegen/{z}/{x}/{y}.png",
				"options": {
					"wvIsExternal": true,
					"wvName": "ÖPNVKarte",
					"attribs": [
						{
							"url": "https://www.openstreetmap.org/copyright",
							"name": "OpenStreetMap contributors",
							"label": "Map data ©"
						},
						{
							"url": "https://memomaps.de/",
							"name": "MeMoMaps",
							"label": " Tiles courtesy of"
						}
					]
				}
			},
			"humanitarian": {
				"tilesUrl": "https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png",
				"options": {
					"wvIsExternal": true,
					"wvName": "Humanitarian",
					"subdomains": [
						"a",
						"b",
						"c"
					],
					"attribs": [
						{
							"url": "https://www.openstreetmap.org/copyright",
							"name": "OpenStreetMap contributors",
							"label": "Map data ©"
						},
						{
							"url": "https://hotosm.org/",
							"name": "Humanitarian OpenStreetMap Team",
							"label": " Map style"
						},
						{
							"url": "https://openstreetmap.fr/",
							"name": "OpenStreetMap France",
							"label": " hosted by"
						}
					]
				}
			}
		};
	/* 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( 'cyclosm' )
					.basemap( 'cycle-map' )
					.basemap( 'transport-map' )
					.basemap( 'oepnv' )
					.basemap( 'humanitarian' )
					.datalayer( map.dataLayers )
					.update();
			} );
		} );
	} );
} )( mediaWiki );