WordPress.org

Ready to get started?Download WordPress

Forums

WP Flexible Map
[resolved] When can we get Responsive support for WP Flexible Map??? (10 posts)

  1. Roger Due
    Member
    Posted 1 year ago #

    First, please upgrade the description of "directions" in your docs. I finally found on your website the following:
    directions="true"

    I am trying to find a WP plugin for supporting Google Maps that supports the Responsive Design features that are required for a new customer's website. I need the Google Map to be displayed large on a desktop browser. I then need the dimensions to automatically resize to the portrait & landscape viewing for both tablets & smartphones.

    I am using the Catalyst Theme.

    I also need the ability to display a target location and then use the directions="true" to allow the user to enter a "from location" and then have Google Map display the route on the map. That seems to be working after I finally figured out how to activate directions="true".

    NOTE: One problem that I did find is that the "Directions" link displayed in the "destination location" bubble is TOO SMALL to be reliably tapped on a smartphone. It took quite a bit of trying to finally get it to operate. So it would be very helpful if you could at least double the font height for the "Directions" link.

    NOTE: If you can provide the appropriate "Responsive Design" support, it looks like your WP Flexible Map will work for this customer's website.

    -- Thanks, Roger

    http://wordpress.org/extend/plugins/wp-flexible-map/

  2. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. Roger Due
    Member
    Posted 1 year ago #

    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 640x360 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

  4. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    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

  5. Roger Due
    Member
    Posted 1 year ago #

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

  6. push
    Member
    Posted 1 year ago #

    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?

  7. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    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

  8. ppahv
    Member
    Posted 10 months ago #

    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: http://ppahv.eu/moyen/marcelly.html

    The shortcode used here is: [flexiblemap src="http://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,

  9. webaware
    Member
    Plugin Author

    Posted 10 months ago #

    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="http://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

  10. ppahv
    Member
    Posted 10 months ago #

    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.

    :-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic