User:Glodenox/Scripts/WME JavaScript development

From Wazeopedia

Best practices for development of JavaScript extensions

All normal best practice guidelines apply; some references are:

Run your code through some useful analyzers to head off potential problems, like:

GreasyFork applies these analyzers when you enable the syntax marking in the source editing page.

jQuery and OpenLayers

WME (Waze Map Editor) uses jQuery and OpenLayers. jQuery makes it easy to access and manipulate properties and solves several problems in a uniform cross-browser way. WME currently runs jQuery 2.1.4 (this does not include any optional modules like jQuery UI).

OpenLayers is a library that can be used to show geographical data. Waze uses this library to display the world map. Waze uses version 2.14 of OpenLayers.

Code encapsulation

Userscripts are executed within a separated environment. As such, the functions defined within the userscript are hidden from the original page and other scripts (unless exposed via the window object). As such, it is not necessary to encapsulate your script or prefix your variables and functions to prevent collisions. Encapsulating your code doesn't do any harm though and could simply be done by putting all functions and

(function() {
  // all function and variable declarations go in here

UserScript Bootstrapping

TODO: explanation

function awaitLogin(e) {
  if (e && e.user == null) {
  if (typeof Waze === 'undefined' ||
      typeof Waze.loginManager === 'undefined') {
    setTimeout(awaitLogin, 100);
  if (!Waze.loginManager.hasUser()) {"login", null, awaitLogin);"loginStatus", null, awaitLogin);
  // TODO: check whether this is actually useful to do
  if (typeof document.getElementById('WazeMap') === undefined) {
    setTimeout(awaitLogin, 100);

function init() {
  // User has logged in 

TODO: add information about using the GM_* functions and the impact in GreaseMonkey + the several additional topics described in the forum