Giter Club home page Giter Club logo

esri / image-change-detection-template Goto Github PK

View Code? Open in Web Editor NEW
11.0 7.0 4.0 2.04 MB

With the Image Mask configurable template, create an app to identify areas of an image that have changed over time or that meet user-set thresholds for spectral indexes (like NDVI).

License: Apache License 2.0

JavaScript 94.70% CSS 3.06% HTML 2.24%
web-development web-development-tools imagery web-application raster app-template change-detection configurable-apps

image-change-detection-template's Introduction

Image Mask

With the Image Mask configurable template, create an app to visualize change between two images in an imagery layer or to mask user-set thresholds for calculated spectral indexes, like NDVI.

Check out two example applications built with the Image Mask template: one using the Change Detection tool, the other using the Mask tool.

App

There are three configurable app templates designed for imagery: Imagery Viewer, Image Mask, and Image Visit. Explore example applications built with these templates.

Description

Image Mask is a configurable app template for identifying areas of an image that have changed over time or that meet user-set thresholds for calculated spectral indexes. The template also includes tools for measurement, recording locations, and more. App users can zoom to bookmarked areas of interest (or search for their own), select any of the imagery layers from the associated web map to analyze, use a time slider or dropdown menu to select images, then choose between the Change Detection or Mask tools to produce results.

Features

Image Mask users can do the following:

  • Zoom to bookmarked areas of interest (or bookmark their own)
  • Select specific images from a layer to visualize (search by date or another attribute)
  • Use the Change Detection tool to compare two images in a layer (see options, below)
  • Use the Mask tool to highlight areas that meet a user-set threshold for common spectral indexes (NDVI, SAVI, a burn index, and a water index). For example, highlight all the areas in an image with NDVI values above 0.25 to find vegetation.
  • Annotate imagery using editable feature layers
  • Perform image measurement on imagery layers that have mensuration capabilities
  • Export an imagery layer to the user's local machine, or as a layer in the user’s ArcGIS account

Change detection tool options

For each imagery layer, create an app that gives users one or more of the following change detection options:

  • Image Brightness (calculates the change in overall brightness)
  • Vegetation Index (NDVI) (requires red and infrared bands)
  • Soil-Adjusted Vegetation Index (SAVI) (requires red and infrared bands)
  • Water Index (requires green and short-wave infrared bands)
  • Burn Index (requires infrared and short-wave infrared bands)

For each of the indexes, users also have a choice between three types of analysis:

  • Difference Image: calculates increases and decreases for the full extent
  • Difference Mask: users can focus on significant change by setting the minimum increase or decrease to be masked—for example, a user could mask only areas where NDVI increased by at least 0.2
  • Threshold Mask: The user sets a threshold and magnitude for what is masked as change. The app will only identify change that’s above the user-set lower threshold and bigger than the user-set minimum magnitude.

Use Cases

Possible use cases include:

  • A student investigating urban expansion over time using Esri’s Multispectral Landsat image service
  • A vineyard owner using high-resolution satellite imagery to monitor changes in crop health
  • An image analyst recording burn scar extents using multispectral satellite imagery
  • An aid worker monitoring changes in drought conditions using MODIS imagery

Supported Devices

Instructions

  1. To deploy this application, download the template repo and unzip it.

  2. Copy the unzipped folder containing the web app template files, such as index.html, to your web server. You can rename the folder to change the URL through which users will access the application. By default the URL to the app will be http://<Your Web Server>/<app folder name>/index.html

  3. Change the sharing host, found in defaults.js inside the config folder for the application, to the sharing URL for ArcGIS Online or Portal. For ArcGIS Online users, keep the default value of www.arcgis.com or specify the name of your organization.

    • ArcGIS Online Example: "sharinghost": location.protocol + "//" + <your organization name>.maps.arcgis.com
    • Portal Example where arcgis is the name of the Web Adaptor: "sharinghost": location.protocol + "//" + "webadaptor.domain.com/arcgis"
  4. If you are using Portal or a local install of the ArcGIS API for JavaScript, change all references to the ArcGIS API for JavaScript in index.html to refer to your local copy of the API. Search for the references containing "//js.arcgis.com/3.21" and replace this portion of the reference with the url to your local install.

    • For example: "//webadaptor.domain.com/arcgis/jsapi/jsapi" where arcgis is the name of your Web Adaptor.
  5. Copy a group ID from Portal/ArcGIS Online and replace the default group ID in the application's default.js file. You can now run the application on your web server or configure the application further.

  6. Read instructions for making make the configurable template available through your organization.

Note: If your application edits features in a feature service, contains secure services or web maps that aren't shared publicly, or generate requests that exceed 200 characters, you may need to set up and use a proxy page. Common situations where you may exceed the URL length are using complex polygons as input to a task or specifying a spatial reference using well-known text (WKT). For details on installing and configuring a proxy page see Using the proxy. If you do not have an Internet connection, you will need to access and deploy the ArcGIS API for JavaScript documentation from developers.arcgis.com.

Requirements

Software

  • ArcGIS Online subscription or ArcGIS Portal

Data

  • Creating an app with this template requires a web map with at least one imagery layer.

Resources

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2018 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

image-change-detection-template's People

Contributors

ewindahl avatar kushu493 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

image-change-detection-template's Issues

Requested changes for configuration

@kushu493, this is a combo of requests from me and the configurable apps team. Thanks!

1. Config panel organization (to better align with existing apps):

  • Move Search to own its own tab
  • Move Enable Image Measurement to the Imagery tab
  • Create an Options tab and move the following to it:
    • About
    • Basemap Gallery
    • Scalebar
    • Bookmarks
    • Export
  • For options where only one field should be selected, change it from checkbox to drop-down to prevent more than one option being selected:
    • Imagery Layers (Image date field for each layer)
    • Change Detection - Imagery Layers (Search field for each layer)

2. Need to have default options selected:
Right now, nothing is checked on so if someone were to create the app and launch it there would be no widget available. Most apps have some default options checked.

  • Change Detection – is it possible to use these options as default?
    • Change Detection: ON
    • Default Layer: First imagery layer available
    • Display: Slider and Dropdown
    • Enable Autorefresh: ON
    • Imagery Layers: First imagery layer available ON; if AcquisitionDate field is available, select it; otherwise, select first available date field (if neither is available, select first available field)
    • Change Detection options: check ON "difference," keep the rest OFF

3. Add “Specify active tool at app startup” option to Options tab:
(Also need to remove related checkboxes from About and Change Detection)
image

4. Fix Editor tool configuration
When the Editor tool is selected and I have no editable layers, I get a message indicating I have no editable layers. The widget will still appear in the app. Would it be possible to prevent the widget from showing up in the app? Could the text indicating there are no editable layers be changed to red text?

Add app proxy widget

Apps that use a premium or subscription imagery service may not be able to be shared publicly if there is not an option to set an app proxy. Can we add this to the Options tab? @kushu493

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.