Building responsive web mobile mapping applications
•
6 j'aime•5,068 vues
Examples of how to use responsive frameworks to build ArcGIS mapping apps
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (14)
En vedette
En vedette (20)
Similaire à Building responsive web mobile mapping applications
Similaire à Building responsive web mobile mapping applications (20)
Plus de Allan Laframboise
Plus de Allan Laframboise (14)
Dernier
Dernier (20)
Building responsive web mobile mapping applications
- 1. Designing Responsive Web Mobile Mapping Applications Allan Laframboise alaframboise.github.com @AL_Laframboise
- 3. Web Mobile Design Key Considerations
- 4. Mobile Devices Are different… § Physical § Screen § Button device size size
- 5. User Interactions Are different… § Touch § Orientation § Keyboard § Voice
- 6. User Expectations Are different… § App to work like an app § Websites to work like an app
- 7. Design Patterns Need to be different!
- 10. Responsive Design § Designing a single web page/app that works well across a variety of devices and screen sizes § Re-use content and software § Considers § Device limitations § User’s behavior
- 11. mediaqueri.es
- 12. Components of Responsive Design 1. Fluid Grid System 2. Media Queries 3. HTML5, CSS & JS
- 13. Fluid Grid System § Layout adapts to different screen sizes § Based on percentages § 12 column / 960px
- 14. Media Queries § Detect § Apply device screen size and orientation CSS at specific break points § Typical: 480px, 768px, 1024px, 1280px @media only screen and (max-device-width:480px) {! ! !/* Custom css styles */! !body { ! ! !font-size: 0.5em;! !}! !#titleArea{! ! !display: none;! !}! }!
- 15. HTML5 & CSS3 § Mobile friendly HTML5 § Meta tags § Input types (text, dates…) § CSS3 § Selectors, transitions § JavaScript § Touch events § Geolocation, localstorage, websockets, appcache….
- 16. Developing Responsive Mapping Apps - I Custom Framework
- 17. Typical “full-view” Mapping App 3 Row – 2 Column title menu-bar with buttons map side-bar
- 18. Default Behavior Not scaling, not adapting Higher resolution device Lower resolution device
- 19. Grid Layouts Vertical Stacking Vertical Stacking Horizontal Stacking No Stacking
- 21. Large Devices: 3 Rows - 3 Columns Wide-screen Monitors (>1280px) 768px Screen resolution 1024px 1280px & above
- 22. Medium Device: 2 Columns Desktops and Laptops (1024px - 1280px) 768px Screen resolution 1024px & 1280px
- 23. Medium Device: 2 Columns Desktops and Laptops (1024px - 1280px) 768px Screen resolution 1024px & 1280px
- 24. Small Device: Single Column iPads and Slates (768px – 1024px) 768px Screen resolution & 1024px 1280px
- 25. Small Device: Single Column Smaller iPads and Slates (768px – 1024px) 768px Screen resolution & 1024px 1280px
- 26. Extra Small Device: 1 Column, Minimized iPhone, Android (< 768px) § Title § Full map § Icon tools < 768px Screen resolution 1024px 1280px
- 27. Extra Small Device: Windowing Options Keyboard input and output 1. Full Screen < 768px Screen resolution 2. Partial Screen 1024px 1280px
- 28. Fully Responsive HTML5 Application Adapts to all screen sizes < 768px Screen resolution 1024px 1280px
- 30. Developing Responsive Mapping Apps - II Web Frameworks
- 31. Responsive Web Frameworks Standardized set of HTML, CSS and JS § Bootstrap 3 § Foundation 3 § HTML5 § Skeleton § YAML 4 Fonts, images, media queries, components…
- 33. Bootstrap-map-js ArcGIS JavaScript in a responsive web framework § Bootstrap ver 3 framework § Responsive § Resize and re-center § Pop-ups, widgets § Touch § CSS map Styles
- 34. Step 1: Get bootstrap-map-js § Bootstrap ver 3.0... § srcjsbootstrapmap.js § srccssbootstrapmap.css § doc... § templates..
- 35. Step 2: Create a page <!DOCTYPE html>! <html>! <head>! <title>Bootstrap 101 Template</title>! <meta name="viewport" content="width=device-width, initialscale=1.0">! <!-- Bootstrap -->! <link href="../assets/css/bootstrap.min.css" rel="stylesheet" media="screen">! </head>! <body>! ! <h1>Hello, world!</h1>! ! <!-- jQuery (for Bootstrap's JavaScript plugins) -->! <script src="../assets/js/jquery.js"></script>! <!-- Include all plugins or individual files as needed -->! <script src="../assets/js/bootstrap.min.js"></script>! </body>! </html>!
- 36. Step 3: Add a responsive map - I <!– ArcGIS css -->! <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/ js/esri/css/esri.css"> ! ! <!-- Bootstrap-map-js css -->! <link rel="stylesheet" type="text/css" href="../src/css/ bootstrapmap.css"> ! ! <style type="text/css”>! #mapDiv {! min-height: 100px; ! max-height: 1000px; ! }! </style>!
- 37. Step 3: Add a responsive map - II <div class="container">! <div id="mapDiv"></div>! </div>! …! <script src="http://js.arcgis.com/3.7compact"></script>! <script>! ! <!– Load Bootstrap Map – responsive map -->! require(["esri/map", ! ! ! ! "…/src/js/bootstrapmap.js", ! ! ! ! "dojo/domReady!"], ! function(Map, BootstrapMap) {! <!-- Get a reference to the ArcGIS Map -->! var map = BootstrapMap.create("mapDiv",{! basemap:"national-geographic",! center:[-122.45,37.77],! zoom:12! });! });! </script>!
- 39. A quick look inside…
- 40. Bootstrap Fluid Grid CSS to define row and column behavior Row 1: col-lg-12 = 100% Row 2: col-lg-9 = 75% + col-lg-3 = 25% Row 3: col-xs-4 + col-xs-4 + col-xs-4 = 100%
- 41. Responsive Grid: Dynamic column widths Sets logical breaks for different screen sizes <div class="row">! !<div class="col-xs-12 col-sm-12 col-lg-12">! ! !<h5>Top 12</h5>! </div>! </div>! <div class="row"> ! !<div class="col-xs-12 col-sm-8 col-lg-9">! ! !<!-- Bootstrap-map-js -->! ! !<div id="mapDiv1"></div>! !</div>! !<div class="col-xs-12 col-sm-4 col-lg-3"> ! !<h5>Right 3</h5>! !</div>! </div>! <div class="row">! !<div class="col-xs-4"><h5>Bottom 4</h5></div>! !<div class="col-xs-4"><h5>Bottom 4</h5></div>! !<div class="col-xs-4"><h5>Bottom 4</h5></div>! </div> >! !
- 42. Responsive Grid: Dynamic visibility CSS Styles ! ! <div class="page-header hidden-xs">! <div class="row">! <div class="col-xs-9"><h2>Windows</h2>! <p class="lead">Show modal and responsive pop-ups.</p>! </div>! <div class="col-xs-3">! <button id="geosearchNav" type="button" class="btn btnprimary btn-lg btn-fixed-lg">Show Window</button>! </div>! </div>! </div>!
- 43. Responsive Map: Viewport behavior Prevent scaling and enable full screen browser // Optimize for mobile – prevent scaling on pinch! <meta name="viewport" content="width=device-width,! initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>! ! // Safari iOS – apps only! <meta name="apple-mobile-web-app-capable" content="yes”>! <meta name="apple-mobile-web-app-status-bar-style" content="black”>! // Chrome for Android - NEW!! <meta name="mobile-web-app-capable" content="yes">!
- 44. Responsive Map: Scroll without pan Separate page and map navigation !// Set touch behavior! !createMap: function() {! ! !var options = {smartNavigation:false});! ! !var map = new Map(mapDiv,options);! ! !map.on(‘load’, this.setTouchBehavior);! ! !return map;! !},! ! setTouchBehavior: function() {! ! !this.disableScrollWheelZoom();! },!
- 45. Responsive Map: Auto-resizing Scale to all devices and windows // Responsive resize! var resizeWin function() {! ! ! var w = window.innerHeight;! if (w != this._w) {! this._w = w;! var b = document.body.clientHeight;! var mh = this._mapDiv.clientHeight;! var ms = this._calcSpace(this._mapDiv);! var mh1 = mh - ms;! var room = w - b;! var mh2 = room + mh1;! style.set(this._mapDivId, {"height": mh2+"px"});! ! !}! }! ! on(window, "resize", lang.hitch(this, resizeWin));!
- 46. Responsive Map: Auto-recentering Maintain the geographic center // Auto-center map! var recenter = function(extent, width, height) { ! !this._map.__resizeCenter = this._map.extent.getCenter();! !var timer = function() {! ! !this._map.centerAt(this._map.__resizeCenter);! }! setTimeout(lang.hitch(this, timer), this._delay);! }! ! on(window, "resize", lang.hitch(this, recenter));!
- 47. Responsive Popups: Smart touch Full-view position and fast touch ! ! ! // Smart-center popup! var updatePopup = function(obj) {! !var infoW = obj._map.infoWindow;! !updateTitle(infoW);! obj._repositionInfoWin(infoW.features[0]);! }! ! on(this._map.graphics, "click", lang.hitch(this, ! !function(){! ! !updatePopup(this);! }));! Tip: Listen for onTouchStart and onClick
- 48. Using Media Queries Fixed map based on screen size /* Extra small devices (phones, up to 480px) */! @media (max-width: 480px) {! .map { height: 100px; }! }! ! ! ! /* Small devices (tablets, 768px and up) */! @media (min-width: 768px) {! .map { height: 200px; }! }! ! /* Medium devices (desktops, 992px and up) */! @media (min-width: 992px) {! .map { height: 300px; }! }! ! /* Large devices (large desktops, 1200px and up) */! @media (min-width: 1200px) {! .map { height: 400px; }! }!
- 49. Other Tips and Tricks § Watch for .container CSS § Remove § Listen delay all :hover states for onTouchStart and click to avoid 300ms
- 51. Final Notes § Write code once § Write is “responsively” § Make your maps responsive § Know your device § Know you user Don’t re-invent the wheel!