Michael Lippmann, Blue Raster
Total Knockout:
Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js
Alicia BarnashBrendan CollinsRobert Winterbottom
Pattern: Online Mapping Applications
• Focused Applications
• Curated map experience
• Mobile apps• Open Data APIs• Near real time data
• Determine locations with necessary qualities for a specific purpose.
• Ability to consume and customize analysis via web-connected devices.
Raster-based Suitability Analysis for the Web
Elevation
Landcover
Peat Soil Depth
Rainfall
Slope
Euclidean Distance from Conservation Areas
Soil Type
Soil Acidity
Soil Depth
Raster-based Suitability Analysis for the Web
• User provides thresholds for various criteria
• Each variable has a corresponding layer within Image Service.
Suitability Server-side Setup
• Preprocessing Data– Optimizing data for
ArcGIS Server.
• Create Image Service– Raster functions
replace custom server development.
Preprocessing with Arcpy
arcpy.Describe(raster)
– Raster Format– NoData Value–Mean Cell Height / Width (resolution)– Pixel Type– Spatial Reference– Read Documentation
SDR
Preprocessing using Arcpy
arcpy.Reclassify(raster)
– Convert Floats to Integers– Remove Irrelevant Values– Read Documentation
SDR
Preprocessing using Arcpy
arcpy.Resample(raster)
– Create Common Resolution– Align Raster Pixels– Create Common Extent– Read Documentation
SDR
Preprocessing using Arcpy
Additional Helper Functions
• arcpy.CreateFileFDB– Read Documentation
• arcpy.CreateMosaicDataset– Read Documentation
• arcpy.AddRastersToMosaicDataset– Read Documentation
• arcpy.EditRasterFunction– Read Documentation
Create Raster Function Chains
Overview- Client Side Workflow
Request/Receive Image Server Data
Add to KO View Model
UI automatic refresh with KO Data Binding
function Callback(response){…return(data);
}
ViewModel.histograms(data);
<div class = “dataTitle” data-bind = “text:imageData().title”>…</div>
Requesting Image Service Data
Use Image Service Raster Functions to:- Update Mosaic Rendering- Get Raster Statistics- Export Images
based on User selected settings
Requesting Image Service Data
Requesting Image Service Data
/exportImage?/computeHistograms?
Add Image Service data to View Model
Knockout JS Library
Advantage: No need to write code/event handlers to update DOM directlyevery time the User changes suitability settings.Write Less Code
MVVM Design Pattern
Separate: Data Model - Presentation
Stored DataCode representation of data and operations on UI
User Interface
Initialize View Model
Update View Model with Image Service Data
Knockout Bindings
• visible• text• html• foreach• attr• click• Or use for storage
of particular settings.
Knockout: How it Works
Knockout: What else can we use it for?
Knockout: What else can we use it for?
Data Visualization with D3 and Highcharts
• D3 is a fantastic data visualization library, not a charting library.
• D3 has the ability to create some really beautiful visualizations.
• Highcharts is a simple plug and play charting library.
D3 Examples
D3 Examples (cont.)
D3 & Highcharts
D3 & Highcharts (cont.)
Thinking Mobile
• Mobile is changing the game and cannot be ignored.
• Develop an application using JavaScript with a mobile friendly UI.
• Test on a real device, emulator’s, simulator’s, and resizing browser windows is not enough.
Resource to Check Out
http://knockoutjs.com/
http://www.esri.com/software/arcgis/arcgisserver/extensions/image-extension
http://d3js.org/
http://www.highcharts.com/
Q & A
Portfolio available at blueraster.com/blog
@aspacebarnash
@brendancol
@rwinter85
Alicia Barnash
Brendan Collins
Robert Winterbottom
