☰

GeoGuessr Bigger Map on Map-Maker

Enables the user to have a bigger map when using the map-maker. It also hides top bar and sidebar.

  1. // ==UserScript==
  2. // @name          GeoGuessr Bigger Map on Map-Maker
  3. // @namespace     MrMike/GeoGuessr/GeoGuessrBiggerMapOnMapMaker
  4. // @version       0.7.0
  5. // @description   Enables the user to have a bigger map when using the map-maker. It also hides top bar and sidebar.
  6. // @author        MrAmericanMike
  7. // @include       /^(https?)?(\:)?(\/\/)?([^\/]*\.)?geoguessr\.com($|\/.*)/
  8. // @grant         GM_addStyle
  9. // @require       https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js
  10. // @run-at        document-start
  11. // ==/UserScript==
  12.  
  13. (function () {
  14. 	"use strict";
  15.  
  16. 	const DEFAULT = {
  17. 		deleteKey: true,
  18. 		preventLeave: true
  19. 	}
  20.  
  21. 	if (!localStorage.getItem("bmomm")) {
  22. 		localStorage.setItem("bmomm", JSON.stringify(DEFAULT));
  23. 	}
  24.  
  25. 	const CONFIG = { ...DEFAULT, ...JSON.parse(localStorage.getItem("bmomm")) };
  26.  
  27. 	localStorage.setItem("bmomm", JSON.stringify(CONFIG));
  28.  
  29. 	document.arrive(".map-maker-map", () => {
  30. 		if (!document.querySelector("#settings-button")) {
  31. 			addListeners();
  32. 			doStyles();
  33. 			addSettings();
  34. 		}
  35. 	});
  36.  
  37. 	document.leave(".map-maker-map", () => {
  38. 		if (!window.location.pathname.includes("map-maker")) {
  39. 			if (CONFIG.deleteKey) {
  40. 				document.removeEventListener("keydown", keyDown, true);
  41. 			}
  42. 			if (CONFIG.preventLeave) {
  43. 				window.removeEventListener("beforeunload", tryPreventLeave);
  44. 			}
  45. 			resetStyles();
  46. 			removeSettings();
  47. 		}
  48. 	});
  49.  
  50. 	function addSettings() {
  51. 		const SETTINGS_BUTTON = document.createElement("div");
  52. 		SETTINGS_BUTTON.setAttribute("id", "settings-button");
  53. 		SETTINGS_BUTTON.setAttribute("title", "Bigger Map on Map-Maker Settings");
  54. 		SETTINGS_BUTTON.innerHTML = "<div style='font-size: 0.85vw;'>&#10020;</div>";
  55. 		SETTINGS_BUTTON.style.display = "flex";
  56. 		SETTINGS_BUTTON.style.justifyContent = "center";
  57. 		SETTINGS_BUTTON.style.alignItems = "center";
  58. 		SETTINGS_BUTTON.style.position = "fixed";
  59. 		SETTINGS_BUTTON.style.top = "1vh";
  60. 		SETTINGS_BUTTON.style.right = "0.1vw";
  61. 		SETTINGS_BUTTON.style.width = "0.8vw";
  62. 		SETTINGS_BUTTON.style.height = "0.8vw";
  63. 		SETTINGS_BUTTON.style.backgroundColor = "dodgerblue";
  64. 		SETTINGS_BUTTON.style.borderRadius = "1vw";
  65. 		SETTINGS_BUTTON.style.cursor = "pointer";
  66. 		SETTINGS_BUTTON.style.zIndex = 9999;
  67.  
  68. 		const SETTINGS = document.createElement("div");
  69. 		SETTINGS.setAttribute("id", "settings-content");
  70. 		SETTINGS.style.position = "fixed";
  71. 		SETTINGS.style.padding = "8px 16px";
  72. 		SETTINGS.style.textAlign = "center";
  73. 		SETTINGS.style.color = "aliceblue";
  74. 		SETTINGS.style.top = "1vh";
  75. 		SETTINGS.style.right = "1%";
  76. 		SETTINGS.style.width = "210px";
  77. 		SETTINGS.style.height = "auto";
  78. 		SETTINGS.style.backgroundColor = "#20203099";
  79. 		SETTINGS.style.borderRadius = "8px";
  80. 		SETTINGS.style.zIndex = 9999;
  81. 		SETTINGS.style.display = "none";
  82. 		SETTINGS.innerHTML = `
  83. 		<div style="display: flex; margin: 0 auto; margin-bottom: 12px; justify-content: space-between; align-items: center;">
  84. 			<h3 title='When enabled, pressing Delete on Keyboard will delete the selected location'>Enable Delete Key</h3>
  85. 			<input id="delete-key" type="checkbox" title='When enabled, pressing Delete on Keyboard will delete the selected location'/>
  86. 		</div>
  87. 		<div style="display: flex; margin: 0 auto; margin-bottom: 12px; justify-content: space-between; align-items: center;">
  88. 			<h3 title='Attempts to prevent the user leaving the page by mistake'>Attempt to prevent leaving page</h3>
  89. 			<input id="prevent-leave" type="checkbox" title='Attempts to prevent the user leaving the page by mistake'/>
  90. 		</div>
  91. 		`;
  92.  
  93. 		document.body.append(SETTINGS_BUTTON);
  94. 		document.body.append(SETTINGS);
  95.  
  96. 		const deleteKey = document.querySelector("#delete-key");
  97. 		const preventLeave = document.querySelector("#prevent-leave");
  98. 		deleteKey.checked = CONFIG.deleteKey;
  99. 		preventLeave.checked = CONFIG.preventLeave;
  100.  
  101. 		deleteKey.addEventListener("click", (event) => {
  102. 			if (deleteKey.checked) {
  103. 				document.addEventListener("keydown", keyDown, true);
  104. 			}
  105. 			else {
  106. 				document.removeEventListener("keydown", keyDown, true);
  107. 			}
  108. 			CONFIG.deleteKey = deleteKey.checked;
  109. 			localStorage.setItem("bmomm", JSON.stringify(CONFIG));
  110. 		});
  111.  
  112. 		preventLeave.addEventListener("click", (event) => {
  113. 			if (preventLeave.checked) {
  114. 				window.addEventListener("beforeunload", tryPreventLeave);
  115. 			}
  116. 			else {
  117. 				window.removeEventListener("beforeunload", tryPreventLeave);
  118. 			}
  119. 			CONFIG.preventLeave = preventLeave.checked;
  120. 			localStorage.setItem("bmomm", JSON.stringify(CONFIG));
  121. 		});
  122.  
  123. 		SETTINGS_BUTTON.addEventListener("click", () => {
  124. 			if (SETTINGS.style.display == "none") {
  125. 				SETTINGS.style.display = "block";
  126. 			}
  127. 			else {
  128. 				SETTINGS.style.display = "none";
  129. 			}
  130. 		})
  131.  
  132. 	}
  133.  
  134. 	function removeSettings() {
  135. 		document.querySelector("#settings-button").remove();
  136. 		document.querySelector("#settings-content").remove();
  137. 	}
  138.  
  139. 	function doStyles() {
  140. 		GM_addStyle(`
  141. 		div[class^='classic_header__']{
  142. 			display: none !important;
  143. 		}
  144. 		aside{
  145. 			display: none !important;
  146. 		}
  147. 		.container{
  148. 			margin-bottom: 64px !important;
  149. 		}
  150. 		.title{
  151. 			display: none !important;
  152. 		}
  153. 		.map-type__description{
  154. 			display: none !important;
  155. 		}
  156. 		.margin--bottom-large {
  157. 			margin-top: 0.5rem !important;
  158. 			margin-bottom: 0.5rem !important;
  159. 		}
  160. 		div[class^='classic_layout__']{
  161. 			grid-template-columns: 0rem 1fr !important;
  162. 			grid-template-rows: 1vh 1fr auto !important;
  163. 		}
  164. 		main[class^='classic_main__']{
  165. 			padding: 0px !important;
  166. 			grid-column: 2 !important;
  167. 			grid-row: 2 !important;
  168. 		}
  169. 		.container--large {
  170. 			--width: 98% !important;
  171. 		}
  172. 		.streetview-panel {
  173. 			max-height: 100% !important;
  174. 			width: 50vw !important;
  175. 		}
  176. 		.map-maker-map__search {
  177. 			width: 60vw !important;
  178. 		}
  179. 		@media only screen and (max-width: 1200px) {
  180. 			div[class^='classic_layout__']{
  181. 				grid-template-columns: 1fr !important;
  182. 			}
  183. 			main[class^='classic_main__']{
  184. 				grid-column: 1 !important;
  185. 			}
  186. 		}
  187. 		`);
  188. 	}
  189.  
  190. 	function resetStyles() {
  191. 		GM_addStyle(`
  192. 		div[class^='classic_header__']{
  193. 			display: grid !important;
  194. 		}
  195. 		aside{
  196. 			display: block !important;
  197. 		}
  198. 		.container{
  199. 			margin-bottom: 0px !important;
  200. 		}
  201. 		.title{
  202. 			display: block !important;
  203. 		}
  204. 		.map-type__description{
  205. 			display: block !important;
  206. 		}
  207. 		.margin--bottom-large {
  208. 			margin-top: 0rem !important;
  209. 			margin-bottom: 2.5rem !important;
  210. 		}
  211. 		div[class^='classic_layout__']{
  212. 			grid-template-columns: 18rem 1fr !important;
  213. 			grid-template-rows: var(--layout-header-height) 1fr auto !important;
  214. 		}
  215. 		main[class^='classic_main__']{
  216. 			padding: var(--layout-content-padding-top) var(--layout-content-horizontal-padding) var(--layout-content-padding-bottom) !important;
  217. 			grid-row: 2 !important;
  218. 		}
  219. 		.container--large {
  220. 			--width: 87.5rem !important;
  221. 		}
  222. 		.streetview-panel {
  223. 			max-height: 30rem !important;
  224. 			width: 35rem !important;
  225. 		}
  226. 		.map-maker-map__search {
  227. 			width: 20rem !important;
  228. 		}
  229. 		`);
  230. 	}
  231.  
  232. 	function keyDown(event) {
  233. 		if (event.key == "Delete") {
  234. 			let buttons = document.getElementsByClassName("button--danger");
  235. 			for (let x = 0; x < buttons.length; x++) {
  236. 				if (buttons[x].textContent == "Delete") {
  237. 					buttons[x].click();
  238. 				}
  239. 			}
  240. 		}
  241. 	}
  242.  
  243. 	function tryPreventLeave(event) {
  244. 		if (event.path[0].location.pathname.includes("map-maker")) {
  245. 			event.preventDefault();
  246. 			return event.returnValue = "Are you sure you want to exit?";
  247. 		}
  248. 	}
  249.  
  250. 	function addListeners() {
  251. 		if (CONFIG.deleteKey) {
  252. 			document.addEventListener("keydown", keyDown, true);
  253. 		}
  254. 		if (CONFIG.preventLeave) {
  255. 			window.addEventListener("beforeunload", tryPreventLeave);
  256. 		}
  257. 	}
  258.  
  259. 	if (window.location.pathname.includes("map-maker")) {
  260. 		if (!document.querySelector("#settings-button")) {
  261. 			addListeners();
  262. 			doStyles();
  263. 			addSettings();
  264. 		}
  265. 	}
  266. })();