Home

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.

Resources

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

Install

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

Supported Environments

Maptalks supports the following

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

Browsers

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>

Node

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
});

ES Modules

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');