Project Mapping Tool

Project Mapping Tool showing the Foster Yards demo site in Portland with distance rings and nearby place callouts

Project information

  • Category: Web app, GIS
  • Built for: Neighborly Development
  • Built with: JavaScript, Leaflet, MapLibre GL, proj4js
  • Live demo: Open the tool
Try the demo

Site maps without the GIS software

A browser-based tool for making project location maps: the site boundary, distance rings, and labeled callouts for the schools, parks, transit, and shopping nearby. Draw or import the site, add places, and export a clean PNG.

I built it for our team at Neighborly Development. A site map used to take 1 to 1.5 hours to put together; with this tool it should take about 10 to 15 minutes. It's new, so we're still measuring the actual time saved.

What it does

  • Site boundaries from anything. Draw a boundary, drop a point, search an address, or load GeoJSON, Esri JSON (ArcGIS exports), or a coordinate list. Oregon State Plane, Oregon Lambert, and UTM coordinates are converted automatically, and the tool reports the site's acreage.
  • Distance rings. Set any radii in miles; rings and place distances are measured in a straight line from the center of the site.
  • Nearby places as callouts. Add places one at a time, import a file, or paste a list straight from Excel. Icons are guessed from each place's name, and callouts can be dragged and recolored.
  • Presentation-ready output. Several basemaps and layers, road labels, a north arrow and scale bar, imagery shading so callouts stand out on satellite views, and a one-click PNG export or clean view.
  • Saved maps. Save maps in the browser, or save to a file you can back up, email, or open on another computer.

The demo includes five sample projects around Oregon. The project sites and "Fernhollow Development" are fictional; the nearby places are real.