Maperial.js

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.

Features

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

Getting started

HTML

First of all, add the js script on your page

<script src="http://static.maperial.com/js/maperial-0.1.4.min.js" type="text/javascript"></script>

And add your html container

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

JS

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 :

map.addMapquest();

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 :

• Draw MapViews with Layers
• Share Data
• Attach Tools

MapViews

A MapView can be either :

• a Map
• an Anchor
• a Lens
• a Minifier

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

Map

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>

Anchor

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

Lens

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

Minifier

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

Layers

• 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.

• Maperial Tiles
• Tiles from Open Street Map
• Tiles from Thunderforest
• Tiles from Stamen
• Tiles from Mapquest
• Tiles from numerous WMS

Data Layers

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

Types of Data

• DynamicalData allows to add/remove points with custom properties.
• HeatmapData allows to draw heatmaps with custom colorbars. (Codepen example)

var url = 'http://static.maperial.com/geojson/heatmap.geojson.json';
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