A simple HTML-CSS-JS template for responsive webmap applications.
JavaScript Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
lib
README.md
map.html
map.js

README.md

responsive-webmap

About

A simple HTML-CSS-JS template for responsive webmap/webGIS applications. Based on OpenLayers3, Bootstrap and jQuery.

Documentation

This documentation is merely a list of CSS tricks and different options for customzing the webmap interface.

OpenLayers 3 for mobile:

Use bootstrap classes for hidding elements according viewport:

General layout:

Collapsible panel:

  • The div panel was set a position:absolute, starting at bottom: 0px.

  • Alternatively, use top: 50px.

  • Therefore, 2 OPTIONS:

  • collapsible by height: in map.js: $('div#panel').css('height','30px');

  • collapsible by width: `$('div#panel').css('width','30px');

  • The height of the div panel was calculated as calc(100% - 50px), where 50px is the height of the navbar. I did not reach to keep the height : 100%. I tried to add padding-top: 50px but this does not change the height of the panel, only the position of the panel content.

  • The collapsible behaviour is triggered by the collapsePanel() function, using jquery functions.

  • The collapsible behaviour is made by changing the width of the div panel from 300px to 30px OR the height from calc(100% - 50px) to 30px.

  • The panel content (div#panelContent) is hidden when the panel is collapsed through the css property opacity using a transition effect, because the transition effect cannot work with the css property display.

  • For mobile view, the #collapseBtn is hidden and is replaced by another button: #collapseBtnXs.

  • For mobile view, another function is used: collapsePanelXs() `

Positionning of openlayers controls:

  • put the ol-zoom at the bottom-right of the map:
.ol-zoom {
   top: initial;   
   right: 8px;
   bottom: 6px;
   left: auto;   
}
  • This option was applied to the mobile screen (@media) viewport.

  • Important for positioning these controls:

  • Use left:auto; to avoid the background-color of the ol zoom control spanning from the left side of the screen .

  • Use top:initial; to clear the top property that is specified by OpenLayers as bottom will not override top.

Showing the hamburger button in mobile