How to use the lot map viewer

The viewer turns a GeoJSON file of lots into an interactive satellite map with a lot list, availability counts, status colors, and 3D view. You don't install anything. You point the viewer at your file with a web address.

Open the sample mapJump to parameters

Quick start

1. Put your GeoJSON file somewhere on the web that allows other sites to load it (see Hosting your file).
2. Add its address after ?geojson=:

   https://maps.designspokane.com/?geojson=https://your-site.com/lots.geojson

3. Open that link. The map zooms to your lots automatically.

To add more options, join them with &:

https://maps.designspokane.com/?geojson=https://your-site.com/lots.geojson&title=Woodman%20Subdivision&brand=Acme%20Homes&basemap=streets

Query string parameters

Only geojson is required. Parameter names are lowercase.

Examples

A basic map

https://maps.designspokane.com/?geojson=https://lotmap-samples.vercel.app/woodman.geojson

Custom title and branding

https://maps.designspokane.com/?geojson=https://lotmap-samples.vercel.app/woodman.geojson&title=Woodman%20Subdivision&brand=Design%20Spokane&subtitle=Hayden%2C%20Idaho

Street map background

https://maps.designspokane.com/?geojson=https://lotmap-samples.vercel.app/woodman.geojson&basemap=streets

Embedding on your own website

Paste this into your web page. It shows the map without the side panel.

<iframe
  src="https://maps.designspokane.com/?geojson=https://your-site.com/lots.geojson&sidebar=0"
  width="100%" height="600" style="border:0" loading="lazy"
  title="Lot map"></iframe>

Using the map

• Lot list. The side panel lists every lot with its size, block, and status. Click a lot to zoom to it and open its details.
• All and Available tabs. These switch between showing every lot and only the available ones. The counts at the top update from your data.
• Click a lot on the map to see its size in square feet and acres, its block, and its status.
• 3D button. This tilts the map for a 3D view or flattens it to a top-down view.
• SAT button. This switches between satellite imagery and a street map.
• Zoom buttons are in the bottom-right corner. On a phone, pinch to zoom, and drag with two fingers to tilt.
• Hide list (on small screens) collapses the side panel to give the map more room.

Preparing your GeoJSON

The file should be a standard GeoJSON FeatureCollection with longitude and latitude coordinates (WGS 84, the default for GeoJSON). Each lot is a Polygon or MultiPolygon feature. The viewer shows your shapes exactly as drawn and never changes the geometry.

Lot properties the viewer reads

None of these are strictly required, but the more you include, the better the list and popups look. Common alternate names are accepted.

Status values and colors

Status is not case-sensitive. Any other value is shown as written with the available color.

Streets and the subdivision boundary

Streets and boundaries are drawn differently from lots and are left out of the lot list and counts.

• Streets. Set lot to street, or set feature_type, layer, type, or kind to road, street, roadway, row, or right-of-way. They're drawn as gray dashed areas, labeled with their name or label.
• Boundary. Set lot to boundary, or one of those same type fields to boundary. It's drawn as a yellow outline.

Example feature

{
  "type": "FeatureCollection",
  "name": "woodman_subdivision",
  "features": [
    {
      "type": "Feature",
      "properties": { "block": 25, "lot": 3, "status": "available", "acres": 0.21, "sqft": 9150 },
      "geometry": { "type": "Polygon", "coordinates": [[[-116.7801, 47.7869], [-116.7797, 47.7869], [-116.7797, 47.7866], [-116.7801, 47.7866], [-116.7801, 47.7869]]] }
    },
    {
      "type": "Feature",
      "properties": { "feature_type": "street", "name": "Burdock Loop" },
      "geometry": { "type": "Polygon", "coordinates": [[[-116.7802, 47.7866], [-116.7796, 47.7866], [-116.7796, 47.7865], [-116.7802, 47.7865], [-116.7802, 47.7866]]] }
    }
  ]
}

Hosting your file

The browser loads your GeoJSON directly, so the server hosting it has to allow cross-site loading (this is called CORS). The server must send the header Access-Control-Allow-Origin: *, or allow https://maps.designspokane.com specifically. Options that work:

• GitHub. Put the file in a public repository and use its "Raw" address (raw.githubusercontent.com/...), or use a public Gist's raw link.
• Cloud storage such as Amazon S3, Google Cloud Storage, or Azure Blob, with a CORS rule added to the bucket.
• Your own website or a static host like Vercel or Netlify, with the header above added.

Links to Google Drive, Dropbox, and OneDrive usually don't work, because they open a download page instead of the file itself. Changes to the file show up the next time someone opens or reloads the map, so you can update lot statuses by editing the file.

Troubleshooting