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.

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

10. hNp://gis.yavapai.us/ElecBonPollingPlace/pollingplace.htm

11. 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>!
!
!

14. developers.arcgis.com

15. github.com/esri
Open
source
137+
repositories
Feedback
Version
history

16. JavaScript
for
Mobile

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

40. Header
Lege
nd
Map

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