Can I add my own JavaScript code to customize a Geo Clusters Map visualization?

Answered

1 comment

Official comment

Ralf Abueg April 09, 2020 03:41 (Edited April 10, 2020 18:44)
Yes you can.

The Geo - Clusters/Custom Maps visualization allows you to add your own custom JavaScript code to customize the look and feel of the map. This is executed right before the map is rendered, after all other processing.

D3.js and Leaflet libraries are supported, so there is no need to initialize prior.

The Custom JavaScript Handler has access to:
- A leaflet ‘map’ object
- A ‘data’ object with the dataset
- A ‘properties’ object that includes the widget settings
Steps to get started:
1. Create a widget with location data (i.e. coordinates, FIPS codes) that you intend to display on a map
2. Select the Geo - Clusters/Custom Maps from the list of visualization types
3. In visualization settings under options, enter or paste your JavaScript code in the Custom Javascript Handler text box
4. Other optional inputs available include setting the Map’s center latitude and longitude, zoom level, etc.
You may use the sample JavaScript code examples below as a starting point.

Example 1: County-level choropleth map

This was used to create a county-level choropleth map from a dataset containing county FIPS codes. It calls into a GeoJSON file containing coordinates that draw the county boundaries. It also includes functions for setting the style and to add a popup to display of the contents when hovering over each feature.

Code Example: https://knowi-custom-samples.s3.amazonaws.com/us-counties.js

Demonstration: https://www.loom.com/share/47445d678e464c90b3811333d24466a1

County-level view:

Example 2: State-level choropleth map (with Drilldowns)

This was used to create a state-level choropleth map from a dataset containing state FIPS codes. It calls into a GeoJSON file containing coordinates that draw the state boundaries and the counties within it. It includes functions for setting the style and to add a popup to display of the contents when hovering over each feature. It also includes a drilldown function, that allows you to drill into individual states.

Code Example: https://knowi-custom-samples.s3.amazonaws.com/us-states-drilldown.js

Demonstration: https://www.loom.com/share/d098bea31b914a869574c5db5f7fe3ac

Country view by state:

Drilldown into individual states:

For more information on Geo Cluster/Custom Maps Visualization type, click here.
Comment actions Permalink

Please sign in to leave a comment.