Maptalks is an open-source javascript library to create integrated 2D/3D maps with essential features for mapping projects.

Maptalks brings data to maps by web standards, with Canvas, WebGL and other techniques like SVG/CSS3/HTML, full capabilities of modern browsers.

It's easy to extend. You can add new features as a plugin like adding new methods, creating new layers or interactions, etc.

This wiki focuses on advanced topics like guides of plugin development. For study of maptalks, you can refer to resources listed below.

• Web Site
• Examples
• API Reference
• Docs
• Plugins

Maptalks.js can be installed in 2 ways:

• Standalone file

download the lastest release and load it in your HTML page like:

<link href="path/to/maptalks.css" rel="stylesheet" type="text/css" />
<script src="path/to/maptalks.min.js" type="text/javascript"></script>

• NPM

Install Node and then in shell:

npm install maptalks --save

Maptalks supports the following

• Modern browsers and IE9+ (only IE11 for 3D features)
• Mobile browsers
• Node >= 4.x
• Electron

In browsers, maptalks registers itself as a global namespace maptalks.

<script src="path/to/maptalks.js"></script>
<script src="path/to/maptalks.heatmap.js"></script>
<script>
var map = new maptalks.Map('map', {
  center :[0, 0],
  zoom : 1 
});

//heatmap plugin extends maptalks with a new class HeatLayer
var heatmapLayer = new maptalks.HeatLayer('h', data)
.addTo(map);
</script>

On node, you can use any canvas-compatible container to initialize maps, e.g. node-canvas.

const maptalks = require('maptalks');
const { createCanvas, loadImage } = require('canvas');
const canvas = createCanvas(200, 200);

const map = new maptalks.Map(canvas, {
  center : [0, 0],
  zoom : 1
});

If your enviroment supports ES Modules, you can import maptalks's default bundle as a namespace.

import * as maptalks from 'maptalks';
//plugin's classes should be imported directly like
import { ThreeLayer } from 'maptalks.three';

const map = new maptalks.Map(canvas, {
  center : [0, 0],
  zoom : 1
});

const layer = new ThreeLayer('three');