storytelling with html5 2d&3d maps
DESCRIPTION
Presentation about HTML5 Map on Esri UC 2013TRANSCRIPT
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