Session on how to build a complete mobile-cloud solution using ArcGIS mobile APIs and an ArcGIS Online Subscription. How to monetize your solution too! By Allan Laframboise, Esri

1. Building a Mobile, Cloud,
Check-in App in 75 Minutes
-
Zero to Hero
alaframboise@esri.com | @AL_Laframboise
dmartinez@esri.com | @ DMDevDude
Esri Developer Network

2. Dev Meet Ups
www.esri.com/devmeetups

3. Esri = “ezri”

4. GIS
Geospatial platform… solve location-based problems.

5. Modeling with layers…
Geospatial Sandwich

6. Basics
Point Line Polygon
place street parcel
Features

7. The “arc”
Start
Direction
End
Intelligent Feature

8. “Arc”GIS
Web
Create
Cloud
Store
Manage
Analyze
Mobile Visualize
Enterprise
Share
Desktop

9. GIS apps
are
Location-based apps
GIS
Location-based
Systems

10. Location Intelligence
Quake Map
E311/Service Request
Campus Routing
Sky Harbor Airport

11. Social Intelligence

12. Geolocation

13. Power of Social

14. GIS architecture - 101
Mobile
Web
Flex
Social Media
ArcGIS Online
Basemaps
Geo Services
ArcGIS Server
GPS
Geodatabase

15. So you want to build an app…

16. The idea
+

17. Pizza Finder!

18. Maps
Apps
Value

19. User Requirements
 Find pizza restaurants
 Within a certain “tolerance”
 Around me, address or touch map
 Route
 Check-in

20. the mock-up

21. System Requirements
 Multiple devices
 No hardware
 Single service provider

22. Business Requirements

23. Got a cloud-based,
geospatial solution?
Bueller?

24. ArcGIS Online Platform

25. www.arcgis.com

26. ArcGIS Online Subscription - your personal cloud.

27. POI
Check In
Upload to the cloud

28. Forgot to demo?

29. ArcGIS APIs
Choosing your weapon

30. Mobile and Web
Apple iOS
Microsoft Windows
Phone 7
Google Android
Native or Web?

31. ArcGIS for JavaScript
ArcGIS for iOS
ArcGIS for Windows Phone
ArcGIS for Android
ArcGIS for Windows Silverlight
ArcGIS for Flex
resources.arcgis.com

32. ArcGIS Online Basemaps
Visualizing your world

33. Base layer options…

34. Projections and Spatial References

35. Where in the world am I?
Mercator
Geographic - WGS 1984
-87.6,41.9
-9743828.3,5131825.1

36. Basemap Service
var basemapURL =
“http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer”;
dojo.require("esri.map");
map = new esri.Map("mapDiv", { wrapAround180: true, null });
map.SetSpatialReference({"wkid":102100});
var basemap = new
esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
map.addLayer(basemap);

37. ArcGIS Online Services
Solving problems

38. Where am I?

39. Input Coordinates
navigator.geolocation.getCurrentPosition(zoomToLocation, this.geolocationError);
function zoomToLocation(location) {
var centerPoint = esri.geometry.geographicToWebMercator(
new esri.geometry.Point(location.coords.longitude,
location.coords.latitude));
var symbol = new esri.symbol.PictureMarkerSymbol(
{"url":”images/BluePin1LargeB.png“,”width":28,"height":28} );
var graphic = new esri.Graphic(centerPoint, symbol);
geolocationLayer.graphics.add(graphic);
map.centerAndZoom(centerPoint, 16);
}

40. Geocode Service
var geocodeService = new
esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");
var address = { "SingleLine": address };
locator.outSpatialReference = map.spatialReference;
var params = {address: address, outFields: ["Loc_name"]}
geocodeService.addressToLocations(params, geoCodeResults);
Ext.each(candidates, function (candidate) {
if (candidate.score > 80) {
var geom = candidate.location;
var graphic = new esri.Graphic(geom,
symbol, null);
geoCodeLayer.graphics.add(graphic);
}
});

41. Drive time tolerance?

42. Geoprocessing Service
var geoProcessService = new esri.tasks.Geoprocessor(
"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/C
reateDriveTimePolygons");
var driveTimes = “1 2 3”; // minutes
var featureSet = new esri.tasks.FeatureSet();
featureSet.features = features.push(geoCodeGraphic);
var params = {"Location":featureSet,"Times":driveTimes };
geoProcessService.execute(params, driveTimeResults, null);
function driveTimeResults(results,messages) {
var features = results[0].value.features;
for (var f = 0, fl = features.length; f < fl; f++) {
var feature = features[f];
if (f == 0) // minute 1
feature.setSymbol(polySymbolRed);
if (f ==1) // minute 2
…
driveTimeLayer.add(feature);
} );
}

43. Find places of interest

44. Feature Service – “geo query”
var poiCloudFeatureService = new QueryTask
("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/BIG_POI/FeatureServer/0");
var q = new esri.tasks.Query();
q.returnGeometry = true;
q.outFields = ["NAME", "ADDRESS", "PHONE", "DESCRIPTION"];
q.geometry = driveTimeGeometry;
q.spatialRelationship = esriSpatialRelIntersects
q.where = "Cuisine = 'pizza'";
poiCloudFeatureService.execute(q, addPizzaLocations, null);
function addPizzaLocations(features) {
Ext.each(features , function(feature){
graphic = new esri.Graphic(feature.geometry,
symbol, null);
pizzaLayer.add(graphic);
});
}

45. Select a place

46. Graphics Query
var pizzaLayer= map.layers["pizzaLayer"]; // stay local
dojo.connect(pizzaLayer, "onClick", displayInfo);
function displayInfo(args) {
var pizzaLocation = args.graphic;
var newView = Ext.create('PF.view.PizzaLocation',
{
fullscreen:true,
feature:pizzaLocation,
title:pizzaLocation.attributes['Name']
});
this.defaultMapView.push(newView);
}

47. Ok, take me there!

48. Route Service
var routeService = new esri.tasks.RouteTask
("http://tasks.arcgisonline.com/arcgis/rest/services/Network/USA/NAServer/Route");
var params = new esri.tasks.RouteParameters();
params.stops.features[0] = startLoc;
params.stops.features[1] = endLoc;
params.returnDirections = true;
params.directionsLengthUnits = esri.Units.MILES;
routeService.solve(params, function (solveResult) {
var directions = solveResult.routeResults[0].directions;
directionFeatures = directions.features;
var routeGeom = directions.mergedGeometry;
var startPt = routeGeom.getPoint(0,0);
var lastPath = routeGeom.paths[routeGeom.paths.length - 1];
var endPt = routeGeom.getPoint(routeGeom.paths.length – 1,
lastPath.length - 1);
}
function addGraphics(startPt, endPt, lastPath)…

49. Are we there yet?

50. Geometry Service - geofencing
Var geomService = new esri.tasks.GeometryService(
"http://tasks.arcgisonline.com /ArcGIS/rest/services/Geometry/GeometryServer");
var bufParams = new esri.tasks.BufferParameters();
bufParams.distances = [ 25 ];
bufParams.geometries = [ toPt ];
bufParams.outSpatialReference = new
esri.SpatialReference({"wkid":102100});
geomService.buffer(bufParams,
function (geometries) {
var geoFence = geometries[0];
var symbol = self.checkinToleranceSymbol;
var graphic = new esri.Graphic(geoFence, symbol);
geoFenceGraphicLayer.add(graphic) });
…
isPoint InFence = geoFence.contains(currentLocation); // local

51. check-in

52. Feature Service – update the cloud
var checkInLayer = new FeatureLayer(
"http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PizzaCheckins/FeatureServer/1");
// Invisible layers
var distance = getDistance(routeGraphic);
var duration = getDuration(checkInTime, checkOutTime);
var userRating = getUserRating(duration, distance);
routeGraphic.Attributes["POI_ID"] = poi.attribues[' POI_ID' ];
routeGraphic.Attributes["Name"] = poi.attributes[' NAME' ];
routeGraphic.Attributes["CheckIn"] = checkInTime;
routeGraphic.Attributes["CheckOut"] = checkOutTime;
routeGraphic.Attributes["Duration"] = duration;
routeGraphic.Attributes["Distance"] = distance;
routeGraphic.Attributes["Rating"] = userRating;
checkInLayer.applyEdits([routeGraphic], null, null);

53. edn1.esri.com/pizzafinder

55. Putting it all together
Monetizing your cloud

56. Sharing your cloud
Webmaps
Gino’s
sBarro
ArcGIS Online
Tomato Head
Cloud Space

57. Forgot again?

58. A closer look with GIS
Customers
Demographics
Location
Spatial Patterns
Monetization
Advertising
Stronger Business

60. That’s your mobile, cloud, check-in solution
in 75 minutes!
The “Ultimate” Geospatial Sandwich

61. Questions?
http://edn1.esri.com/pizzafinder
(via Chrome, iPhone, iPad and Android)
alaframboise@esri.com | @AL_Laframboise
dmartinez@esri.com | @ DMDevDude