/missoula-boundaries

based on the seattle boundaries project

Primary LanguageCSS

missoula-boundaries

WIP Web app that lets users enter a Montana address, returns which county/municipalities/school districts/legislative districts it's part of. Inspired by Seattle Boundaries.

Requirements

Needs a Mapbox public token key. Using dotenv, token is stored in MAPBOX_API_TOKEN. See .env.example.

Project components:

  • Geographic data store --> Geojson files in github repo directory
    • Shapefile data is easily available for most districts. Will need to collect/clean/standardize as GeoJSON
  • Data processing system for taking a point (lat/long coords) and returning the boundaries it's part of. Uses Turf.js.
  • Front end application

Project structure

  • app/ - source directory
    • /components/ - React components
      • App.jsx - Wrapper
      • layers.js - config file for map layers
      • DataManager.js - non-display class for managing app data w/ Turf.js
        • handles lat/long within calculation
      • LocationForm.jsx - React component for entering location of interest
        • collects address, geocodes, passes to DataManager
      • DistrictMap.jsx - React component for displaying interest point inside appropriate boundaries
    • /css/
    • /geodata/ - Geojson boundary data
  • build/ - build directory
  • scripts - Scripts for data collection/processing (e.g. converting source shapefiles to geojson)

TODOS:

  • Add more layers (school districts, municipalities)
    • stitch together school districts (consolidated districts --> elem, hs layers, subset of elem layers)
  • Figure out what initial app state should look like
  • Look at nested layer display in dropdown
  • Try showing non-selected boundaries on map (Turns out this is memory intensive w/out optimization work - maybe try a canvas layer instead of an SVG one)
  • Set up address input box to display current address?
  • Add map controls: Zoom to street level, Zoom to district extent
  • Fix map extent fitting wackiness
  • Map: Limit zoom extents to Montana. Maybe highlight state boundary
  • Map: Fine-tune Mapbox styling (e.g. deemphasize trailer park names)
  • Fine-tune map interaction (e.g. animations between different views)
  • Add buttons for 'default locations'
  • Add way to select point apart from entering address (e.g. drop pin)
  • User testing
  • General refactoring

Potential stretch features

  • Add in information for certain districs (e.g. reps, contact information?)
  • Set up some sort of async data layer loading? (If initial bundle gets too big)

References:

Looks like Seattle Boundaries is split into web app, API and geography repos. Web app is built with Choo (some lightweight JS framework) and Mapbox maps. API uses Node's http server, it looks like.

The geography (boundaries) repo stores things as geojsons, with some packaging so they're hosted on NPM. The overall project uses node/NPM to collect its parts together.

References for setting up react development environment with webpack/Babel: