GIS	
  Kickstarter	
  
JavaScript	
  Web	
  and	
  Mobile	
  
Andy	
  Gup,	
  Esri	
  
Agenda	
  
How	
  to	
  build	
  a	
  map	
  
A	
  ton	
  of	
  resources	
  
Mobile	
  Web	
  
	
  
AssumpBons	
  
Basic	
  knowledge	
  of	
  JavaScript	
  and	
  CSS	
  
Basic	
  knowledge	
  of	
  browser	
  debugging	
...
Who	
  am	
  I?	
  
Andy	
  Gup	
  	
  
Developer	
  Evangelist	
  
JavaScript,	
  Android	
  
	
  
	
  
www.andygup.net	
...
A	
  basic	
  map	
  (ArcGIS	
  Server,	
  WMS,	
  etc)	
  
<script>!
require(["esri/map", "dojo/domReady!"], !
function(M...
Cool	
  Demos	
  
Flood	
  impact	
  map	
  
hNp://coolmaps.esri.com/#8	
  
hNp://coolmaps.esri.com/#9	
  
hNp://gis.yavap...
hNp://gis.yavapai.us/ElecBonPollingPlace/pollingplace.htm	
  	
  
hNp://gis.glendaleaz.com/MyGlendaleServices/Default.htm	
  	
  
arcgis.com	
  
	
  
Create	
  a	
  map	
  
Add	
  data	
  to	
  it	
  
Share	
  it	
  
	
  
ArcGIS.com	
  Web	
  Map	
  
<script>!
require(["esri/map", "dojo/domReady!”,!
“esri/arcgis/utils"],!
!
function(Map,Utils...
developers.arcgis.com	
  
github.com/esri	
  
Open	
  source	
  
137+	
  repositories	
  
Feedback	
  
Version	
  history	
  
JavaScript	
  for	
  Mobile	
  
Many	
  different	
  screen	
  sizes	
  and	
  pixel	
  densiBes	
  
1920x1080	
  
Wait…how	
  do	
  I	
  pan	
  and	
  zoom	
  the	
  map??	
  
Portrait	
   Landscape	
  
Mobile	
  app	
  –	
  view	
  can	
  change!	
  
Desktop	
  app	
  on	
  smartphone	
  
ArcGIS	
  API	
  for	
  JavaScript	
  -­‐	
  Compact	
  
<script src="http://js.arcgis.com/3.7compact">!
JavaScript	
  mobile	
  framework	
  libraries	
  
JavaScript	
  framework	
  libraries	
  
Image	
  by	
  wikipedia	
  
Mobile	
  libraries	
  help	
  with…	
  
Views	
  
	
  
	
  
Visual	
  Components	
  
	
  
	
  
Themes	
  
	
  
Views	
  
Image	
  courtesy	
  Dojo	
  	
  
The	
  view	
  port	
  
<meta name="viewport" content="width=device-width, !
!initial-scale=1, maximum-scale=1, user-scalable=no"/
>!
Sedng	
  the...
<meta name="viewport" content="width=device-width, !
!initial-scale=1, maximum-scale=1, user-scalable=no"/
>!
Sedng	
  the...
No	
  viewport	
   With	
  viewport	
  
Views	
  
<div id="mapView" dojoType="dojox.mobile.View“!
style="width:100%;height:100%;">!
<h1 dojoType="dojox.mobile.Hea...
Visual	
  Components	
  
!!
!
<div dojoType="dojox.charting.widget.Chart2D" !
!theme="dojox.charting.themes.Claro" id="vie...
Themes	
  
!
!
  <!--Legend Dialog-->

  <div data-role="dialog" id="legendDialog"  !
data-theme="f">

    <div data-role=...
Other	
  types	
  of	
  styling	
  
&	
  
CSS3	
  Media	
  Queries	
  
Target	
  devices	
  by	
  screen	
  width	
  
Apply	
  styles	
  by	
  device	
  orientaEon	...
Phone	
  ProperBes	
  via	
  JavaScript	
  
Verify	
  orientaEon	
  
Detect	
  user	
  agent	
  
Browser	
  sniffing	
  
!
i...
Responsive	
  frameworks	
  help	
  with…	
  
	
  
Layout	
  	
  
	
  
	
  	
  	
  	
  AND…	
  
	
  
	
  	
  	
  	
  
	
  ...
Responsive	
  Frameworks…(parBal	
  list)	
  
Boostrap	
  
Frameless	
  
FoundaEon	
  4	
  
Skeleton	
  
Less+	
  
Wirefy	...
Header	
  
Legend	
   Map	
  
1024	
  x	
  768	
  
Header	
  
Legend	
   Map	
  
1024	
  x	
  768	
  
Header	
  
Lege
nd	
  
Map	
  
Header	
  
Legend	
   Map	
  
Header	
  
Map	
  
	
  
	
  
	
  
Legend	
  
ScrollDown
Understanding	
  browsers	
  
!==	
   !==	
  
caniuse.com	
  
Feature	
  detecBon	
  paNern	
  
useLocalStorage = supports_local_storage();
function supports_local_storage() {
try {
re...
Test	
  on	
  different	
  devices	
  
Developer	
  resources	
  
Arcgis.com	
  
hNp://github.com/esri	
  	
  
hNp://developers.arcgis.com	
  
QuesBons?	
  
Andy	
  Gup	
  	
  
Developer	
  Evangelist	
  
	
  
www.andygup.net	
  
github.com/andygup	
  	
  	
  	
  
...
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development by Andy Gup
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development by Andy Gup
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development by Andy Gup
Upcoming SlideShare
Loading in …5
×

2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development by Andy Gup

1,249 views

Published on

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.

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

No Downloads
Views
Total views
1,249
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development by Andy Gup

  1. 1. GIS  Kickstarter   JavaScript  Web  and  Mobile   Andy  Gup,  Esri  
  2. 2. Agenda   How  to  build  a  map   A  ton  of  resources   Mobile  Web    
  3. 3. AssumpBons   Basic  knowledge  of  JavaScript  and  CSS   Basic  knowledge  of  browser  debugging      
  4. 4. Who  am  I?   Andy  Gup     Developer  Evangelist   JavaScript,  Android       www.andygup.net   github.com/andygup         agup@esri.com   @agup    
  5. 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. 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      
  7. 7. hNp://gis.yavapai.us/ElecBonPollingPlace/pollingplace.htm    
  8. 8. hNp://gis.glendaleaz.com/MyGlendaleServices/Default.htm    
  9. 9. arcgis.com     Create  a  map   Add  data  to  it   Share  it    
  10. 10. 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>! ! !
  11. 11. developers.arcgis.com  
  12. 12. github.com/esri   Open  source   137+  repositories   Feedback   Version  history  
  13. 13. JavaScript  for  Mobile  
  14. 14. Many  different  screen  sizes  and  pixel  densiBes   1920x1080  
  15. 15. Wait…how  do  I  pan  and  zoom  the  map??  
  16. 16. Portrait   Landscape   Mobile  app  –  view  can  change!  
  17. 17. Desktop  app  on  smartphone  
  18. 18. ArcGIS  API  for  JavaScript  -­‐  Compact   <script src="http://js.arcgis.com/3.7compact">!
  19. 19. JavaScript  mobile  framework  libraries  
  20. 20. JavaScript  framework  libraries   Image  by  wikipedia  
  21. 21. Mobile  libraries  help  with…   Views       Visual  Components       Themes    
  22. 22. Views   Image  courtesy  Dojo    
  23. 23. The  view  port  
  24. 24. <meta name="viewport" content="width=device-width, ! !initial-scale=1, maximum-scale=1, user-scalable=no"/ >! Sedng  the  mobile  view  port  
  25. 25. <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  
  26. 26. No  viewport   With  viewport  
  27. 27. 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>!
  28. 28. 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>! !
  29. 29. 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>! !
  30. 30. Other  types  of  styling   &  
  31. 31. 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 */
 }!
  32. 32. 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 }
  33. 33. Responsive  frameworks  help  with…     Layout              AND…                    Visual  Components              Themes      
  34. 34. Responsive  Frameworks…(parBal  list)   Boostrap   Frameless   FoundaEon  4   Skeleton   Less+   Wirefy   Susy   HTML5  Boilerplate  
  35. 35. Header   Legend   Map   1024  x  768  
  36. 36. Header   Legend   Map   1024  x  768  
  37. 37. Header   Lege nd   Map  
  38. 38. Header   Legend   Map   Header   Map         Legend   ScrollDown
  39. 39. Understanding  browsers   !==   !==  
  40. 40. caniuse.com  
  41. 41. 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 } }
  42. 42. Test  on  different  devices  
  43. 43. Developer  resources   Arcgis.com   hNp://github.com/esri     hNp://developers.arcgis.com  
  44. 44. QuesBons?   Andy  Gup     Developer  Evangelist     www.andygup.net   github.com/andygup         agup@esri.com   @agup    

×