Building responsive web mobile mapping applications

  • 1,609 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,609
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
39
Comments
0
Likes
1

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

Transcript

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