SlideShare a Scribd company logo
Building Distributed  JavaScript Map Widgets  with OpenLayers and ArcGIS Server  GIS in the Rockies 2011 Allan Glen, Dan Hauser City and County of Denver
What do we mean by ‘widget’? http://www.sxc.hu/photo/1052928
Easy to embed into an existing page… HTMLsnippet http://www.sxc.hu/photo/1281812
A Flash widget (not what we’ll be talking about…) Coming soon to a locationnear you..
An IFRAME widget (not what we’ll be talking about…)
A JavaScript widget (what we’ll be talking about…)
Use case: Local Government Website Main Website “GIS Portal” http://www.sxc.hu/photo/1114801
Mapping  Apps as Widgets ,[object Object]
 Copy/paste deployment
 Interaction between  map and page
 Embed in external   websites,[object Object]
No access to thepage head HTML snippet goes here
Bootstrap External  Resources 1 JavaScript (ex. OpenLayers, jQuery, etc.) CSS Images HTML (templates) http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg
Step 1: Bootstrapping External Resources Don’t break the page!! Avoid element IDs Use “namespaces” for JavaScript and CSS http://www.sxc.hu/photo/31845 http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg
Build Out  the DOM 2 <DIV/> http://www.sxc.hu/photo/157966
Try to Avoid This!! var div1 = document.createElement(“div”); div1.className = “iHazClass”; var div2= document.createElement(“div”); div2.className = “iHazMoreClass”; var div3= document.createElement(“div”); div3.className = “iHazDaMostClass”; div1.appendChild(“div2”); div2.appendChild(“div3”); etc.  etc.  etc.  etc. etc.
Then your web designer asks: “Hey,  can we change up this layout? No big deal, right?“ http://www.sxc.hu/photo/1327383
Recommendation: jQuery Templates ,[object Object]
 Easy to modify – just HTML
 Easy to bind with JSON objects and append to DOM$.tmpl(“Template”, features).appendTo(div) ,[object Object],[object Object]
ESRI ArcGIS ServerJavaScript API OpenLayers Google Maps Bing Maps Choosing a  JS Mapping API
Why We Chose OpenLayers ,[object Object]
 Custom build system – use only what you need
  Works great with the ArcGIS Server REST API
 Geometry (not in core but easy to add)
 Dynamic Services
 Cached Map Services
 Map service neutral, not vendor or map service       specific,[object Object]
Embed a fully interactive map in a page with a small snippet of code.  Supports address and intersection search, auto-complete, and a Google basemapmashup with points projected on the fly from the ArcGIS Server REST API. <script language="javascript"  src="http://www.denvergov.org/maps/api/js/v1?key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 590px; height: 450px;"></div> <script language="javascript"> DenverMaps.load("map", { app: “Parks" }); </script>

More Related Content

Similar to GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server

FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript WidgetsFOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
Allan Glen
 
Real-World AJAX with ASP.NET
Real-World AJAX with ASP.NETReal-World AJAX with ASP.NET
Real-World AJAX with ASP.NET
goodfriday
 
ArcGIS API for Javascript Tutorial
ArcGIS API for Javascript TutorialArcGIS API for Javascript Tutorial
ArcGIS API for Javascript Tutorial
Mohammed Mahmoud
 
Technology Of The Geospatial Web Nov3
Technology Of The Geospatial Web Nov3Technology Of The Geospatial Web Nov3
Technology Of The Geospatial Web Nov3Michael Maclennan
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile Widgets
Jose Palazon
 
How data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield HeroesHow data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield Heroes
Electronic Arts / DICE
 
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
Chris Toohey
 
Web enabling your survey business ppt version
Web enabling your survey business ppt versionWeb enabling your survey business ppt version
Web enabling your survey business ppt versionrudy_stricklan
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
Eliran Eliassy
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
EDINA, University of Edinburgh
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.
agup2009
 
ESRI Developer Summit 2008 - Microsoft Virtual Earth
ESRI Developer Summit 2008 - Microsoft Virtual EarthESRI Developer Summit 2008 - Microsoft Virtual Earth
ESRI Developer Summit 2008 - Microsoft Virtual Earth
Chris Pendleton
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCJim Tochterman
 
GWT
GWTGWT
GWT
yuvalb
 

Similar to GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server (20)

FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript WidgetsFOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
 
Intro To Google Maps
Intro To Google MapsIntro To Google Maps
Intro To Google Maps
 
Real-World AJAX with ASP.NET
Real-World AJAX with ASP.NETReal-World AJAX with ASP.NET
Real-World AJAX with ASP.NET
 
ArcGIS API for Javascript Tutorial
ArcGIS API for Javascript TutorialArcGIS API for Javascript Tutorial
ArcGIS API for Javascript Tutorial
 
Technology Of The Geospatial Web Nov3
Technology Of The Geospatial Web Nov3Technology Of The Geospatial Web Nov3
Technology Of The Geospatial Web Nov3
 
Google maps
Google mapsGoogle maps
Google maps
 
Google maps
Google mapsGoogle maps
Google maps
 
BluePrint Mobile Framework
BluePrint Mobile FrameworkBluePrint Mobile Framework
BluePrint Mobile Framework
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile Widgets
 
How data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield HeroesHow data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield Heroes
 
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
 
Tools Of The Geospatial Web
Tools Of The Geospatial WebTools Of The Geospatial Web
Tools Of The Geospatial Web
 
Web enabling your survey business ppt version
Web enabling your survey business ppt versionWeb enabling your survey business ppt version
Web enabling your survey business ppt version
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.
 
ESRI Developer Summit 2008 - Microsoft Virtual Earth
ESRI Developer Summit 2008 - Microsoft Virtual EarthESRI Developer Summit 2008 - Microsoft Virtual Earth
ESRI Developer Summit 2008 - Microsoft Virtual Earth
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
 
GWT
GWTGWT
GWT
 
Presentation wpf
Presentation wpfPresentation wpf
Presentation wpf
 

Recently uploaded

UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
UiPathCommunity
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
Globus
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
UiPathCommunity
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
RinaMondal9
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 

Recently uploaded (20)

UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 

GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server

  • 1. Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server GIS in the Rockies 2011 Allan Glen, Dan Hauser City and County of Denver
  • 2. What do we mean by ‘widget’? http://www.sxc.hu/photo/1052928
  • 3. Easy to embed into an existing page… HTMLsnippet http://www.sxc.hu/photo/1281812
  • 4. A Flash widget (not what we’ll be talking about…) Coming soon to a locationnear you..
  • 5. An IFRAME widget (not what we’ll be talking about…)
  • 6. A JavaScript widget (what we’ll be talking about…)
  • 7. Use case: Local Government Website Main Website “GIS Portal” http://www.sxc.hu/photo/1114801
  • 8.
  • 10. Interaction between map and page
  • 11.
  • 12. No access to thepage head HTML snippet goes here
  • 13. Bootstrap External Resources 1 JavaScript (ex. OpenLayers, jQuery, etc.) CSS Images HTML (templates) http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg
  • 14. Step 1: Bootstrapping External Resources Don’t break the page!! Avoid element IDs Use “namespaces” for JavaScript and CSS http://www.sxc.hu/photo/31845 http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg
  • 15. Build Out the DOM 2 <DIV/> http://www.sxc.hu/photo/157966
  • 16. Try to Avoid This!! var div1 = document.createElement(“div”); div1.className = “iHazClass”; var div2= document.createElement(“div”); div2.className = “iHazMoreClass”; var div3= document.createElement(“div”); div3.className = “iHazDaMostClass”; div1.appendChild(“div2”); div2.appendChild(“div3”); etc. etc. etc. etc. etc.
  • 17. Then your web designer asks: “Hey, can we change up this layout? No big deal, right?“ http://www.sxc.hu/photo/1327383
  • 18.
  • 19. Easy to modify – just HTML
  • 20.
  • 21. ESRI ArcGIS ServerJavaScript API OpenLayers Google Maps Bing Maps Choosing a JS Mapping API
  • 22.
  • 23. Custom build system – use only what you need
  • 24. Works great with the ArcGIS Server REST API
  • 25. Geometry (not in core but easy to add)
  • 27. Cached Map Services
  • 28.
  • 29. Embed a fully interactive map in a page with a small snippet of code. Supports address and intersection search, auto-complete, and a Google basemapmashup with points projected on the fly from the ArcGIS Server REST API. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1?key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 590px; height: 450px;"></div> <script language="javascript"> DenverMaps.load("map", { app: “Parks" }); </script>
  • 30. Easily embed a complete mapping app in the appropriate page. Adjust the size to fit the page layout and a fully functioning map is provided. No modifications to the page head are required.. just paste and publish. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1?key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 675px; height: 600px;"></div> <script language="javascript"> DenverMaps.load("map", { app: "VoteCenters" }); </script>
  • 31. Want a Spanish version of the map? Just pass in a parameter specifying the language and apps that have been globalized will be presented in that language. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1?key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 675px; height: 600px;"></div> <script language="javascript"> DenverMaps.load("map", { app: "VoteCenters“, language: “es” }); </script>
  • 32. A mockup showing how JavaScript map widgets can be used to provide full interactivity with a host page. In this example, the page can ask the app for the coordinates of the marker, allowing the map to be completely integrated with the page, even if delivered from a different host. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1? key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 300px; height: 300px;"></div> <script language="javascript"> var map; DenverMaps.load("map", { app: “Denver311“}, function(instance) { map = instance; }); function getCoordinates() { return map.app.getCoordinates(); } </script>
  • 33. A mockup showing how JavaScript map widgets can be used to provide full interactivity with a host page. In this example, the page can ask the app for the coordinates of the marker, allowing the map to be completely integrated with the page, even if delivered from a different host. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1? key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 300px; height: 300px;"></div> <script language="javascript"> var map; DenverMaps.load("map", { app: “Denver311“}, function(instance) { map = instance; }); function getCoordinates() { return map.app.getCoordinates(); } </script>
  • 34. Asynchronous loading of resources prevents blocking of the page during bootstrapping.
  • 35. Using namespacing with Javascript object notation prevents the widget script methods from interfering with Javascript methods from the hosting page. It does require that a fully qualified name be utilized to call methods from the application script.
  • 36. JQuery Templates allow us to use class names as unique identifiers instead of Ids. JQuery selectors give quick and easy access to the DOM elements by classname. Also JQuery Templates can be pre-formatted to accept a JSONP response.
  • 37. Using JSONP avoids the same-origin policy for cross domain communications.

Editor's Notes

  1. Today we’re going to talking about some techniques for distributing mapping applications as JavaScript widgets.
  2. By widget we mean the that the functionality is self-contained…
  3. ..and that the widget can be easily embedded in an existing web page with just a small snippet of HTML.So this is very different from the normal approach with an API like Google Maps, the ESRI JavaScript API, or Open Layers where you actually build the mapping application into the page.. With a widget we’re providing the entire mapping app from another location and then allowing the result to be easily embedded into any page. The page doesn’t care about the mapping API we’re using..
  4. So you’ve seen the widget concept before.. Here is an example from Vimeo that provides snippet to embed a flash object.
  5. Here is another example from YouTube that uses an IFRAME to embed a video.
  6. And here is another example from Twitter. This is a JavaScript widget which is the technique that we will be talking about.So why would you want to do this with maps?
  7. Here is a common use case which is also our use case.
  8. Examples, in case demo doesn’t work.
  9. Examples, in case demo doesn’t work.
  10. Examples, in case demo doesn’t work.
  11. Examples, in case demo doesn’t work.
  12. Examples, in case demo doesn’t work.
  13. Examples, in case demo doesn’t work.
  14. Examples, in case demo doesn’t work.
  15. Examples, in case demo doesn’t work.
  16. Examples, in case demo doesn’t work.