GIS Kickstarter JavaScript Web and Mobile Andy Gup, Esri
Dec 05, 2014
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