Your SlideShare is downloading. ×
Storytelling with html5 2d&3d maps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Storytelling with html5 2d&3d maps

161
views

Published on

Presentation about HTML5 Map on Esri UC 2013

Presentation about HTML5 Map on Esri UC 2013

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
161
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • SDK is based on HTML5/WebGL
  • 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
  • Transcript

    • 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

    ×