Showing results for 
Search instead for 
Do you mean 

Launching NDVI Browser Smart M.App

by on ‎12-21-2016 08:05 AM - edited on ‎04-18-2017 05:08 AM by Technical Evangelist (5,326 Views)



This tutorial describes how to prepare and launch a sample Smart M.App - Weekly NDVI Browser. You can read the story behind this application here: Order third party content from your Smart M.App.


In this tutorial you will learn how to:

  • perform discovery of 3rd party content
  • limit the search results based on specific criteria
  • order content from 3rd party providers
  • use ordered content as input for geo-processing

All these steps are executed automatically and require minimal input by the user. The app’s goal main goal is to greatly simplify the process of visualizing changes in vegetation as time progresses. This is achieved by:

  • making it as easy as possible for users to browse satellite imager
  • limiting search results to selected areas
  • providing access to data for a set period of time in the current year, and then processing it using the Normalized Difference Vegetation Index (NDVI).

To begin with preparing the application, please follow this Bitbucket link where its 4 source files of located.


File Description
NDVI-Browser-Model.json NDVI recipe responsible for generating NDVI analysis
NDVI_Browser.js JavaScript customization
NDVI_Browser.css CSS customization
NDVI_Browser_External_Libs.txt List of external libraries


Prepare NDVI model


In order to create required model, you should go to the M.App Studio and open Spatial Workshop.




Once you are in M.App Studio, use the Import tool from the top panel and select previously downloaded NDVI-Browser-Model.json model file.




Please ensure that model name is NDVI-Browser-Model. This is very important as the application is selecting which model to use based on its name. As a final step of that section, Save the model.


Prepare NDVI Smart M.App


Go back to the M.App Studio and open Smart M.App Wizard using top menu buttons.




As a first step, please specify a name for the Smart M.App. In this tutorial we are using the name: Weekly-NDVI-Browser. Switch to the Build tab and drag&drop Map panel on the center of the workspace.




Describing how to create a map is not within the scope of this tutorial, so please create a simple map or use one of your existing ones.

Once your Map panel is configured properly continue to the Customize section.


Copy and paste customisations provided from the Bitbucket repositories. 

Do not forget to insert external libraries link to the EXT section.




Once you have completed the steps above, you can Save your Smart M.App, and you are ready see it in action.


Launch application


In order to launch the application, you can use the Preview button on the top of the Smart M.App Wizard screen or go back to M.App Studio and use the Launch button from the application list.




Now you can start using NDVI application. Here is a short description of the interface:




Numbers below refer to the sections marked with red color in the picture above.


  1. Those buttons allow you to change current location of the application.
  2. Apply filters:
    • All - shows all weeks in year 2016
    • Available - shows only the weeks with available data
    • Analyzed - shows only the already analyzed weeks
  3. Apply Cloud Cover filter - hides weeks with cloud cover percentage above selected value.
  4. Information about dataset within particular week. Also use Get Imagery to perform NDVI analysis.
  5. Weeks with no available datasets.
    • Gray color - Dataset is not available at all.
    • Blue color - Dataset's cloud cover percentage exeeds allowed value.


To generate NDVI analysis for the selected week use Get Imagery button.

After few moments you should be able to display result.




We hope that this simple tutorial describes every required step. If you have any questions, please leave your comment below.

on ‎01-18-2017 07:23 AM

Hi. I'm getting an access denied error when trying to download those files. Can you make them available elsewhere please? Thanks, Johnnie

by Technical Evangelist
on ‎01-23-2017 07:23 AM

Hi Johnnie,


In order to access source codes of the shared samples you need to sign up as a HGDN member. You can find more information in this article:



on ‎01-24-2017 02:17 AM

Hiya. We at Sterling Geo are signed up to HXDN but Clare, our POC, is on maternity leave. Can you send the bitbucket link again to me please?

on ‎01-24-2017 04:42 AM

2017-01-24 12_41_02-Error — Bitbucket.png

Sorry, I meant the bitbucket invitation link. Still getting the above otherwise. Ta.