When can we get Responsive support for WP Flexible Map???

G’day Roger,

Thanks for the tip on the docs, will fix.

For responsive design, you want to knock out the width and height styles on the container div; there’s a WordPress filter for that. Here’s how I use it on a responsive site (code added to the theme’s functions.php file):

add_filter('flexmap_shortcode_styles', 'filterFlexmapStyles', 10, 2);

/**
* clear the width and height parameters on maps,
* so that stylesheets can take over
* @param array $styles
* @param array $attrs
* @return array
*/
function filterFlexmapStyles($styles, $attrs) {
    unset($styles['width']);
    unset($styles['height']);

    return $styles;
}

I then use CSS to suit the site’s requirements.

For the “Directions” link, it sits in a div with class flxmap-directions-link so you can style it to be larger in your stylesheet. FYI, Google Chrome’s developer tools and Firefox’s Firebug can tell you what class names different elements have, to save you time heading to the forums.

cheers,
Ross

Hi Ross,
That was a quick response! Let me experiment with your suggestion. Since I have some other commitments this coming week, it might be awhile before I can do much experimenting.

I was hoping that you could handle this automatically, similar to how the Catalyst Theme supports resizing of images. (Maybe it is WP that does this, but I am using the Catalyst Theme with Responsive activated and noticed how it is perceived from the viewer’s perspective.) For example, if I display a 640×360 image in a blog post or page, it is shown at that size with a desktop browser.

But when that very same image is displayed on a smartphone in portrait view, it is automatically resized while preserving the horizontal & vertical proportions to fit the width. Flipping the smartphone portrait/landscape automatically resizes so that it never exceeds the phone width. The CSS rearranges the layout to better fit the smartphone or tablet requirements.

So is there any way that you could automatically accommodate something like this?

Also, while experimenting with some other Google Map possible WP plugins, I have noticed a distinct possibility of getting in trouble with scrolling “within” the map vs scrolling up/down in the page/post window. Do you have any solutions for this?

— Thanks, Roger

G’day Roger,

It’s not the job of a plugin to determine how the theme behaves, and as someone who builds websites in WordPress, it really annoys me when (other) plugins take charge of the CSS and make me/SWMBO jump through hoops to comply with a custom theme. As such, I’ve kept this plugin’s styling minimal, leaving it to the site constructor to tailor how they want. Certainly, I won’t be adding any specific “responsive” features, especially when that is such a loaded term open to many different interpretations!

In short: you don’t want this plugin to work in a specific way, because it may prevent it from working in another specific way.

(Aside: one of the things this plugin’s stylesheet does is undo the “responsive” tricks some themes abuse Google Maps images with, as they totally bugger up the maps!)

For your requirements, use responsive CSS design methods with media queries to define your map sizes, starting from the smallest and building to the biggest (i.e. not the other way around! you want the default to be the small one; mobile first!). You can then add IE-specific rules to define the map sizes at the large end, assuming a desktop; older IE has no concept of media queries.

To stop the scroll button messing with zoom in maps, I turn that feature off by default. If you want it on, you can specify scrollwheel="true" in the shortcode. I’d leave it off!

cheers,
Ross

Hi Ross,
You have made some very good points! I will take the time to experiment with your original suggestions.
— Thanks, Roger

Hi Ross,

I added your code to the functions.php file of my theme and the maps went away completely? Am I doing something wrong here?

G’day push,

You also need to use some CSS to give the map div some width and height. e.g. the div has a class flxmap-directions, so you could add this to your theme’s CSS to make it fill the space you’ve dropped it into:

.flxmap-directions {
    width: 100%;
    height: 100%;
}

You could also do that without any additional code, by setting the width/height to 100% in the shortcode:

[flexiblemap center="-32.918657,151.797894" width="100%" height="100%"]

The advantage of using CSS is that you can adapt the width/height for different devices using media queries.

cheers,
Ross

Hi,

Sorry for my ignorance, but I do not understand how to make the map utterly responsive with my theme.

In fact, I’ve added the filter code in the function.php which made my map disappear from all my posts as Push notified in the previous message.

You can see what type of map I desire to show on my posts: https://ppahv.eu/moyen/marcelly.html

The shortcode used here is: [flexiblemap src=”https://www.randos-montblanc.com/kml/hautsforts.kml” maptype=”satellite” hidestreetview=”false” hidescale=”false” scrollwheel=”true” width=”620″ height=”344″]

The map loads a KML with a mere path from a starting to a finish point, with no directions or any extra options.

Now, I must use CSS with media queries to fit the layout to the corresponding device. The problem consists in mobile and little tablets use with width under 800px, which literally destroys my layout. However, I do not know how to proceed to fix that.

I tried to insert .flxmap-directions { width: 100%; height: 100%; } in my style.css, but my map still doesn’t show (as I expected).

I suppose I wrongly called the CSS insofar as I don’t use “direction” option with my maps. I then attempted to write something like .flxmap-container { width: 100%; height: 100%; } without any success.

Strangely, by using your shortcode [flexiblemap center=”-32.918657,151.797894″ width=”100%” height=”100%”] without editing CSS, the map still refuses to show up.

Maybe you can help me with a few hints?

Thanks in advance,

G’day ppahv,

Please open a new topic when you have a problem, don’t resurrect resolved topics.

If you set the width and height to 100%, the map will fit in the dimensions available. For your purposes, you probably just want to fit the width to 100% (or even 95%) and set the height at something reasonable, like this:

[flexiblemap src="https://www.randos-montblanc.com/kml/hautsforts.kml" maptype="satellite" hidestreetview="false" hidescale="false" scrollwheel="true" width="100%" height="344"]

That will give you a map that has a fixed height but a responsive width. If you need to change the height depending on the device, then add this filter:

add_filter('flexmap_shortcode_styles', 'flexmap_no_height', 10, 2);

/**
* clear the height parameter on maps,
* so that stylesheets can take over
* @param array $styles
* @param array $attrs
* @return array
*/
function flexmap_no_height($styles, $attrs) {
    unset($styles['height']);

    return $styles;
}

You can then use media queries in your stylesheet to set the height, e.g.

@media only screen and (max-device-height: 480px) {

.flxmap-container {
    height: 300px;
}

}

cheers,
Ross

Hi,

Thank you very much for your quick reply.

The “100 % trick” solved my problems regarding width. In my opinion, the height fit my needs, so I won’t alter CSS.

??