Is there a way to create an openlayers map that adjusts size with an adaptive layout?

Question

I'm building a site that will incorporate data mapped from users quite extensively, and I'd like the front page to mostly be just a map showing various relevant data. I'm also trying to build the site in a way that is adapted to mobile use.

I have an openlayers map constructed, it displays data, mostly behaves as I'd like, and I have it on the front page. That's all good. What I'd like to do is have the map become narrower in order to respond to display size. I'm currently using the omega them and I can get other elements to respond, but not the map.

Is there a way to clip the map? Can I bring in different map displays for different screens? Is this in any way possible?

I'm nearly completely new to all of this, learning css/js/php on the fly as I run into issues. I feel like this might be something js can help with (I found this link, for instance: http://pastebin.com/GumWwSMB), but I'm not sure if it's appropriate/best nor where/how to implement it.

Thanks for your help.

Answer 1

Oy. Okay. After poking around even more I found a much, much better solution, and now the whole question seems silly.

When setting up a map to display the data (in Administration >> Structure >> OpenLayers >> Maps), just set map width to "auto." Then it mods all on it's own. One display (block or page), and you don't even need to add any extra css to the container. It just responds. Somehow I completely forgot that auto width was an option when building the map. Super easy!

Answer 2

Use CSS3 media queries. No javascript required!

          /* Smartphone portrait */
        @media only screen and (max-width:320px) {
    #openlayer-container{
    width:30%
    }
        }

        /* Smartphone landscape */
        @media only screen and (min-width:321px) and (max-width:480px) {
    #openlayer-container{
    width:40%
    }

        }

        /* Tablet portrait */
        @media only screen and (min-width:481px) and (max-width:768px) {

    #openlayer-container{
    width:60%
    }

        }

        /* Tablet landscape */
        @media only screen and (min-width:769px) and (max-width:1024px) {
    #openlayer-container{
    width:70%
    }

        }

        /* Standard layout */
        @media only screen and (min-width:1025px) {
 #openlayer-container{
    width:100%
    }
        }

Of course this is just an example. Depending on your exact html selectors, you need to put them in each media query range and style it accordingly. I assume you know CSS3.

Answer 3

I'm not sure if this is the best solution, but it's one I got to work.

Initially I had one large map and set it up as a page view and tried to resize it directly. Instead, I added two smaller maps and made a series of block views for each one. I made sure to give each view a unique class (large-front-map, medium-map-block, etc) and set the blocks to display only on the front page. Then I set each one to

.large-map {
    display:none;
}

.medium-map-block {
    display:none;
}

.narrow-map-block {
    display:block;
}

and so forth on the appropriate -narrow, -normal, or -wide.css and let Omega's media queries do the rest.

It seems obvious to me now, but I'm gradually poking my way through all of this. I guess maps have too complicated of a data mix for simple rescaling. Thanks for people's help and suggestions.