Skip to content
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time



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


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


A simple HTML-CSS-JS template for responsive webmap applications.



No releases published


You can’t perform that action at this time.