Total Knockout: Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js
•Download as PPTX, PDF•
1 like•1,887 views
The document discusses developing suitability mapping applications using Image Server, D3.js, and Knockout.js. Raster data is preprocessed in ArcGIS Server and used to create an image service. Knockout is used to bind raster data from the image service to the view model and automatically update the UI. D3 or Highcharts can be used for data visualization. The application should be developed with a mobile-friendly interface to work across devices.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Total Knockout: Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js
Similar to Total Knockout: Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js (20)
More from Blue Raster
More from Blue Raster (20)
Recently uploaded
Recently uploaded (20)
Total Knockout: Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js
- 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. Pattern: Online Mapping Applications • Focused Applications • Curated map experience • Mobile apps • Open Data APIs • Near real time data
- 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. Elevation
- 5. Landcover
- 7. Rainfall
- 8. Slope
- 9. Euclidean Distance from Conservation Areas
- 10. Soil Type
- 11. Soil Acidity
- 12. Soil Depth
- 13. Raster-based Suitability Analysis for the Web • User provides thresholds for various criteria • Each variable has a corresponding layer within Image Service.
- 14. Suitability Server-side Setup • Preprocessing Data – Optimizing data for ArcGIS Server. • Create Image Service – Raster functions replace custom server development.
- 16. Preprocessing with Arcpy arcpy.Describe(raster) – Raster Format – NoData Value – Mean Cell Height / Width (resolution) – Pixel Type – Spatial Reference – Read Documentation SDR
- 17. Preprocessing using Arcpy arcpy.Reclassify(raster) – Convert Floats to Integers – Remove Irrelevant Values – Read Documentation SDR
- 18. Preprocessing using Arcpy arcpy.Resample(raster) – Create Common Resolution – Align Raster Pixels – Create Common Extent – Read Documentation SDR
- 19. Preprocessing using Arcpy Additional Helper Functions • arcpy.CreateFileFDB – Read Documentation • arcpy.CreateMosaicDataset – Read Documentation • arcpy.AddRastersToMosaicDataset – Read Documentation • arcpy.EditRasterFunction – Read Documentation
- 20. Create Raster Function Chains
- 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. Requesting Image Service Data Use Image Service Raster Functions to: - Update Mosaic Rendering - Get Raster Statistics - Export Images based on User selected settings
- 25. Requesting Image Service Data
- 26. Requesting Image Service Data /exportImage? /computeHistograms?
- 27. Add Image Service data to View Model
- 28. 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
- 29. MVVM Design Pattern Separate: Data Model - Presentation Stored DataCode representation of data and operations on UI User Interface
- 31. Update View Model with Image Service Data
- 32. Knockout Bindings • visible • text • html • foreach • attr • click • Or use for storage of particular settings.
- 33. Knockout: How it Works
- 34. Knockout: What else can we use it for?
- 35. Knockout: What else can we use it for?
- 36. 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.
- 37. D3 Examples
- 39. D3 & Highcharts
- 40. D3 & Highcharts (cont.)
- 41. 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
- 42. 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/
- 43. Q & A Portfolio available at blueraster.com/blog @aspacebarnash @brendancol @rwinter85 Alicia Barnash Brendan Collins Robert Winterbottom
Editor's Notes
- 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