Embed Size (px)
DESCRIPTION
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.
Citation preview
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 github.com/andygup [email protected] @agup
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>!!!
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
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) {! !Utils.createMap(”mapId","map").then(!! ! ! !function(response) {!! ! ! ! !map = response.map;!! ! ! !});!
});!</script>!!<div id=“map”></div>!!!
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 mobile view port
<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
No viewport With viewport
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>!
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>!!
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>!!
Other types of styling
&
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 */ }!
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 }
Responsive frameworks help with…
Layout AND… Visual Components Themes
Responsive Frameworks…(parBal list)
Boostrap
Frameless
FoundaEon 4
Skeleton
Less+
Wirefy
Susy
HTML5 Boilerplate
Header
Legend Map
1024 x 768
Header
Legend Map
1024 x 768
Header
Legend
Map
Header
Legend Map
Header
Map
Legend
Scro
ll D
own
Understanding browsers
!== !==
caniuse.com
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 } }
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 [email protected] @agup
