Dragonfly
Dragonfly is a JavaScript library that uses WebGL to render interactive maps from vector tiles. It is built on top of Mapbox GL JS. Dragonfly focuses on data-driven maps providing tools to create powerful data maps even for very large data sets and very detailed geographies.
Checkout the project on Github
Key features
- Data driven
- Handling large amounts of data (geography tiles with sizes of 10GB and datasets over 100GB)
- Apply different projections (Mercator, Conic, etc) to your datasets and switch seamlessly
Getting started
To get started include the JavaScript and CSS files in the <head> of the HTML page.
<script src="https://geobuffer.com/dragonfly.js"></script>
<link href="https://geobuffer.com/dragonfly.css" rel="stylesheet"/>
Next step is to add the following code to <body> of your HTML file.
<div id='map' style='width: 600px; height: 450px;'></div>
<script>
var map = new dragonfly.Map({
container: 'map',
style: {
center: [-74.50, 40], // starting position [lng, lat]
zoom: 0, // starting zoom
version: 8,
sources: {
'source-1': { // geobuffer source definition
type: 'vector',
tiles: ['https://tiles3.socialexplorer.com/gettile/?x={x}&y={y}&z={z}&layers={layers}&projection=EPSG-3857&columns={columns}'], // geobuffer tile delivery url signature
layers: [ // define layers that will be used
{
layerId: '27238' // world landmass layer
}
]
}
},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': '#7acad0'
}
}, {
id: 'world-fill',
source: 'source-1',
'source-layer': '27238',
type: 'fill',
paint: {
'fill-color': 'rgb(240,240,240)'
}
}
]
}
});
</script>Checkout our examples page for more ideas on how to create maps, add, layers, change styles.
3D data visualization
Choropleth map
Bubble map
Dotdensity map
Cluster map
Swipe map
Heatmap
Change projection
