Stefano Bovio Simone Giannecchini GeoSolutions Developing with MapStore; creating a custom dashboard to map crime data 

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 

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 

Design Process 

• 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 

• Interaction with GeoServer OGC Services • WFS + SQL Views -> GeoJSON layer • WPS -> Chart/Table data • WMS -> Background layer Initial Test and Experimentations 

• MapStore Framework • Map component (OpenLayers, Leaflet and Cesium) • Configurable plugins container architecture User Interface https://github.com/geosolutions-it/mapstore-covid-us 

User Interface Design 

User Interface Design 

• Docker Setup • PostgreSQL/PostGIS -> Database • GeoServer -> Spatial data provider • MapStore -> Single page web application Infrastructure 

Data Preparation 

• 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 

• 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 

• 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 

• 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 

Final Event Table 

Final Region Table 

Layers Configuration 

• 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 

• Generated New Layers Based on Event and Regions Table with SQL Statements via GeoServer SQL View Layers 

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

MapStore Events Tracker Application 

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 

• 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 

• 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 

UI Components 

Map View 

Map Visualization Selector 

Map Visualization Selector 

Counter 

Counter and Type Filter 

Normalizer 

Main Line Chart 

Time Range Filter 

Regions Table 

Regions Detail View 

• 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 

What's Next 

• 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 

The End Questions? [email protected] [email protected] [email protected]