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="assets/lib/dragonfly.js"></script>
<link href="assets/lib/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