MediaWiki:Kartographer.js

From Wikivoyage
Jump to navigation Jump to search

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/**********************************************************************
 * 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)
 * - Adds a control (top left) to show the Nearby Articles from enwikivoyage.
 *
 * 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,
		nearbyArticlesCfg = {
			url: 'https://tools.wmflabs.org/wikivoyage/w/data/en-articles.js',
			thumbPath: '//upload.wikimedia.org/wikipedia/commons/thumb/'
		},
	/* 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": "http://www.openstreetmap.org/copyright",
							"name": "OpenStreetMap",
							"label": "Map data"
						}
					]
				}
			},
			"landscape": {
				/* [[User:DTankersley (WMF)]] is the contact person for this API key */
				"tilesUrl": "http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=ca8e8a8e3f9a44c19a8edcf8fb5f90c4",
				"options": {
					"wvIsExternal": true,
					"wvName": "Relief map",
					"attribs": [
						{
							"url": "http://www.openstreetmap.org/copyright",
							"name": "OpenStreetMap",
							"label": "Map data"
						},
						{
							"url": "http://www.opencyclemap.org/",
							"name": "Andy Allan",
							"label": "Tiles"
						}
					]
				}
			},
			"traffic-line-network": {
				"tilesUrl": "http://www.openptmap.org/tiles/{z}/{x}/{y}.png",
				"options": {
					"wvIsOverlay": true,
					"wvIsExternal": true,
					"wvName": "Traffic line network",
					"attribs": [
						{
							"url": "http://openptmap.org/",
							"name": "Openptmap.org",
							"label": "Traffic lines"
						}
					],
					"opacity": 0.5,
					"maxNativeZoom": 17
				}
			},
			"boundaries": {
				"tilesUrl": "http://korona.geog.uni-heidelberg.de/tiles/adminb/x={x}&y={y}&z={z}",
				"options": {
					"wvIsOverlay": true,
					"wvIsExternal": true,
					"wvName": "Boundaries",
					"attribs": []
				}
			},
			"cycling": {
				"tilesUrl": "http://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png",
				"options": {
					"wvIsOverlay": true,
					"wvIsExternal": true,
					"wvName": "Cycling",
					"attribs": [
						{
							"url": "http://cycling.waymarkedtrails.org",
							"name": "Waymarked Trails",
							"label": "Cycling routes"
						}
					]
				}
			},
			"hiking": {
				"tilesUrl": "http://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png",
				"options": {
					"wvIsOverlay": true,
					"wvIsExternal": true,
					"wvName": "Hiking",
					"attribs": [
						{
							"url": "http://hiking.waymarkedtrails.org",
							"name": "Waymarked Trails",
							"label": "Hiking trails"
						}
					]
				}
			},
			"hill-shading": {
				"tilesUrl": "http://{s}.tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png",
				"options": {
					"wvIsOverlay": true,
					"wvIsExternal": true,
					"wvName": "Hill shading",
					"attribs": [
						{
							"url": "http://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' );

				wv.NearbyArticles.setConfig( nearbyArticlesCfg );

				$.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( 'boundaries' )
					.overlay( 'hill-shading' )
					.overlay( 'cycling' )
					.overlay( 'hiking' )
					.datalayer( map.dataLayers )
					.update();
				wvmap.nearby();

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