Skip to content
JavaScript API to create dynamical WebGL maps
JavaScript CSS Python
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Maperial.js Analytics

Codeship Status

A new way to create maps

Maperial is a free javascript API to create dynamical WebGL maps.

Configure your own set of layers and parameters to share, visualize and understand your data.

Check some examples on Codepen.


  • Layer fusion
  • Dynamical data
  • Heatmaps
  • GeoJSON
  • WMS
  • Animated Shaded Relief
  • Use any external Basemap

Getting started


First of all, add the js script on your page

<script src="" type="text/javascript"></script>

And add your html container

<div id="map"></div>


Call upon Maperial

var maperial = new Maperial();

Use it to add a view, linked with your html container

var map = maperial.createMap({
    container: 'map'

Add a layer :


Main concepts

Instanciate and use one single Maperial to build every map on your web page.

var maperial = new Maperial();

With your maperial you can now :


A MapView can be either :

If you don't specify layers on a child MapView, it will use the same ones as the parent MapView.


A Map is the parent of all other types of MapView.

Each Map is linked with an html container :

var map = maperial.createMap({
    container: 'map1'

Therefore, you will need an html tag for every map in your web page. Here is the container for the previous map.

<div id="map1"></div>


An Anchor is the exact same thing as a Map, but instead of attaching it to an html container, you place it inside a MapView.

var anchor = map.addAnchor(options);

See the example on Codepen


A Lens allows to highlight an area using a greater zoom.

var lens = map.addLens(options);

Use options to set it fixed or draggable, customize the size, position etc...

See the example on Codepen


A Minifier is a view to zoom out your map, with the same center. It allows to understand where is situated the area using a lower zoom.

var minifier = map.addMinifier(options);

Use options to set it fixed or draggable, its size, position etc...

See the example on Codepen


  • You may add and remove any layers to any MapView.
  • Each Layer may contain either Images or Data.
  • Use Fusion to merge your layers with custom settings and draw unique maps.

Image Layers

Maperial provide our own unhackneyed tiles but you may use an evergrowing collection of external tiles.

Data Layers

Before to add data layers, you need to create a Data type first.

Types of Data
var url = '';
var data = maperial.createHeatmapData(url);
Attach your Data

Then you can attach it to any MapView by adding a layer depending on the data type :

view.addDynamicalLayer(data, options);
view.addHeamapLayer(data, options);

More !

  • Understand all other Maperial's concepts
  • Explore the complete API reference to draft your own maps.

BSD License

You may use Maperial.js in a free or commercial project, providing you follow the BSD crediting requirements, provided in the project LICENSE

You can’t perform that action at this time.