parcel-viewer

parcel-viewer copied to clipboard

Update 7/23/17

This app uses geojson-vt to cut vector tiles on the fly. Users might also want to use Mapbox GL JS which uses geojson-vt natively. ~~however Mapbox GL JS API does not have search capabilities built in for anything not rendered in the browser window, so those would have to be added separately~~ Mapbox GL JS now has support for supplementing or using exclusively results from local sources - see https://docs.mapbox.com/mapbox-gl-js/example/forward-geocode-custom-data/.

Open Parcel Viewer

This open data parcel viewer is a client-side app that uses Leaflet to render a whole county parcel map without the need for a GIS server. Try out the demo. This app also includes my modern-ui custom style for the search bar and layer control.

Sites Using the Open Parcel Viewer

• Scott Township - Lackawanna County, Pa.

Features

• Search by any field or multiple fields, such as Name and/or Parcel ID
• Sidebar, fullscreen, location, printing (using browser print dialog)
• Render up to (approx) 50k parcels
• Customized layer control with thumbnails
• Similar performance on mobile and desktop

Requirements

• Data in topojson format, stored in the data folder - see mapshaper
• A string field in the data titled 'index' to house the searchable attributes (with a separator - see the example)
• Jekyll (or download the zip file and build the app manually)
• A free Mapbox API key for using the Mapbox imagery (not necessary, the esri imagery could be used instead)
• A (free) web server such as GitHub, surge.sh, others...

Upgrades - Contributions Welcome

• Create an npm package for the js dependencies
• Convert from L.TileLayer.Canvas to L.GridLayer to be compatible with Leaflet 1.0
• Make a Jekyll option for using vector tiles styled in Mapbox
• Create a function to automatically split the index field and push all the index 'fields' to the popup or the sidebar
• Add an option to add/remove more/other tools to/from the toolbar
• Convert the toolbar from using leaflet-top leaflet-left to a new customized leaflet control
• Documentation on the various options in geojson-vt and the drawing on canvas function
• Add real support for multiple field search - possibly using fuse or typehead (like Leaflet Bootstrap)

Issues

• ~~Past zoom level 18 the parcels disappear - this is an upstream issue with geojson-vt~~ Fixed 04/2016 - The default maxZoom for L.tileLayer.canvas (and L.tileLayer) is 18. In the L.CanvasTiles.js this has been changed to 22.
• Pinch and zoom on touch devices causes strange behavior so it is disabled, use the zoom buttons (behind the sidebar) instead
• Zoom animations have been limited to 2 zoom levels for better performance

Thanks

This app relies on a variety of plugins, but most importantly on the work of mourner, Sumbera, Stephano Cudini and Matthew Bloch.

This app is powered by Jekyll.