Explore the app directly in your browser:
👉 Live demo on GitHub Pages
This repository contains a Vue.js web application that renders GeoJSON maps with dynamic region coloring.
The application imports geographic boundary data in GeoJSON format and applies colors to regions based on external datasets (see /public). It can use any GeoJSON as the basis for the map and it can use a dataset to determine the coloring of the region.
Everything runs locally in the browser with duckdb-wasm as the underlying SQL online analytical processing (OLAP) database.
- Import custom GeoJSON files for map boundaries
- Upload datasets to determine region coloring
- Browser-based processing with no server required
- Real-time filtering and mapping of very large datasets
Prerequisites
- Node.js and npm installed
Installation
- Clone or fork the repository:
git clone https://github.com/sodascience/map-explorer.git- Navigate to the project directory:
cd map-explorer- Install dependencies:
npm install- Start the development server:
npm run devIf you want to use this application you can fork it and add your own files and configuration. Your map will be displayed on the Github page of your fork and you can share it with your own audience!
map-explorer can be configure by changing or adding configuration files in /src/config/map-configs.
The application currently supports one distinct configuration mode, determined by the kind field:
Use this mode when you have a separate data file (e.g., CSV or parquet file) that needs to be joined with your GeoJSON geometries. The data file should contain a column that holds the region id's in the GeoJSON and a valueColumn that holds numberic values that are used to color the regions. It supports categorical columns that can be used as filters. Given an applied filter each region should map to a numerical value.
Fields:
kind(required): Must be set to"geojson-datafile"geojsonFileName(required, string): Filename of the GeoJSON file. Put the file in the/publicfolderdataFileName(required, string): Filename of the data file. Put the file in the/publicfolderidColumnGeojson(required, string): The property name in the GeoJSON features that serves as the unique identifieridColumnDataFile(required, string): The column name of the column in the data file that holds the same unique id's in the GeoJSONcategoryColumns(required, array of strings): Column names that represent categorical/filter dimensionsvalueColumn(required, string): The column name containing the numeric values to visualizelegendTitle(optional, string): Title to display in the map legendmapColorConfig(required, object): Configuration for color mapping (see Map Color Configuration)filter(optional, object): Initial filter state as key-value pairs where keys are category column names and values are the selected categories
Example:
{
"kind": "geojson-datafile",
"mapDescription": {
"title": "Historical disease mention rates",
"description": "This map contains data gathered via Delpher and processed by the ODISSEI SoDa team. Each municipality gets a \"mention rate\" assigned, which is a proxy for the actual disease pressure in this region. See <a href=\"https://github.com/sodascience/disease_database\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline\"> https://github.com/sodascience/disease_database</a>."
},
"categoryColumns": ["year", "month", "disease"],
"valueColumn": "mention_rate",
"idColumnGeojson": "cbscode",
"idColumnDataFile": "cbscode",
"dataFileName": "disease_database_v1.2.parquet",
"geojsonFileName": "nl1869.geojson",
"legendTitle": "Mention Rate",
"mapColorConfig": {
"minValue": 0,
"maxValue": 0.4,
"colorScheme": "viridis",
"dynamic": false,
"colorSchemeInverted": false
},
"filter": {
"year": "1918",
"month": "10",
"disease": "influenza"
}
}The mapDescription object controls the map description that will be shown in the information box.
Fields:
title(required, string): Your map titledescription(required, string): Your map description, supports html so you can use html formatted urls
The mapColorConfig object controls how numeric values are mapped to colors on the map.
Fields:
minValue(required, number): The minimum value for the color scale.maxValue(required, number): The maximum value for the color scale.numBins(optional, positive integer): Number of discrete color bins to use.colorScheme(optional, string): The color scheme to apply. If not specified, defaults to a standard schemedynamic(optional, boolean): Iftrue, the color scale adjusts dynamically based on the current filtered data. Iffalseor not specified, uses the fixedminValueandmaxValuecolorSchemeInverted(optional, boolean): Iftrue, inverts the color scheme (reverses the color order)
The following color schemes are available:
viridis- Perceptually uniform, colorblind-friendly (purple to yellow)plasma- Perceptually uniform (purple to pink to yellow)inferno- Perceptually uniform (black to purple to yellow)magma- Perceptually uniform (black to purple to white)cividis- Colorblind-optimized, blue to yellowturbo- Rainbow-like, high contrastwarm- Warm colors (dark red to yellow)cool- Cool colors (cyan to magenta)cubehelix- Perceptually uniform spiral through color spaceno colorscheme- No color scheme applied
You can add multiple maps by adding multiple configuration files in the /src/config/map-configs folder.
If you have multiple configuration files, you will be able to select your different maps through a dialog.
If you misspecified the configurations the app won't load an an error message will be shown in the browser console.
If you want to embed map-explorer you can do so by including it into an iframe, like so:
<iframe
src="https://sodascience.github.io/map-explorer/"
width="100%"
height="800"
frameborder="0"
allowfullscreen>
</iframe>This is a project by the ODISSEI Social Data Science (SoDa) team.
Do you have questions, suggestions, or remarks on the technical implementation? Create an issue in the issue tracker or feel free to contact Niek de Schipper.
