Fu Zhen edited this page Nov 4, 2017 · 8 revisions

image

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

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');
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.