Awesome
maptalks.mapboxgl
A plugin to add mapbox-gl-js as a layer for maptalks.js.
Tips
This is just a temporary solution for vector tilelayer
The webgl context of maptalks and the webgl context of mapboxgl will not be shared
Please familiarize yourself with the above when you use the plugin, and it is recommended to use the webgl ecology library from maptalks maptalks-gl-layers
Examples
Install
- Install with npm:
npm install maptalks.mapboxgl
. - Download from dist directory.
- Use unpkg CDN:
https://unpkg.com/maptalks.mapboxgl/dist/maptalks.mapboxgl.min.js
Usage
As a plugin, maptalks.mapboxgl
must be loaded after maptalks.js
and mapbox-gl.js
in browsers.
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css' rel='stylesheet' />
<script type="text/javascript" src="https://unpkg.com/maptalks.mapboxgl/dist/maptalks.mapboxgl.min.js"></script>
<script>
var mapboxglLayer = new maptalks.MapboxglLayer('tile',{
glOptions : {
'style' : 'mapbox://styles/mapbox/light-v9'
}
}).addTo(map);
</script>
Supported Browsers
IE 11, Chrome, Firefox, other modern and mobile browsers support WebGL.
API Reference
MapboxglLayer
is a subclass of maptalks.Layer and inherits all the methods of its parent.
Constructor
new maptalks.MapboxglLayer(id, options)
- id String layer id
- options Object options
- glOptions Object mapboxgl creation options defined in mapbox-gl-js api doc
- other options defined in maptalks.Layer
getGlMap()
get mapbox-gl-js map instance used by the layer
Returns Map
toJSON()
export the layer's JSON.
var json = mapboxglLayer.toJSON();
Returns Object
Contributing
We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.
Develop
The only source file is index.js
.
It is written in ES6, transpiled by babel and tested with mocha and expect.js.
Scripts
- Install dependencies
$ npm install
- Watch source changes and generate runnable bundle repeatedly
$ gulp watch
- Tests
$ npm test
- Watch source changes and run tests repeatedly
$ gulp tdd
- Package and generate minified bundles to dist directory
$ gulp minify
- Lint
$ npm run lint