Mapbox GL Widget
Download: MapboxGLWidget
Introduction
This project is for a Sisense plugin, which generates a new widget type for MapboxGL maps. This map takes data points, in Latitude and Longitude format, and automatically groups them for display when zoomed out.
Steps
The following steps will walk through the process of adding the new chart type and creating a sample map.
STEP 1 - ADD THE PLUGIN
Download the attached .zip file, and extract it to the following path "[Sisense installation path]\PrismWeb\Plugins".
If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder.
STEP 2 - Get your Mapbox API Token
Open the included file, config.js, and add your mapbox API token in the apiToken setting. For more information on how to obtain a mapbox token, please use the following links
https://www.mapbox.com/help/how-access-tokens-work/
https://www.mapbox.com/api-documentation/#tokens
STEP 3 - Create the widget
On your dashboard, click the Create Widget button and select Advanced Configuration. Next, select Mapbox GL from the dropdown. In the data tab, there are several panels for adding data.
- Latitude*: The latitude field for each data point (must be a number)
- Longitude*: The longitude field for each data point (must be a number)
- Label: If used, this is the label that will show up within the tooltip for each point
- Value*: One or more measures to calculate per point. The first value added is also used to determine the coloring of the points
*Required
STEP 4 - Coloring
When using the cluster option, the cluster colors will come from the dashboard's color palette. The defaults here are to color the clusters based on 0-100, 100-750, and 750+ points. This can be adjusted in the widget.js file by modifying the getLayerCluster function.
When displaying heatmaps, the coloring is derived from the first value's color selection.
Single color: the heatmap will range from white -> your selection
Range: The heatmap will generate a range of colors between the min/max
Conditional Colors: The heatmap will range between these colors, using the first condition as the least dense color and the last condition as the most dense.
STEP 5 - Formatting
Basemap: This is the background to use for each widget. We've included the default public map styles, but you can add to this by editing the config.js file. For more information on creating your own basemaps, check out Mapbox's documentation site
https://www.mapbox.com/help/create-a-custom-style/
Style: This is the grouping setting, can be clustering or heatmap. If Clustering is selected, the widget will generate larger circles to group the points. For heatmap, the points are blended together so they don't show up overlapping. Either way, zooming into the map will eventually show the specific data points
Tooltip: Determines how the tooltips are triggered
STEP 6 - Using the widget
- You can drag directly on map to pan across your data
- Double clicking on the map zooms in, and you can also use the scroll wheel of your mouse
- In order to make filter selections, hold down the shift key and draw a shape on the map. Once selected, a filter will be added to the dashboard for the Latitude and Longitude
Selection box:
After Selection:
- You can reset any filter selections by clicking the "Reset" button at the top left of the chart
Notes
- This sample has been confirmed working on Sisense version 7.0.1, and should be backwards compatible with previous version.
- There is a known limitation with this plugin, as it does not support export to PDF
- Last Updated: May 5, 2018
-
Is the limitation, export to pdf resolved?
0 -
What's the secret to getting this plug to show up in my plugins list when I create a widget. I'm in 7.2, and when I install the plugin, add my token to the config file, and restart the site, the plugin doesn't show up.
0 -
That's a fantastic plugin with Mapbox, Thanks !
Do you think it would be possible to add a second value field for the bubble size as it exists for the scatter map?
Thanks
0 -
plugin mapbox gl is causing some other plugins to stop loading. IE is executing the logic in steps and in case of any error/incompatibility it will abort further execution. In this case IE cannot load mapbox correctly and stops loading Blox. If you disable mapbox and refresh the page you will see that Blox is loading correctly.
Web gl have some loading issue in IE11
0 -
For anyone interested in taking advantage of Mapbox's new (and very generous) free tier pricing, simply get the latest sdk files from mapbox using the following URLS
and replace the ones that came with the plugin that you downloaded above. This will change the way the maps are called so that you are counted on loads (sessions) instead of the number of tiles that your users retrieve. The new free tier gives you 50,000 loads for free each month which should be enough for a bunch of us to do what we need to do.More information about the new pricing here:0 -
Does this plugin work on v 7.4?
0 -
@Kirill it is working for us on V8.0.1
LMK if you run into any issues
0 -
will this work in Linux?
0 -
Hi All,
Glad to announce we've developed a few advanced maps based off of Deck.gl for visualisations of large data sets,
With these maps you can tailor suit your specifications onto any available layer, as well as combine a few layers to further enhance your mapping requirements:
More to come soon!
Feel free to reach out for a live demo,
Sisense Partner of the Year 2019!
0
Please sign in to leave a comment.
Comments
9 comments