WSO2's API Vision: Unifying Control, Empowering Developers
Storytelling with html5 2d&3d maps
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
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
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
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
PLEASE INCLUDE THIS SLIDEPresenters: Offering ID – this is in your presenters schedule or the printed agenda (not in the online agenda this year) - please be sure to update the slide with both IDs if you have more than one sessionFor attendees: Here are the instructions for users to access the system.The UC surveys can be accessed from:My UC Homepage > Evaluate sessionswww.esri.com/ucsurveysessionsThe MyUC login is on the back of their badges.The session can be found through:1. My planner listings on survey search page2. Using the Search based on:Topic, Date, workshop type and eventOffering ID – this is in your schedule or the printed agenda (not in the online agenda this year)There are 6 quick multiple choice questions plus a space for comments