Mazemap JavaScript API

Purpose

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:

Leaflet.Icon.Glyph (as Maze.Icon.Glyph)
Leaflet.CheapLayerAt (as Maze.Map.getLayerAt())
Leaflet.LayerGroup.Collision (as Maze.LayerGroup.Collision)
Leaflet.MarkerCluster (as Maze.MarkerClusterGroup)
Leaflet.GridLayer.FadeOut

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.

Requirements

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="https://api.mazemap.com/js/v1.3.2/mazemap.min.css">
<script type='text/javascript' src='https://api.mazemap.com/js/v1.3.2/mazemap.min.js'></script>

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

<link rel="stylesheet" href="https://api.mazemap.com/js/v1.3.2/mazemap.min.css">
<script type='text/javascript' src='https://api.mazemap.com/js/v1.3.2/mazemap.polyfilled.min.js'></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:

Use PascalCase (uppercased first letter) when referring to classes and constructors. Maze.Map is a class, and new Maze.Map is a constructor.
Use camelCase (lowercased first letter) when referring to instances, functions, methods, and factory methods. Maze.map is a factory method.
Prefer using a factory method over class constructors.
Do not confuse a class with its factory method!

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

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

var foo = Maze.map(...);    // Best

Get started

1. Add the necessary files and DOM stuff

Add the following files to your html file

<link rel="stylesheet" href="https://api.mazemap.com/js/v1.3.2/mazemap.min.css">
<script type='text/javascript' src='https://api.mazemap.com/js/v1.3.2/mazemap.min.js'></script>

Add a container in the `<body>`:

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

And initialize that container using `Maze.map()` in javascript.

<script>
  var map = Maze.map('mazemap-container', {});
</script>

2. Begin scripting with the map

  map.setView([63,10]);

3. Learn from examples

Study examples on the example page

Go to examples page