building a arcgis mobile, cloud, checkin app in 75 minutes - zero to hero

alaframboise@esri.com | @AL_Laframboise

dmartinez@esri.com | @ DMDevDude

Esri Developer Network

Building a Mobile, Cloud, Check-in App in 75 Minutes

- Zero to Hero

www.esri.com/devmeetups

Dev Meet Ups

Esri = “ezri”

GIS

Geospatial platform… solve location-based problems.

Modeling with layers…

Geospatial Sandwich

Basics

place street parcel

Features

Point Line Polygon

The “arc”

Intelligent Feature

Direction

Start

End

“Arc”GIS

Mobile

Desktop

Web Create

Store

Manage

Analyze

Visualize

Share

Cloud

Enterprise

GIS apps are

Location-based apps

GIS

Location-based Systems

Location Intelligence

E311/Service Request

Campus Routing

Sky Harbor Airport

Quake Map

Social Intelligence

Geolocation

Power of Social

GIS architecture - 101

Basemaps

Geo Services ArcGIS Server

GPS

Geodatabase

Social Media

ArcGIS Online

Mobile Web

Flex

So you want to build an app…

The idea

+

Pizza Finder!

Maps

Apps Value

User Requirements

Find pizza restaurants

Within a certain “tolerance”

Around me, address or touch map

Route

Check-in

the mock-up

System Requirements

Multiple devices

No hardware

Single service provider

Business Requirements

Got a cloud-based, geospatial solution?

Bueller?

ArcGIS Online Platform

www.arcgis.com

ArcGIS Online Subscription - your personal cloud.

Upload to the cloud

POI

Check In

Forgot to demo?

ArcGIS APIs

Choosing your weapon

Mobile and Web

Apple iOS

Microsoft Windows

Phone 7

Google Android

Native or Web?

ArcGIS for JavaScript

ArcGIS for iOS

ArcGIS for Windows Phone

ArcGIS for Android

ArcGIS for Windows Silverlight

ArcGIS for Flex

resources.arcgis.com

ArcGIS Online Basemaps

Visualizing your world

Base layer options…

Projections and Spatial References

Where in the world am I?

-87.6,41.9

-9743828.3,5131825.1

Geographic - WGS 1984

Mercator

Basemap Service

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);

var basemapURL = “http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer”;

ArcGIS Online Services

Solving problems

Where am I?

Input Coordinates

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); }

navigator.geolocation.getCurrentPosition(zoomToLocation, this.geolocationError);

Geocode Service

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); } });

var geocodeService = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");

Drive time tolerance?

Geoprocessing Service

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); } ); }

var geoProcessService = new esri.tasks.Geoprocessor( "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons");

Find places of interest

Feature Service – “geo query”

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); }); }

var poiCloudFeatureService = new QueryTask ("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/BIG_POI/FeatureServer/0");

Select a place

Graphics Query

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);

}

var pizzaLayer= map.layers["pizzaLayer"]; // stay local

Ok, take me there!

Route Service

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)…

var routeService = new esri.tasks.RouteTask ("http://tasks.arcgisonline.com/arcgis/rest/services/Network/USA/NAServer/Route");

Are we there yet?

Geometry Service - geofencing

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

Var geomService = new esri.tasks.GeometryService( "http://tasks.arcgisonline.com /ArcGIS/rest/services/Geometry/GeometryServer");

check-in

Feature Service – update the cloud

// 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);

var checkInLayer = new FeatureLayer( "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PizzaCheckins/FeatureServer/1");

edn1.esri.com/pizzafinder

Putting it all together

Monetizing your cloud

Sharing your cloud

Cloud Space

Webmaps

Gino’s

Tomato Head

sBarro

ArcGIS Online

Forgot again?

A closer look with GIS

Demographics Location

Advertising

Spatial Patterns

Customers

Monetization

Stronger Business

The “Ultimate” Geospatial Sandwich

That’s your mobile, cloud, check-in solution in 75 minutes!

Questions?

http://edn1.esri.com/pizzafinder

(via Chrome, iPhone, iPad and Android)

alaframboise@esri.com | @AL_Laframboise

dmartinez@esri.com | @ DMDevDude