$30 off During Our Annual Pro Sale. View Details »

Developing with MapStore; creating a custom dashboard to map crime data

Developing with MapStore; creating a custom dashboard to map crime data

The presentation will focus on the use of MapStore as web gis framework to create a modular, reproducible, simple yet powerful dashboard to visualize crime data (but in reality many different types of location based data) leveraging on GeoServer and PostGIS advanced functionalities. We will describe the main steps for creating such an infrastructure leveraging on the MapStore components and framework then we will cover how the existing dashboard template can be configured to work with your own data sources (eventually touching the needed processing steps for the data itself) including GeoServer and PostGIS advanced functionalities.
We will eventually discuss further improvements and new features to evolve the current capabilities to capture new and emerging requirements.

The goal of this presentation is twofold, on one side we are addressing developers in order to show them advanced usage of MapStore to develop compelling applications on the other side we will be addressing power users and system administrators willing to deploy the Crime Mapping dashboard to make their own data available without writing code.

Simone Giannecchini

August 31, 2022

More Decks by Simone Giannecchini

Other Decks in Technology


  1. Stefano Bovio Simone Giannecchini GeoSolutions Developing with MapStore; creating a

    custom dashboard to map crime data
  2. GeoSolutions • Offices in Italy & US, Worldwide clients •

    30+ collaborators, 25+ Engineers • Our products • Our Offer Enterprise Support Services Deployment Subscription Professional Training Customized Solutions GeoNode
  3. Affiliations We strongly support Open Source, it Is in our

    core We actively participate in OGC working groups and get funded to advance new open standards We support standards critical to GEOINT
  4. Design Process

  5. • Crime Location Data • Point geometry • Type property

    • Date property • Visualization in a Web Application • Map visualization • Charts and table visualizations • Possibility to count and filter data based on type/date/precinct Initial Requirements
  6. • Interaction with GeoServer OGC Services • WFS + SQL

    Views -> GeoJSON layer • WPS -> Chart/Table data • WMS -> Background layer Initial Test and Experimentations
  7. • MapStore Framework • Map component (OpenLayers, Leaflet and Cesium)

    • Configurable plugins container architecture User Interface https://github.com/geosolutions-it/mapstore-covid-us
  8. User Interface Design

  9. User Interface Design

  10. • Docker Setup • PostgreSQL/PostGIS -> Database • GeoServer ->

    Spatial data provider • MapStore -> Single page web application Infrastructure
  11. Data Preparation

  12. • Event • it has an identifier • it is

    categorized by different types • it has a date time information • it is associated with a region with identifier (eg. precinct) • it is a point geometry • Region • it has an identifier • it is a polygon geometry • it could be included in an higher administrative level • it could be associated with a population count Event and Region Data
  13. • Access to an Open Data Portal (eg. NYC) •

    Search a dataset (eg. NYPD-Complaint-Data-Historic) • Filter data by categories and time range • Finally export as CSV Download Event Data
  14. • Access to an Open Data Portal (eg. NYC) •

    Search a region dataset (eg. Police-Precincts) • Download as format that support spatial data Download Region Data
  15. • Create an SQL Script • Rename columns to normalize

    properties • Conversion of latitude and longitude to point geometry • Include new month properties generated from date formatted as YYYYMM to events • Include missing properties (eg. population) • Setup events-tracker docker compose • Add the new script in the sql/ folder • Edit docker-compose.yml and add a new sql entry to the postgres volumes Data Conversion
  16. Final Event Table

  17. Final Region Table

  18. Layers Configuration

  19. • Initial Datastore Layers • event • region • Generated

    SQL Views Layers • extended events with region group name and population • extended regions with events count • hexagon cluster with events count • square cluster with events count • point cluster with events count Generated Layers
  20. • Generated New Layers Based on Event and Regions Table

    with SQL Statements via GeoServer SQL View Layers
  21. • Generated New Layers Based on Event Table with SQL

    Statements via GeoServer SQL View Layers
  22. MapStore Events Tracker Application

  23. mapstore-events-tracker is a MapStore downstream project that: • has been

    implemented on top of @mapstore/project experimental package • uses the frontend framework only • adds custom plugin for the specific use case • publishes custom bundles via npm package MapStore Events Tracker
  24. • Initialize a new client project template with npx mapstore-events-tracker

    create ./my-project • The script provides • Static assets such as css, js files, images, … • Configurations files • localConfig.json • map.json • viewerConfig.json • Translations files Client Configurations
  25. • localConfig.json • generic configuration properties (locales, translations paths, …)

    • plugins components enabled in the viewer • map.json • background layers • map center, zoom, … • viewerConfig.json • endpoints and layers for charts, tables, … • map visualizations types • normalizer options Client Configurations
  26. UI Components

  27. Map View

  28. Map Visualization Selector

  29. Map Visualization Selector

  30. Counter

  31. Counter and Type Filter

  32. Normalizer

  33. Main Line Chart

  34. Time Range Filter

  35. Regions Table

  36. Regions Detail View

  37. • How to Start the Demo • Clone https://github.com/geosolutions-it/events-tracker •

    Install docker, docker-compose, node and npm • Run ./start.sh command • Open the browser at http://localhost:8888/ • Sample Crime Data • New York -> https://data.cityofnewyork.us/ • Denver -> https://www.denvergov.org/opendata Demo
  38. What's Next

  39. • Extend visualizations types including 3D views • Improve request

    of vector data • Experiment with different layer types • Improve components UX (eg. include time range filter in the main chart) Further Improvements Proposals
  40. The End Questions? stefano.bovio@geosolutionsgroup.com simone.giannecchini@geosolutionsgroup.com info@geosolutionsgroup.com