Michael Lippmann, Blue Raster
Start-to-Finish Development of Suitability
Applications Using Image Server, D3.js, and
Knock...
Pattern: Online Mapping Applications
• Focused Applications
• Curated map
experience
• Mobile apps
• Open Data APIs
• Near...
• Determine locations with
necessary qualities for a
specific purpose.
• Ability to consume and
customize analysis via
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
corres...
Suitability Server-side Setup
• Preprocessing Data
– Optimizing data for ArcGIS
Server.
• Create Image Service
– Raster fu...
Preprocessing with Arcpy
SDR
Preprocessing with Arcpy
arcpy.Describe(raster)
– Raster Format
– NoData Value
– Mean Cell Height / Width (resolution)
– P...
Preprocessing using Arcpy
arcpy.Reclassify(raster)
– Convert Floats to Integers
– Remove Irrelevant Values
– Read Document...
Preprocessing using Arcpy
arcpy.Resample(raster)
– Create Common Resolution
– Align Raster Pixels
– Create Common Extent
–...
Preprocessing using Arcpy
Additional Helper Functions
• arcpy.CreateFileFDB
– Read Documentation
• arcpy.CreateMosaicDatas...
Create Raster Function Chains
Overview- Client Side Workflow
Request/Receive Image
Server Data
Add to KO View Model
UI automatic refresh
with KO Data Bi...
Requesting Image Service Data
Use Image Service Raster Functions to:
- Update Mosaic Rendering
- Get Raster Statistics
- E...
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 directly
every time the User changes sui...
MVVM Design Pattern
Separate:
Data Model - Presentation
Stored DataCode
representation of
data and
operations on UI
User I...
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...
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
mobi...
Resource to Check Out
http://knockoutjs.com/
http://www.esri.com/software/arcgis/arcgisserver/ex
tensions/image-extension
...
Q & A
Portfolio available at blueraster.com/blog
@aspacebarnash
@brendancol
@rwinter85
Alicia Barnash
Brendan Collins
Robe...
Total Knockout: Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js
Total Knockout: Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js
Upcoming SlideShare
Loading in …5
×

Total Knockout: Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js

1,383 views
1,174 views

Published on

2014 Esri International Developer Summit User Presentation

Learn strategies for developing cross-platform suitability analysis applications using ArcGIS Image Server D3 and Knockout.
Round 1: Suitability Web Services, automating raster pre-processing and mosaic creation, creating custom raster functions, publishing and consuming image services
Round 2: Visualization, calculating statistics for user drawn polygons, displaying results using D3, creating map and raster data export
Round 3: Building the App, building suitability user interfaces in JavaScript, mobile development strategies, managing data using Knockout

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,383
On SlideShare
0
From Embeds
0
Number of Embeds
562
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Discuss different types of input
  • Model-View-View Model (MVVM) is a design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts:A model: your application’s stored data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using KO, you will usually make Ajax calls to some server-side code to read and write this stored model data.A view model: a pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items.Note that this is not the UI itself: it doesn’t have any concept of buttons or display styles. It’s not the persisted data model either - it holds the unsaved data the user is working with. When using KO, your view models are pure JavaScript objects that hold no knowledge of HTML. Keeping the view model abstract in this way lets it stay simple, so you can manage more sophisticated behaviors without getting lost.A view: a visible, interactive UI representing the state of the view model. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.When using KO, your view is simply your HTML document with declarative bindings to link it to the view model. Alternatively, you can use templates that generate HTML using data from your view model.
  • Talk about Observables
  • Total Knockout: Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js

    1. 1. Michael Lippmann, Blue Raster Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js Alicia Barnash Brendan Collins Robert Winterbottom
    2. 2. Pattern: Online Mapping Applications • Focused Applications • Curated map experience • Mobile apps • Open Data APIs • Near real time data
    3. 3. • 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
    4. 4. Elevation
    5. 5. Landcover
    6. 6. Peat Soil Depth
    7. 7. Rainfall
    8. 8. Slope
    9. 9. Euclidean Distance from Conservation Areas
    10. 10. Soil Type
    11. 11. Soil Acidity
    12. 12. Soil Depth
    13. 13. Raster-based Suitability Analysis for the Web • User provides thresholds for various criteria • Each variable has a corresponding layer within Image Service.
    14. 14. Suitability Server-side Setup • Preprocessing Data – Optimizing data for ArcGIS Server. • Create Image Service – Raster functions replace custom server development.
    15. 15. Preprocessing with Arcpy SDR
    16. 16. Preprocessing with Arcpy arcpy.Describe(raster) – Raster Format – NoData Value – Mean Cell Height / Width (resolution) – Pixel Type – Spatial Reference – Read Documentation SDR
    17. 17. Preprocessing using Arcpy arcpy.Reclassify(raster) – Convert Floats to Integers – Remove Irrelevant Values – Read Documentation SDR
    18. 18. Preprocessing using Arcpy arcpy.Resample(raster) – Create Common Resolution – Align Raster Pixels – Create Common Extent – Read Documentation SDR
    19. 19. Preprocessing using Arcpy Additional Helper Functions • arcpy.CreateFileFDB – Read Documentation • arcpy.CreateMosaicDataset – Read Documentation • arcpy.AddRastersToMosaicDataset – Read Documentation • arcpy.EditRasterFunction – Read Documentation
    20. 20. Create Raster Function Chains
    21. 21. 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>
    22. 22. Requesting Image Service Data Use Image Service Raster Functions to: - Update Mosaic Rendering - Get Raster Statistics - Export Images based on User selected settings
    23. 23. Requesting Image Service Data
    24. 24. Requesting Image Service Data /exportImage? /computeHistograms?
    25. 25. Add Image Service data to View Model
    26. 26. Knockout JS Library Advantage: No need to write code/event handlers to update DOM directly every time the User changes suitability settings. Write Less Code
    27. 27. MVVM Design Pattern Separate: Data Model - Presentation Stored DataCode representation of data and operations on UI User Interface
    28. 28. Initialize View Model
    29. 29. Update View Model with Image Service Data
    30. 30. Knockout Bindings • visible • text • html • foreach • attr • click • Or use for storage of particular settings.
    31. 31. Knockout: How it Works
    32. 32. Knockout: What else can we use it for?
    33. 33. Knockout: What else can we use it for?
    34. 34. 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.
    35. 35. D3 Examples
    36. 36. D3 Examples (cont.)
    37. 37. D3 & Highcharts
    38. 38. D3 & Highcharts (cont.)
    39. 39. 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
    40. 40. Resource to Check Out http://knockoutjs.com/ http://www.esri.com/software/arcgis/arcgisserver/ex tensions/image-extension http://d3js.org/ http://www.highcharts.com/
    41. 41. Q & A Portfolio available at blueraster.com/blog @aspacebarnash @brendancol @rwinter85 Alicia Barnash Brendan Collins Robert Winterbottom

    ×