Presentation about HTML5 Map on Esri UC 2013

1. Esri UC2013 . Demo Theater .
Demo Theater
2013 Esri International User Conference
July 8–12, 2013 | San Diego, California
Storytelling with HTML5 2D&3D
Maps
Yongfeng Wu

2. Esri UC2013 . Demo Theater .
Overview
① Demonstration
② Ideas For Map Innovation
③ SDK Behind Demonstration
④ Authoring Environment In The Future
Storytelling with HTML5 2D&3D Maps

3. Esri UC2013 . Demo Theater .
① Demonstration
http://storytelling-map.appspot.com/
http://localhost:8888/esri/mercury/

4. Esri UC2013 . Demo Theater .
② Ideas for Map
Innovation

5. Esri UC2013 . Demo Theater .
Ideas for Map Innovation
• Use new functionalities of modern browsers.
• Integrated 2D&3D environment.
• Development framework independence.
• More dynamic effects for representation.
Storytelling with HTML5 2D&3D Maps

6. Esri UC2013 . Demo Theater .
③ SDK Behind
Demonstration

7. Esri UC2013 . Demo Theater .
Add Map
Storytelling with HTML5 2D&3D Maps
<div id="mapContainer" style="width:100%; height:100%;"></div>
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);
Add div element
Create map with the div
Add tiled layer to map

8. Esri UC2013 . Demo Theater .
Switch Map’s Mode
Storytelling with HTML5 2D&3D Maps
map.switchMode(esri.Map.modes.GLOBE);
Switch to globe mode
map.enableRotate = true;
map.getController().rotateTo (0.2, 0, 0);
Rotate map (Drag with right button)

9. Esri UC2013 . Demo Theater .
Popup On Map
Storytelling with HTML5 2D&3D Maps
popupLayer = new esri.layer.PopupLayer();
map.addLayer(popupLayer);
Add PopupLayer
popupLayer.setVideoContent("abc.mp4", 640, 360, 2, "#024");
popupLayer.setPosition(x, y);
Set content of popup and show it from a map point

10. Esri UC2013 . Demo Theater .
GraphicsLayer
Storytelling with HTML5 2D&3D Maps
layer = new esri.layer.GraphicsLayer(symbolFunction);
map.addLayer(layer);
Add GraphicsLayer
function symbolFunction(g) {
var symbol = new esri.symbol.SimpleFillSymbol();
symbol.color = calcColor(g.attributes);
return symbol;
}
Symbol function of layer

11. Esri UC2013 . Demo Theater .
Play animation
Storytelling with HTML5 2D&3D Maps
var anim = {type : "transform",
duration : 1000,
delay : 500,
repeatCount : 0
};
layer.setAnimation(anim);
Define the animation
var pos = map.getLayerIndex(layer);
map.playLayers([pos]);
Play!

12. Esri UC2013 . Demo Theater .
Spatial Query In GraphicsLayer
Storytelling with HTML5 2D&3D Maps
var graphics = layer.queryGraphics(extent);
Query graphics in the extent
var g = layer.getNearestGraphic(x, y);
var gs = layer.getNearestGraphics(x, y, extent, count);
Query nearest graphics

13. Esri UC2013 . Demo Theater .
Base Map Style
Storytelling with HTML5 2D&3D Maps

14. Esri UC2013 . Demo Theater .
Events
map.bind(esri.Map.events.ON_MAP_SCREEN_CHANGED,
function(event, data){
if(data.type == esri.Map.screenChangedTypes.MOVING){
…
}
});
Storytelling with HTML5 2D&3D Maps

15. Esri UC2013 . Demo Theater .
④ Authoring
Environment
In The Future

16. Esri UC2013 . Demo Theater .
Develop In Browser
• Generate codes by configuration.
• Combined with ArcGIS Online.
• Templates and widgets.
Storytelling with HTML5 2D&3D Maps

17. Esri UC2013 . Demo Theater .
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…
Storytelling with HTML5 2D&3D Maps

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