Storytelling with html5 2d&3d maps

Esri UC2013 . Demo Theater .

Demo Theater

2013 Esri International User ConferenceJuly 8–12, 2013 | San Diego, California

Storytelling with HTML5 2D&3D Maps

Yongfeng Wu

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Overview

① Demonstration

② Ideas For Map Innovation

③ SDK Behind Demonstration

④ Authoring Environment In The Future

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D MapsEsri UC2013 . Demo Theater .

① Demonstration

Click icon to insert Picture

http://storytelling-map.appspot.com/http://localhost:8888/esri/mercury/

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D MapsEsri UC2013 . Demo Theater .

② Ideas for Map Innovation

Click icon to insert Picture

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Ideas for Map Innovation

• Use new functionalities of modern browsers.

• Integrated 2D&3D environment.

• Development framework independence.

• More dynamic effects for representation.

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D MapsEsri UC2013 . Demo Theater .

③ SDK Behind Demonstration

Click icon to insert Picture

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Add Map

<div id="mapContainer" style="width:100%; height:100%;"></div>< html >

esri.proxy = "../../proxy.jsp";

map = new esri.Map("mapContainer");

tiledLayer = new esri.layer.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/

ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");

map.addLayer(tiledLayer);

{ js }

Add div element

Create map with the div

Add tiled layer to map

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Switch Map’s Mode

map.switchMode(esri.Map.modes.GLOBE);{ js }

Switch to globe mode

map.enableRotate = true;map.getController().rotateTo (0.2, 0, 0);

{ js }

Rotate map (Drag with right button)

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Popup On Map

popupLayer = new esri.layer.PopupLayer();map.addLayer(popupLayer);

{ js }

Add PopupLayer

popupLayer.setVideoContent("abc.mp4", 640, 360, 2, "#024");popupLayer.setPosition(x, y);

{ js }

Set content of popup and show it from a map point

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

GraphicsLayer

layer = new esri.layer.GraphicsLayer(symbolFunction);map.addLayer(layer);

{ js }

Add GraphicsLayer

function symbolFunction(g) {var symbol = new esri.symbol.SimpleFillSymbol();symbol.color = calcColor(g.attributes);return symbol;

}

{ js }

Symbol function of layer

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Play animation

var anim = {type : "transform",duration : 1000,delay : 500,repeatCount : 0

};layer.setAnimation(anim);

{ js }

Define the animation

var pos = map.getLayerIndex(layer);map.playLayers([pos]);

{ js }

Play!

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Spatial Query In GraphicsLayer

var graphics = layer.queryGraphics(extent);{ js }

Query graphics in the extent

var g = layer.getNearestGraphic(x, y);

var gs = layer.getNearestGraphics(x, y, extent, count);

{ js }

Query nearest graphics

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Base Map Style

Esri UC2013 . Demo Theater .

Events

map.bind(esri.Map.events.ON_MAP_SCREEN_CHANGED, function(event, data){

if(data.type == esri.Map.screenChangedTypes.MOVING){

… }});

{ js }

Storytelling with HTML5 2D&3D Maps

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D MapsEsri UC2013 . Demo Theater .

④ Authoring Environment In The Future

Click icon to insert Picture

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Develop In Browser

• Generate codes by configuration.

• Combined with ArcGIS Online.

• Templates and widgets.

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps

Please fill out the session evaluation

First Offering ID: 2386

Second Offering ID: 2387

Online – www.esri.com/ucsessionsurveys

Paper – pick up and put in drop box

Thank you…

Esri UC2013 . Demo Theater . Storytelling with HTML5 2D&3D Maps