Mazemap JavaScript API


The Mazemap JavaScript API allows enterprise customers to easily build highly-customizable web applications using Mazemap maps and data.

At its core, the Mazemap JS API builds on top of the LeafletJS library. Developers inexperienced in working with maps and/or JavaScript are encouraged to learn the basics of working with Leaflet before embarking on the more complicated features of the Mazemap API.

The JS API consists of a single global object, Maze, which works as the global object L in Leaflet. For example, L.Map becomes Maze.Map, L.LatLng becomes Maze.LatLng, L.LayerGroup becomes Maze.LayerGroup, and so on. Make sure to check the API reference for Leaflet 1.0.0.

Also embedded into the Mazemap JS API are:

Besides all of Leaflet's classes, methods, events and options, the Mazemap JS API includes some functionality of its own. This is documented in the Mazemap API documentation.


The Mazemap JS API comes in two flavours: one for browsers that support Promises and the Fetch API, and one which includes a fetch polyfill and a promise polyfill, with wider browser support but slightly bigger size.

In order to use the slimmer flavour of the JS API, you'll need to include this in your web pages:

<link rel="stylesheet" href="">
<script type='text/javascript' src=''></script>

In order to use the polyfilled flavour, include this instead:

<link rel="stylesheet" href="">
<script type='text/javascript' src=''></script>
File name File size MSIE Firefox Chrome Safari
mazemap.min.js 235 KiB No Yes (39+) Yes (42+) No
mazemap.polyfill.min.js 267 KiB 9+ Yes Yes Yes

The Mazemap JS API does not work in MSIE 8.

Otherwise, the JS API does not require any other JavaScript libraries (such as jQuery, underscore or Modernizr)

Coding conventions

The Mazemap JS API follows a few coding conventions from Leaflet. The most important ones are:

var foo = Maze.Map(...);    // Wrong

var foo = new Maze.Map(...);    // OK, but not recommended

var foo =;    // Best

Get started

1. Add the necessary files and DOM stuff

Add the following files to your html file

<link rel="stylesheet" href="">
<script type='text/javascript' src=''></script>

Add a container in the <body>:

<div id='mazemap-container' style="width: 100%; height: 100%;"></div>

And initialize that container using in javascript.

  var map ='mazemap-container', {});

2. Begin scripting with the map


3. Learn from examples

Study examples on the example page

Go to examples page