4

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.

2
  • Could you possibly use a width: 100% in the CSS for the main div of your map? Then it may scale to the width of the parent container when the browser is resized. It's how it works with images, but I've never used openlayers so I'm not sure how the maps are rendered. – Chapabu Mar 2 '12 at 19:08
  • This may be a better question for the main SO site. I am not sure if Drupal is really going to be your limitation here. – mpdonadio Mar 2 '12 at 19:15
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!

0

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.

3
  • Media queries and sheets attached to them, are a built-in feature of the Omega base theme. – mpdonadio Mar 2 '12 at 19:58
  • You are right, but media query is the only way. Additionally you can decrease the zoom level to minimum value possible for smaller window screen size. But that may require some javascript work. – Minty Mar 3 '12 at 15:19
  • I can get static images to scale with Omega's built in media queries, but I've tried every sensible id or class on the map to no avail. Part of the problem is that the main map container id always has a unique ending, such as openlayers-container-openlayers-map-39eb56ec. The alpha-numeric bit changes with each page load. The map is loaded as a view and I can name a class on that element, but I can't see a way to declare a unique id or class on the map. I'm going to keep poking around, but I feel like I might need to load in different maps and hide them... – mbrakken Mar 4 '12 at 20:11
0

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.

1
  • good to know that, it works for you. – Minty Mar 6 '12 at 13:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.