Download - Teaching Open Web Mapping - AutoCarto 2016
![Page 1: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/1.jpg)
Teaching Open Web MappingAutoCarto 2016
Carl M. Sack . [email protected] E. Roth . [email protected] of Wisconsin-Madison
![Page 2: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/2.jpg)
Outline
• About Geography 575 (Interactive Cartography and Geocomputing)• Technology transition (Flash to JavaScript)• 2014 Course Curriculum• Course evaluation• 2016 Curriculum Changes• Preliminary outcomes and future prospects
![Page 3: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/3.jpg)
What is a web map?
![Page 4: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/4.jpg)
The G575 web mapping technology stack...2011
![Page 5: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/5.jpg)
TopoJSON
PNG,Vector
2011 2016
The G575 web mapping technology stack...
![Page 6: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/6.jpg)
TopoJSON
PNG,Vector
2011 2016 Others…
Mapbox GL
The G575 web mapping technology stack...
Carto Builder(fmly CartoDB)
Google Maps API
![Page 7: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/7.jpg)
Geography 575 Timeline
• Spring 2012: Last teaching of Adobe Flash• Summer-Fall 2012: Web mapping technology study• Spring 2013: First teaching with JavaScript, Leaflet, and
D3• Fall 2014: Scaffolded curriculum• Spring 2016: Modularized curriculum
![Page 8: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/8.jpg)
2012 Technology Study
From Roth et al. (2014). “A Process for Keeping Pace with Web Mapping Technologies.” Cartographic Perspectives 78 (DOI 10.14714/CP78.1273)
![Page 9: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/9.jpg)
2012 Technology Study
From Roth et al. (2014). “A Process for Keeping Pace with Web Mapping Technologies.” Cartographic Perspectives 78 (DOI 10.14714/CP78.1273)
![Page 10: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/10.jpg)
2013: Let’s Try It!
(not actual students)
![Page 11: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/11.jpg)
Rethinking Our Teaching Strategy
![Page 12: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/12.jpg)
2014: A New Curriculum Sequence
Pre-Lab Lab 1 (Leaflet) Lab 2 (D3) Final ProjectWeek 0(no lab meeting)Online JavaScript Tutorial
Week 3Using Reference DocumentationOnline Forums and ExamplesSlippy Map Tile ConceptsLeaflet Basic Concepts and Methods
Week 6GitHub Concepts and Web HostingSVG Basic Elements and AttributesD3 API Reference and ExamplesD3 Core Selectors and Generator
Functions
Weeks 10-13Individualized Assistance
Week 1Text EditorsDirectory StructureHTML Basic Elements and AttributesCSS Basic Style RulesJavaScript Basic ConceptsjQuery Basic Concepts
Week 4Using Developer Tools for DebuggingCustom UI Elements and Interactions
Week 7Final Project Group SelectionD3 InteractionsD3 Geography
Week 14Final Project Completion
Week 2Data Levels and TypesGeographic CoordinatesData Language SpecificationsAJAX (Asynchronous JavaScpt and XML)
Conference Week(no lab meeting)
Week 8Workshop Final Project ProposalsIndividualized Assistance
Week 5Individualized Assistance (final week for Lab 1)
Week 9Review: TopoJSON, D3 Projections,
DebuggingIndividualized Assistance (final week for Lab 2)
![Page 13: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/13.jpg)
Student familiarity with HTML, CSS, and JavaScript prior to taking the course
Assessment: Entrance Survey
![Page 14: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/14.jpg)
Me: “[T]he attitude generally seems to be ‘I’m learning and know I’ll get beyond this’ rather than helplessness or giving up.”
Assessment: Instructor Logs & Student Feedback
Students: “I needed to break it down and solve things one at a time, not all at once.”
Some key threshold concepts:• Identifying & integrating methods from different
libraries• Integrating code from online examples• Working with data, AJAX, and the DOM
![Page 15: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/15.jpg)
Assessment: Exit Survey
• Expertise with tools: low moderate• Steady increase in learning and self-confidence
![Page 16: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/16.jpg)
G575 Lab Learning Objectives• Computational Thinking• understand the flow of execution in a computer program and
solve problems in the code.• Competence• apply Open Web Platform mapping tools successfully across a
range of mapping contexts.• Confluence• analyze how data, representation, and interaction tools
integrate across the web mapping workflow. • Confidence• evaluate one’s achievements positively and trust one’s ability
to improve at difficult web mapping tasks.
![Page 17: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/17.jpg)
CourseStart
CourseEnd
![Page 18: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/18.jpg)
CourseStart
CourseEnd
![Page 19: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/19.jpg)
2016: A Brave New (Online) World
![Page 20: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/20.jpg)
2016 Revised Topic SequenceUnit 1 Unit 2 Unit 3 Final
ProjectModule 1: Setting Up Your
WorkspaceBoilerplates and FrameworksWeb Directory SetupGitHub Setup (moved from Week 6)Assigned: JavaScript Online Tutorial
Module 4: Using Online ResourcesLeaflet Tutorials and APIUsing Online ExamplesUsing Help ForumsFinding Tilesets and Data
Module 7: D3 FoundationsD3 Selections and BlocksDataScales, Axes, Text
Group work on final projects
Module 2: Scripting and Debugging
Exploring the DOMJavaScript BasicsjQuery BasicsDebugging in the Developer Console
(moved from Weeks 4 and 9)
Module 5: Leaflet InteractionsMaking Leaflet Layers DynamicZoom, Pan, and Retrieve InteractionsSequence InteractionAdditional Interaction Operators
Module 8: Mapping in D3D3 Helpers: TopoJSON, MapShaper &
QueueD3 Projections and Path Generators
Module 3: Data and AJAXCSV, XML, and JSON formats and their
geographic variantsAJAX Concepts and SyntaxAJAX Callback Functions
Module 6: The Internal Logic of Leaflet
Object-oriented JavaScriptExtending Leaflet ObjectsUsing SVG Graphics
Module 9: Coordinated Visualizations
Dynamic Map StylingDrawing a Coordinated Visualization
Module 10: Coordinated Interactions
Dynamic Attribute SelectionTransitionsLinking Interactions Between Map and
Chart
![Page 21: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/21.jpg)
2016 Assessment(sketch)• Similar competency
outcomes• Possibly significant
improvement in AJAX• Challenging or not
depending on prior coding experience• Too ‘cookbooky’?
![Page 22: Teaching Open Web Mapping - AutoCarto 2016](https://reader035.vdocuments.us/reader035/viewer/2022070511/58a304e41a28abea508b579f/html5/thumbnails/22.jpg)
QuestionsThis slideshow: tinyurl.com/sack-autocarto-2016
Tutorials based on Geography 575–2014 lab assignments:github.com/uwcart/cartographic-perspectives
Student projects gallery:geography.wisc.edu/courses/geog575
Carl M. Sack . [email protected] E. Roth . [email protected] of Wisconsin-MadisonA portion of this research was funded by NSF Grant #1555267