Esri Map App Builders

Map App Builders for Developers

[email protected] – @AL_Laframboise – alaframboise.github.io #geodev

Esri – The Future of Maps and Apps

Social Media Mapping

Canada

Ask a Citizen California

Community Services Australia

311 Requests

Ohio

New York

Generous Taxi Tippers Hot Real Estate Markets

United States

Crime Analysis

South Carolina

Campus Energy Analysis

UMass, Massachusetts

Space Planning

California

Real-Time Gas Network Monitoring Kuwait

Wireless Network Assessment

Wildfire Progression

Oregon

Malaysia Airlines Search

Australia

Ship Density

World

San Francisco

France

Transit Service

Vancouver, Canada

3D Condo Assessment

Apps/APIs

Services

Access

Platform for building and sharing maps, apps and data ArcGIS Desktop Web Device

Server Online Content and Services

Portal

Tools for Developers

Today’s Agenda

• Map Builders

• Web App Builders

• Web APIs and OS Frameworks

• Native App Builders

The Map App Development Challenge All developers face

•  Data

•  Management

•  Analyses

•  Design

•  Devices

2015… The year of the builders!

Simplify app development Maps and analyses Interactive design experience Fast prototyping Simplify accessing services Boilerplate code Responsive frameworks

Map Builders Creating maps for your apps

ArcGIS Online - Create and store data Tools to build Feature Services in the cloud

•  Create new data

•  Import Data - CSV - XLS - Shapefile - GeoJSON - …

•  Access via REST

ArcGIS for Developers

ArcGIS Online

Feature Service

http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/SF_Traffic_Accident_Reports/FeatureServer/0

Map Viewers - Design maps for your apps Tools for styling your web maps

•  Things you need to do - Basemaps - Navigate -  Find places - Set styles - Set filters - View tables

•  Stored in the cloud (ArcGIS Online)

•  Access from apps

Map Viewer – 2D

Scene Viewer – 3D

Map Viewers - Perform spatial analyses Tools and services to find patterns in your data

•  Geometry

•  Geocoding

•  Directions

•  GeoEnrichment

•  Spatial Analyses

Web Maps - The foundation of every app! JSON in the cloud

http://edn.maps.arcgis.com/home/webmap/viewer.html?webmap=016580b719404d458f47b98739a4e195

Let’s build a Map

developers.arcgis.com

Voucher Code:

“DEVTODEV”

Web App Builders Create responsive web mapping apps

Web Application Templates Build focused apps from web maps

•  Start from a web map

•  Configure, save and deploy

•  Download and host locally (optional) - Complete web application -  Fully customizable - Register with ArcGIS Online

•  You can build app templates for other devs or organizations!

Web AppBuilder for ArcGIS Configure and build responsive web apps for multiple devices

•  Start from a web map

•  Build, configure and deploy

•  Download and host locally (optional) -  Fully customizable, complete web app - Plug in your custom themes and widgets - Register with ArcGIS Online

•  You can build app templates for other devs or organizations!

GitHub: App Templates & Web AppBuilder Themes and Widgets Look before you code!

Let’s build a web app!

Build apps or plug-ins with mapping frameworks Web Map APIs

ArcGIS API for JavaScript Fully featured mapping API

•  Access ArcGIS services

•  Basemaps

•  Layers (Feature Services)

•  Geoservices – geocoding, directions…

•  Build custom widgets for mapping tasks

ArcGIS JavaScript: Load a web map from ArcGIS Online

<script> var map, webmapId = "b9ba04d69d1e4fa28eb30ce1b50cd039"; require([ "esri/map", "esri/arcgis/utils", "esri/dijit/Legend", "dojo/domReady!" ], function (Map, arcgisUtils, Legend) { arcgisUtils.createMap(webmapId, "mapDiv").then(function (response) { map = response.map; var legend = new Legend({ map: map, layerInfos:(arcgisUtils.getLegendLayers(response)) }, "legendDiv"); legend.startup(); }); }); </script>

Esri-Leaflet Light-weight JavaScript mapping plug-in

•  Access ArcGIS services

•  Basemaps


•  Geoservices – geocoding, directions…

•  Build custom apps and plug-ins

Esri-Leaflet: Loading Features Layers from ArcGIS Online

<script> var map = L.map('map').setView([37.75, -122.45], 12); L.esri.basemapLayer('Gray').addTo(map); L.esri.featureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/ SF_Traffic_Accidents_Model/FeatureServer/0').addTo(map); L.esri.featureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/ SF_Less_Safe_Bike_Routes/FeatureServer/0').addTo(map); L.esri.featureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/ SF_Safest_Bike_Routes/FeatureServer/0').addTo(map); var accidents = L.esri.featureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/ rest/services/SF_Traffic_Accident_Reports/FeatureServer/0'); accidents.addTo(map); </script>

Let’s build a custom web app!

Build native mapping apps AppStudio

ArcGIS Runtime APIs Fully featured native mapping APIs

•  Access all ArcGIS services

•  Basemaps


•  Geoservices - Geocoding - Directions - Spatial Analyses - GeoEnrichment…

ioS

Android

Linux

Windows

Mac

One App

AppStudio for ArcGIS Build one App, deploy across multiple platforms and form factors

ArcGIS Runtime Qt SDK Workshop UC 2014

Runtime APIs and Platforms

Qt

OS X

Windows Store

JavaSE iOS

Android

Windows Phone

Windows Desktop

Mobile

Desktop

Embedded


OS X

Windows Store

JavaSE iOS

Android

Windows Phone

Windows Desktop

Qt

Mobile

Desktop

Embedded




OS X

Windows Store

JavaSE iOS

Android

Windows Phone

Windows Desktop

Mobile

Desktop

Embedded

Qt

The Stack

ArcGIS Runtime API AppStudio AppFramework Qt Quick Framework

App App App App

ArcGIS Maps, Feature Services, Packages …

AppStudio Development Cycle

Awesome App Idea!

1 3 2

Ready for users to download

and use

Select App Template and

Configure

Configure Tinker Edit Run

Share Make

Publish

Build installs for different devices

Cloud Make

IPA

APK

EXE

DMG

RUN

Upload

Let’s build native apps!

Map App Builders for Developers Final Thoughts…

•  Simplify building maps and apps

•  Fast analyses of data

•  Interactive design experience

•  Fast prototyping

•  Simplify accessing services

•  Boilerplate code

•  Responsive frameworks

•  Multiple native builds

All maps and source code can be found at:

alaframboise.github.io

Thank you!

[email protected] – @AL_Laframboise – alaframboise.github.io #geodev

Esri Map App Builders

Software

Transcript of Esri Map App Builders