Home

Awesome

build npm version

imagery-index

šŸ›° An index of aerial and satellite imagery useful for mapping.

Play with the data here: https://rapideditor.github.io/imagery-index/

About the index

tl;dr

To add an imagery source to the index:

šŸ‘‰ See CONTRIBUTING.md for full details about how to add an imagery source to this index.

Details

The goal of imagery-index is to collect public imagery sources useful for making maps.

This project evolved from a previous project called editor-layer-index. Thank you, editor-layer-index!

To avoid distributing redundant geojson data, imagery-index leverages several other projects:

Before: Include multiple redundant copies of a 5kb boundary of Slovakia<br/> After: "locationSet": {"include": ["sk"]}

Before: Include 67kb outline of the contiguous United States<br/> After: "locationSet": {"include": ["us"], "exclude": ["as", "um", "alaska_hawaii.geojson"]}

The space savings are significant:

ProjectSize
osmlab/editor-layer-index4.0Mb minified imagery.geojson
@rapideditor/imagery-index221kb features, 354kb sources (575kb total)

It's also much easier to contribute to and maintain the index.

What's not included (yet):

Source files

The source files for imagery-index are stored in two kinds of files:

šŸ‘‰ See CONTRIBUTING.md for full details about how to add an imagery source to this index.

Distributed Files

Several files are published under dist/. These are generated - do not edit them.

šŸ§: "Why use .json instead of .geojson as the file extension for generated GeoJSON files?"<br/> šŸ¤“: "So you can require or import them as modules into other JavaScript code if you want."<br/> šŸ§: "Can you give me an example?"<br/> šŸ¤“: "Great segue!..."<br/>

Examples

Let's create a LocationConflation instance and seed it with the featureCollection.json containing all the custom geojsons from imagery-index. We'll grab the imagery sources.json too.

const sources = require('@rapideditor/imagery-index/dist/sources.json');
const features = require('@rapideditor/imagery-index/dist/featureCollection.json');

const LocationConflation = require('@rapideditor/location-conflation');
const loco = new LocationConflation(features);

We can use these to get info about the imagery sources. A simple one might just be "include all of Croatia":

let source = sources['dgu-dof-2011'];
source.name;
//  "dgu.hr: Croatia 2011 Aerial imagery"
source.locationSet;
//  { include: [ 'hr' ] }
let feature = loco.resolveLocationSet(source.locationSet);
<img width="500px" alt="Croatia Aerial Imagery 2011" src="https://raw.githubusercontent.com/rapideditor/imagery-index/main/docs/images/croatia-2011.png"/>

But we're not limited only to country borders. For example in 2017, only portions of Croatia were imaged. The locationSet contains a custom .geojson to exclude a squarish region from the middle of the country:

let source = sources['dgu-dof-2017'];
source.name;
//  "dgu.hr: Croatia 2017 Aerial imagery"
source.locationSet;
//  {include: ['hr'], exclude: ['dgu-dof-exclude-2017.geojson']}
let feature = loco.resolveLocationSet(source.locationSet);
<img width="500px" alt="Croatia Aerial Imagery 2017" src="https://raw.githubusercontent.com/rapideditor/imagery-index/main/docs/images/croatia-2017.png"/>

In 2018, they imaged the rest of Croatia. A different .geojson file is used to exclude Croatia's outer regions:

let source = sources['dgu-dof-2018'];
source.name;
//  "dgu.hr: Croatia 2018 Aerial imagery"
source.locationSet;
//  {include: ['hr'], exclude: ['dgu-dof-exclude-2018.geojson']}
let feature = loco.resolveLocationSet(source.locationSet);
<img width="500px" alt="Croatia Aerial Imagery 2018" src="https://raw.githubusercontent.com/rapideditor/imagery-index/main/docs/images/croatia-2018.png"/>

Interactive Viewer

Try out the interactive source viewer at https://rapideditor.github.io/imagery-index/ to inspect any of the imagery sources visually and to compare them to their boundary polygons. You can also test different locationSet values to see what they look like.

The viewer itself is just a single .html page using:

The code for the is in docs/index.html.

šŸ§: "Why use iD's <img>-based slippy map code instead of adding a Mapbox GL raster layer?"<br/> šŸ˜­: "CORS is why. WebGL needs access to the pixels of an image in order to render it, and this can't happen unless the tile server has the necessary CORS header set. The good news is: if an imagery source works here, it will work in iD also."<br/>

Prerequisites

Installing

Building

For contributors:

For maintainers:

Licenses

imagery-index data files are available under the CC BY-SA 3.0. See the LICENSE.md file for more details.

imagery-index build scripts are available separately under the ISC License. See the scripts/LICENSE.md file for more details.