Is there any way to allow for Open Layers maps to react responsively when used in a responsive theme such as Omega?

I'm working on a site that uses the Omega theme however at this point the only way I can think to load up maps responsively is to load up 4 different map blocks per page load and then use display: none; in the css to hide the inactive ones.

Any ideas?

thanks

Dale

Comments

nod_’s picture

nod_
Primary language French
Location Lille
commented
Category: feature » support

You'd have to look at which js events are triggered by omega on viewport resize and react accordingly.

In any case I don't thinks that's something that we should take care of in openlayers.

zzolo’s picture

zzolo commented
Status: Active » Closed (works as designed)

Hey @Dale,

Openlayers, like most mapping libraries just depends on CSS for its viewport. In the module, we are a bit forceful about it, but this is mostly so that the map looks the way it needs to in every theme.

Your theme can easily override the markup output and then use CSS styling however you want.

We could try to make this a bit more flexible, but Drupal's theming system handles all this pretty well.

Patroclas’s picture

Patroclas commented

I have successfully used OL and Omega with maps that are fluid width. They work well except at the very narrow screen sizes one would expect on the smallest mobiles.

I added the OL css stylesheet to my Omega theme so it was easier to set up any style overrides there. You may need to use !important in the styles but it's not difficult to override things. Usually its just a matter of giving the map divs a width:x%; height: auto; and maybe a max.min width if you need them.

The one problem I have had is that since upgrading to the latest OL module and library, some touch-screen response has gone - pop-ups are not working for example. I have raised an issue in OL about this but no changes yet.

Dale Baldwin’s picture

Dale Baldwin commented

I tried a few things but in the end found that there were issues with UI once the screen size got too small, found just doing the maps up in google maps itself and embedding the iframes back in was easier.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

Openlayers, like most mapping libraries just depends on CSS for its viewport. In the module, we are a bit forceful about it, but this is mostly so that the map looks the way it needs to in every theme.

OpenLayers sadly adds the CSS width and height inline on the wrapper divs, which means technically, yes, you can get around this using !important in your theme, but it can be problematic when you're working with the Omega responsive layout stylesheets.

To clean this up, for my Omega sub-theme, I override the theme_openlayers_map() function to remove the inline css, then add appropriate sizes in each responsive file. I usually make the width:100% in global.css, and define a specific height that looks good for each specific viewport/breakpoint sizes.

<?php
// my_omega_subtheme/templates/openlayers-map.tpl.php 
/**
 * Override theme_openlayers_map to remove non-essential html and css lint,
 * and mainly to remove heights and widths for resposive layout reactions.
 * @see http://drupal.org/node/1416132 
 */
?>
<div class="openlayers-container-<?= $map_name ?>">
  <div id="<?= $map['id'] ?>" class="openlayers-map"></div>
</div>
sco_tt’s picture

sco_tt commented

Hi jwilson3,

I gave you template override a shot, but I'm still getting the inline styles. I cleared the cache and added another class named 'test' to make sure the template was being read, and it was. Did you make any other changes to prevent the inline styles from being loaded?