Mapplets and Samples

This following is a list of mapplets and samples for various geospatial applications.

Gapminder Analytics

This page uses the Leaflet JavaScript library for the map control and ClassyBrew.js for generating class breaks on the Gapminder data variables. We also used Chart.js and jQuery DataTables components for visualizing Gapminder data using charts and tabular formats.
Launch »

World Bank Analytics

This sample shows how to use D3.js, Chart.js, and Leaflet.js to visualize indicator data from the World Bank in geospatial, chart, and tabular formats. We will use Bootstrap form controls in order to allow a client to analyze different indicators by year.
Launch »

Denver AirBnB Analytics

This page uses Leaflet and Turf.js to perform spatial analysis and visualization. D3.js is used to generate a scrollable table of results. The data is retreived from a MySQL database using a spatial query to select data near the specified address. I also used the Nominatim geocoder service to look up the location for the address entered by the user.
Launch »

Gobal Financial Crisis Analytics

This sample shows global banking and systemic crisis developments over the years from 1800 to 2015. The data was sourced using the behavioral financial stability dataset from Harvard Business School.
Launch »

Gapminder Timeseries

Display Gapminder data within a timeseries chart and map of bubbles for the current year. Demonstrates bi-directional data navigation, by clicking on the map to update charts or clicking on chart markers to update the map.
Launch »

Shark Attack Analytics

This page use Leaflet.js and Chart.js to create an interactive dashboard of shark attacks by countries. The information was downloaded from Shark Research Institute. A little data tyding was applied as well as geospatial referencing of the data to each particular country.
Launch »

Sales & Profits Bubbles

Show sales and profits using bubble plots.
Launch »

Map & Chart

Show sales and profits using bubble plots with a chart.
Launch »

InfoWindow

Show sales and profits details in a widget-rich information window.
Launch »

Drawing

Show how to draw shapes on the map and perform spatial searches for features within the drawn area.
Launch »

Geospatial Resume

Show employment and eduction history as well as recreational interesets geographically.
Launch »

Guessing Game

This game is a fun example of using the OpenLayers map library for displaying the player's longitude choice compared to the random value selected by the program.
Launch »

Map and Chart with D3.js

This example uses D3.js to visual Gapminder Income and Inequality data using a choropleth map and time series chart.
Launch »

Map with Timeline Chart

Show how display monthly and cumulative data over time on both map and chart components.
Launch »

Heatmap

Show how to generate a heatmap of dense data.
Launch »

Leaflet - GeoJSON

Show how to consume and filter GeoJSON data using Leaflet.
Launch »

Web API GeoJSON

Show how to use ASP.NET Web API services to return GeoJSON data.
Launch »

Buffering and Intersection

Show how to use Turf.js to perform spatial analysis operations like buffering and intersect detection.
Launch »

Choropleth Mapping

Demonstrate how to visualize dataset variables using a choropleth map. This sample uses ClassyBrew.js to generate the variable class breaks in our dataset.
Launch »

Points of Interest

This map shows points of interest in Colorado with labels and icon styling capabilities.
Launch »

Distance Calculator

This example uses Turf.js to calculate the distance between two points as well as draws a line using the "greatCircle" method.
Launch »