2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development by Andy Gup
•
1 like•1,457 views
Join us and have fun learning how you can easily get started building JavaScript web and mobile GIS applications. We'll walk through some new quick start tools and resources that can shave off hours and even weeks of ramp-up time. There will be discussions on how to create and publish maps in minutes, as well as understanding how JavaScript and GIS services work together. Liberally sprinkled throughout the session will be lots of tips-and-tricks, and lessons learned.
Report
Share
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development by Andy Gup
- 1. GIS Kickstarter JavaScript Web and Mobile Andy Gup, Esri
- 2. Agenda How to build a map A ton of resources Mobile Web
- 3. AssumpBons Basic knowledge of JavaScript and CSS Basic knowledge of browser debugging
- 4. Who am I? Andy Gup Developer Evangelist JavaScript, Android www.andygup.net github.com/andygup agup@esri.com @agup
- 5. A basic map (ArcGIS Server, WMS, etc) <script>! require(["esri/map", "dojo/domReady!"], ! function(Map) {! map = new Map("map", {! basemap: "topo",! center: [-122.45,37.75], ! zoom: 14! });! });! </script>! ! <div id=“map”></div>! ! !
- 6. Cool Demos Flood impact map hNp://coolmaps.esri.com/#8 hNp://coolmaps.esri.com/#9 hNp://gis.yavapai.us/ElecBonPollingPlace/ pollingplace.htm hNp://gis.glendaleaz.com/MyGlendaleServices/ Default.htm
- 12. arcgis.com Create a map Add data to it Share it
- 13. ArcGIS.com Web Map <script>! require(["esri/map", "dojo/domReady!”,! “esri/arcgis/utils"],! ! function(Map,Utils) {! !Utils.createMap(”mapId","map").then(! ! ! ! !function(response) {! ! ! ! ! !map = response.map;! ! ! ! !});! });! </script>! ! <div id=“map”></div>! ! !
- 15. github.com/esri Open source 137+ repositories Feedback Version history
- 17. Many different screen sizes and pixel densiBes 1920x1080
- 18. Wait…how do I pan and zoom the map??
- 19. Portrait Landscape Mobile app – view can change!
- 20. Desktop app on smartphone
- 21. ArcGIS API for JavaScript -‐ Compact <script src="http://js.arcgis.com/3.7compact">!
- 22. JavaScript mobile framework libraries
- 23. JavaScript framework libraries Image by wikipedia
- 24. Mobile libraries help with… Views Visual Components Themes
- 25. Views Image courtesy Dojo
- 26. The view port
- 27. <meta name="viewport" content="width=device-width, ! !initial-scale=1, maximum-scale=1, user-scalable=no"/ >! Sedng the mobile view port
- 28. <meta name="viewport" content="width=device-width, ! !initial-scale=1, maximum-scale=1, user-scalable=no"/ >! Sedng the mobile view port Minimum view port Zoom level on page load Force only map to zoom
- 29. No viewport With viewport
- 30. Views <div id="mapView" dojoType="dojox.mobile.View“! style="width:100%;height:100%;">! <h1 dojoType="dojox.mobile.Heading" ! back="Back" moveTo="mainView">! 5 + 10 minute Drive Times! </h1>! <div id="map“ style="width:100%; height:100%;“/>! </div>!
- 31. Visual Components !! ! <div dojoType="dojox.charting.widget.Chart2D" ! !theme="dojox.charting.themes.Claro" id="viewsChart" ! !style="width: 550px; height: 550px;">! ! <!-- Pie Chart: add the plot -->! <div class="plot" name="default" type="Pie" ! !radius="200" fontColor="#000" labelOffset="-20"></div>! ! <!-- pieData is the data source -->! <div class="series" name="Last Week's Visits" ! array="chartData">! </div>! ! </div>! !
- 32. Themes ! ! <!--Legend Dialog--> <div data-role="dialog" id="legendDialog" ! data-theme="f"> <div data-role="header"> <h1>Legend</h1> </div> <div data-role="content" > <div id="legendDiv"></div> </div> </div>! !
- 33. Other types of styling &
- 34. CSS3 Media Queries Target devices by screen width Apply styles by device orientaEon Target high density screens such as iPhone 5 ! @media screen and (min-device-width:768px) and (max-device-width:1024px) {! /* styles go here */! }! @media (orientation: landscape) { /* styles go here */ }! @media screen and (device-aspect-ration: 40/71) { /* high resolution device styles go here */ }!
- 35. Phone ProperBes via JavaScript Verify orientaEon Detect user agent Browser sniffing ! isPortrait = window.matchMedia("(orientation: portrait)").matches; // is the user on an iPad or iPhone isiPad = navigator.userAgent.match(/iPad/i); isiPhone = navigator.userAgent.match(/iPhone/i); // check if the browser is IE if (dojo.has("ie")) { // IE specific code } else { // non-IE specific code }
- 36. Responsive frameworks help with… Layout AND… Visual Components Themes
- 37. Responsive Frameworks…(parBal list) Boostrap Frameless FoundaEon 4 Skeleton Less+ Wirefy Susy HTML5 Boilerplate
- 38. Header Legend Map 1024 x 768
- 39. Header Legend Map 1024 x 768
- 41. Header Legend Map Header Map Legend ScrollDown
- 42. Understanding browsers !== !==
- 43. caniuse.com
- 44. Feature detecBon paNern useLocalStorage = supports_local_storage(); function supports_local_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch( e ){ return false; } } function doSomething() { if(useLocalStorage == true){ //write to local storage } else { //degrade gracefully } }
- 45. Test on different devices
- 46. Developer resources Arcgis.com hNp://github.com/esri hNp://developers.arcgis.com
- 47. QuesBons? Andy Gup Developer Evangelist www.andygup.net github.com/andygup agup@esri.com @agup