Building responsive web mobile mapping applications

3,109 views
2,898 views

Published on

Examples of how to use responsive frameworks to build ArcGIS mapping apps

Published in: Technology, Design
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,109
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
77
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Building responsive web mobile mapping applications

  1. 1. Designing Responsive Web Mobile Mapping Applications Allan Laframboise alaframboise.github.com @AL_Laframboise
  2. 2. Web Mobile Design Key Considerations
  3. 3. Mobile Devices Are different… §  Physical §  Screen §  Button device size size
  4. 4. User Interactions Are different… §  Touch §  Orientation §  Keyboard §  Voice
  5. 5. User Expectations Are different… §  App to work like an app §  Websites to work like an app
  6. 6. Design Patterns Need to be different!
  7. 7. Think mobile first! 320px
  8. 8. Responsive Design Strategy
  9. 9. 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
  10. 10. mediaqueri.es
  11. 11. Components of Responsive Design 1.  Fluid Grid System 2.  Media Queries 3.  HTML5, CSS & JS
  12. 12. Fluid Grid System §  Layout adapts to different screen sizes §  Based on percentages §  12 column / 960px
  13. 13. 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;! !}! }!
  14. 14. HTML5 & CSS3 §  Mobile friendly HTML5 §  Meta tags §  Input types (text, dates…) §  CSS3 §  Selectors, transitions §  JavaScript §  Touch events §  Geolocation, localstorage, websockets, appcache….
  15. 15. Developing Responsive Mapping Apps - I Custom Framework
  16. 16. Typical “full-view” Mapping App 3 Row – 2 Column title menu-bar with buttons map side-bar
  17. 17. Default Behavior Not scaling, not adapting Higher resolution device Lower resolution device
  18. 18. Grid Layouts Vertical Stacking Vertical Stacking Horizontal Stacking No Stacking
  19. 19. One Design Strategy
  20. 20. Large Devices: 3 Rows - 3 Columns Wide-screen Monitors (>1280px) 768px Screen resolution 1024px 1280px & above
  21. 21. Medium Device: 2 Columns Desktops and Laptops (1024px - 1280px) 768px Screen resolution 1024px & 1280px
  22. 22. Medium Device: 2 Columns Desktops and Laptops (1024px - 1280px) 768px Screen resolution 1024px & 1280px
  23. 23. Small Device: Single Column iPads and Slates (768px – 1024px) 768px Screen resolution & 1024px 1280px
  24. 24. Small Device: Single Column Smaller iPads and Slates (768px – 1024px) 768px Screen resolution & 1024px 1280px
  25. 25. Extra Small Device: 1 Column, Minimized iPhone, Android (< 768px) §  Title §  Full map §  Icon tools < 768px Screen resolution 1024px 1280px
  26. 26. Extra Small Device: Windowing Options Keyboard input and output 1. Full Screen < 768px Screen resolution 2. Partial Screen 1024px 1280px
  27. 27. Fully Responsive HTML5 Application Adapts to all screen sizes < 768px Screen resolution 1024px 1280px
  28. 28. github.com/esri/responsive-map-js amiresponsive.com
  29. 29. Developing Responsive Mapping Apps - II Web Frameworks
  30. 30. Responsive Web Frameworks Standardized set of HTML, CSS and JS §  Bootstrap 3 §  Foundation 3 §  HTML5 §  Skeleton §  YAML 4 Fonts, images, media queries, components…
  31. 31. www.getbootstrap.com “mobile first”
  32. 32. 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
  33. 33. Step 1: Get bootstrap-map-js §  Bootstrap ver 3.0... §  srcjsbootstrapmap.js §  srccssbootstrapmap.css §  doc... §  templates..
  34. 34. 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>!
  35. 35. 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>!
  36. 36. 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>!
  37. 37. github.com/esri/bootstrap-map-js
  38. 38. A quick look inside…
  39. 39. 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%
  40. 40. 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> >! !
  41. 41. 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>!
  42. 42. 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">!
  43. 43. 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();! },!
  44. 44. 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));!
  45. 45. 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));!
  46. 46. 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
  47. 47. 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; }! }!
  48. 48. Other Tips and Tricks §  Watch for .container CSS §  Remove §  Listen delay all :hover states for onTouchStart and click to avoid 300ms
  49. 49. github.com/esri/bootstrap-map-js
  50. 50. Final Notes §  Write code once §  Write is “responsively” §  Make your maps responsive §  Know your device §  Know you user Don’t re-invent the wheel!
  51. 51. Questions? @AL_Laframbose alaframboise.github.com

×