User:Bene*/maps.js

Note: After publishing, 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 / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
( function( mw, $ ) {

	var lang = mw.config.get( 'wgUserLanguage' );

	// todo: import from http://meta.wikimedia.org/w/index.php?title=MediaWiki:Wikiminiatlas.js
	switch ( lang ) {
	case 'en':
	default:
		mw.messages.set( 'wikiminiatlas-tooltip', 'Show location on an interactive map' );
		mw.messages.set( 'openstreetmap-tooltip', 'Show location in OpenStreetMap' );
		break;
	case 'de':
	case 'de-at':
	case 'de-ch':
	case 'de-formal':
		mw.messages.set( 'wikiminiatlas-tooltip', 'Ort auf interaktiver Karte' );
		mw.messages.set( 'openstreetmap-tooltip', 'Ort in OpenStreetMap' );
		break;
	case 'fa':
		mw.messages.set( 'wikiminiatlas-tooltip', 'نمایش مکان بر روی نقشهٔ تعاملی' );
		mw.messages.set( 'openstreetmap-tooltip', 'نمایش مکان بر روی نقشهٔ باز شهری' );
		break;
	}

	function init( $content ) {
		$content.find( '.valueview' ).each( function() {
			var $valueview = $( this );
			var data = $valueview.data && $valueview.data();
			var dataTypeId = data && data.valueview && data.valueview.options && data.valueview.options.dataTypeId;
			if ( dataTypeId !== 'globe-coordinate' ) {
				return;
			}
			var	coordinates = coordinatesToDecimal( data.valueview.getFormattedValue() ),
				// Button for WikiMiniAtlas
				$wikiminiatlas = createButton(
					'https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/WMA_button2b.png/17px-WMA_button2b.png',
					'wikiminiatlas',
					function() {
						showMap( '//toolserver.org/~dschwen/wma/iframe.html?wma=' + coordinates.n + '_' + coordinates.e + '_600_400_' + lang + '_20_' + lang + '&lang=' + lang, 'wikiminiatlas' );
					}
				),
				// Button for OpenStreetMap
				$openstreetmap = createButton(
					'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/OpenStreetMapLogo.png/17px-OpenStreetMapLogo.png',
					'openstreetmap',
					function() {
						showMap( 'https://tools.wmflabs.org/wiwosm/osm-on-ol/kml-on-ol.php?lang=wikidata&uselang=' + lang + '&params=' + coordinates.n + '_N_' + coordinates.e + '_E' + '&title=' + mw.util.wikiUrlencode( mw.config.get( 'wgTitle' ) ), 'openstreetmap' );
					}
				);
			if( $( 'body' ).hasClass( 'rtl' ) ) {
				$valueview.before( $wikiminiatlas ).before( $openstreetmap );
			}
			else {
				$valueview.after( $wikiminiatlas ).after( $openstreetmap );
			}
		} );
	}

	function createButton( src, id, click ) {
		return $( '<img>' )
		.css( {
			margin: '5px',
			cursor: 'pointer'
		} )
		.attr( {
			id: id + '-button',
			height: 15,
			width: 15,
			alt: id,
			src: src,
			title: mw.msg( id + '-tooltip' )
		} )
		.click( click );
	}

	function showMap( url, id ) {
		mw.loader.using( [ 'jquery.ui', 'jquery.spinner' ], function () {
			$( '<div>' )
			.append(
				$( '<iframe>' )
				.attr( {
					id: 'maps-frame-' + id,
					scrolling: 'no',
					frameborder: 0
				} )
				.css( {
					height: '100%',
					width: '100%'
				} )
				.before( 
					$.createSpinner( {
						id: 'maps-spinner-' + id,
						size: 'large',
						type: 'block'
					} )
					.css( {
						position: 'absolute',
						height: '90%',
						'background-color': 'rgba(255,255,255,0.5)'
					} )
				)
			)
			.dialog( {
				title: mw.msg( id + '-tooltip' ),
				height: 460,
				width: 640,
				close: function() {
					$( '#maps-frame-' + id ).remove();
					$.removeSpinner( 'maps-spinner-' + id );
				}
			} );
			$( '#maps-frame-' + id ).attr( 'src', url );
			$( '#maps-frame-' + id ).load( function() {
				$.removeSpinner( 'maps-spinner-' + id );
			} );
		} );
	}

	function coordinatesToDecimal( coordinates ) {
		var ne = coordinates.split( ', ' );
		return { n: toDecimal( ne[0] ), e: toDecimal( ne[1] ) };
	}

	function toDecimal( coordinate ) {
		coordinate = coordinate.replace( /(\d*)°?(\d*)'?([\d.]*)"?(.*)/, '$1 ° $2 \' $3 " $4' ).replace( '  ', '0' );
		var parts = coordinate.split( /[°'"]/ );
		return ( ( parseInt( parts[2] ) / 60 + parseInt( parts[1] ) ) / 60 + parseInt( parts[0] ) ) * ( /[ws]/i.test( parts[3] ) ? -1 : 1 );
	}

	mw.hook( 'wikipage.content' ).add( init );

} )( mediaWiki, jQuery );