building a arcgis mobile, cloud, checkin app in 75 minutes - zero to hero
Post on 22-Apr-2015
2.744 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related