Hi there,
Been trying for over an hour to make this map sticky, this using Gutenberg.
This the page: hidden link
This shortcode:
[wpv-map-render map_id="map-family-1" map_height="90vh" fitbounds="off" street_view_control="off" general_zoom="12" general_center_lat="52.95" general_center_lon="1.01"][/wpv-map-render]
This the CSS:
#js-wpv-addon-maps-render-map-family-1 {
height: calc(100vh - 100px) !important;
margin-top: -10px;
position: fixed !important;
}
It works however the long / latitude location is off. You drag the map to the right and the pins are there.
Got this working on all our Elementor pages, however trying to get the same page layout, but not using Elementor
hidden link
Any thoughts would be great 🙂
Hello, you must set fitbounds="on" in the shortcode if you want the map to automatically adjust position to display all the markers without scrolling/zooming. Only set fitbounds="off" if you want to set the centerpoint manually, regardless of the marker positions that are included in the map. Your shortcode has fitbounds="off", so the automatic repositioning effect is not triggered - the general center latitude and general center longitude coordinates are used instead. Does that answer the question, or have I misunderstood what you want to accomplish?
More info about each shortcode argument is available here: https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#wpv-map-render
Hi there,
How odd, these are pretty much the settings for all our maps and they worked.
Ok set fitbounds"off" and checked the link you sent. It's still not right.
[wpv-map-marker map_id='map-family-1' marker_id='marker-[wpv-post-id]-family-1' marker_field='wpcf-address-area' fitbounds="off" cluster="on" street_view_control="off"][wpv-post-featured-image]
[/wpv-map-marker]
Is there a way of making this work where the centerpoint is found automatically?
I have always set this as it never seemed to work.
Ok set fitbounds"off" and checked the link you sent. It's still not right.
No, it must be "on", not "off". I think you're completely confused - you included a wpv-map-marker shortcode in your most recent comment (an individual marker). The fitbounds attribute doesn't do anything in the marker shortcode. It goes in the wpv-render-map shortcode (the map).
Is there a way of making this work where the centerpoint is found automatically?
Yes, this is what I described in my first comment (?), but as I said fitbounds must be "on" to allow automatic positioning.
Hmmm yes very confused. Waqar helped with this setup a year ago and we never changed anything as it all worked fine.
Its only my intervention now, trying to take this out of Elementor and reuse that I'm hitting this issue.
This is what is in the Views Loop
[wpv-map-marker map_id='map-family-1' marker_id='marker-[wpv-post-id]-family-1' marker_field='wpcf-address-area' fitbounds="off" cluster="on" street_view_control="off"][wpv-post-featured-image]
[/wpv-map-marker]
This is the shortcode used on the page
[wpv-map-render map_id="map-family-1" map_height="90vh" fitbounds="off" street_view_control="off" general_zoom="12" general_center_lat="52.95" general_center_lon="0.9949"][/wpv-map-render]
Both ft bounds are off so i really dont understand.
The map works just not centering on the markers.
Both ft bounds are off so i really dont understand.
Exactly, fitbounds="off" is the problem. It should be changed in the wpv-map-render shortcode.
Goodness.
Ok I set it to on in the shortcode:
[wpv-map-render map_id="map-family-1" map_height="90vh" fitbounds="on" street_view_control="off" general_zoom="8" general_center_lat="52.95" general_center_lon="0.9949"][/wpv-map-render]
And removed it from the code in the View.
Sure the map has changed and regardless of whether I have long & lat settings it wont move and is still off center to the group of pins.
Okay, so now remove your custom styles temporarily:
/*#js-wpv-addon-maps-render-map-family-1 {
height: calc(100vh - 100px) !important;
margin-top: -10px;
position: fixed !important;
}*/
Is the map centered on the markers as expected now?
Removed, all good however the zoom out no longer works.
And it's no longer fixed.
Morning,
Ref this, we updated the URL to: hidden link
I have changed bits in the shortcode and View and still cant make this zoom out more.
I presume it is working because it has centered on all the pins collectively.
Also anytime I add code to fix its position it no longer works as it does now.
I have changed bits in the shortcode and View and still cant make this zoom out more.
Are you talking about the initial zoom level of the map when the page loads? Are you saying you cannot click the "-" button to zoom out, or are you trying to zoom out using another method - scrollwheel, pinch, other gesture, etc? I'm able to zoom out past the map bounds using the "-" zoom control successfully...after I click the button to accept cookies. The horizontal bar at the bottom was covering the zoom icons before I accepted cookies. I'm also able to use the command key with my scrollwheel to zoom out on a Mac in Chrome. Screenshot attached. If you're having trouble zooming, please clear your browser cache and test again, then if it's still not working please provide more details about your platform, browser, and interaction type so I can try to replicate the issue and provide a solution or explain the shortcode options available.
Also anytime I add code to fix its position it no longer works as it does now.
I don't know of a similar example in any of our documentation or reference sites so I don't have any sample code to share, and this type of customization falls outside the scope of support we provide here because it is custom CSS specific to your custom theme and map implementation. A couple of things that may point you towards a custom solution:
- Since fixed position directly on the map div breaks centering, you'll have to apply fixed position to something else. You could create a div with fixed position, then place your map shortcode inside that div. At that point you would have the map in a fixed position area without breaking map centering. Then it's a matter of adjusting the map to fit in that fixed area, without applying fixed position directly to the map div.
- Manipulating the map dimensions with external CSS is problematic, since those dimensions directly impact initial map position and calculations for map interactions. Use the map shortcode attributes for map_height and map_width, and do not otherwise manipulate the map edges with CSS.
- There may be other tickets here in the forum discussing fixed position maps, so you could search to see if anyone else has run into similar issues where they want a fixed map similar to yours. It's possible there is another example with more details, or links to other implementations that might help explain how it has been achieved by others.
Goodness, its never easy!
All I'm attempting to do, is replicate exactly what we have on the same site but this uses Elementor.
We have numerous pages that do exactly what we needed, this one of them: hidden link
This is where I got the initial code and thought it would be straight forward making a few changes to make it work in Gutenberg.
Can you confirm, it wont be achievable using Gutenberg?
If not we'll end up using Elementor which I was really hoping to keep away from wherever possible.
Thank you as always.
Can you confirm, it wont be achievable using Gutenberg?
I'm not aware of any way to create a grid with one scrolling column and one fixed column like this, purely using Gutenberg, without any custom code. Toolset's grid block can split a row into two columns, but scrolling is applied to the entire area. No, I think custom code is required to achieve this effect, or a 3rd-party solution like a custom theme or plugin.
Hmmm all the more confusing how this code in a view we use with Elementor and a map...
@media only screen and (min-width: 768px) {
.page-content .elementor-section-wrap .elementor-top-section .elementor-column-gap-no > .elementor-row > div:nth-of-type(2) {
position: fixed !important;
right: 0 !important;
}
Fixes the map, yet in Gutenberg, any alteration to this messes the map up!
.page-content .elementor-section-wrap .elementor-top-section .elementor-column-gap-no > .elementor-row > div:nth-of-type(2)
Right, because this CSS selector is not the map div. This CSS selector points to an ancestor div, top right corner of the screenshot. The div produced by the map shortcode - i.e. the map div - is a descendent outlined in green. Remember, I mentioned this earlier:
- Since fixed position directly on the map div breaks centering, you'll have to apply fixed position to something else. You could create a div with fixed position, then place your map shortcode inside that div.
That's what the Elementor design is doing - "fix"ing the position of an ancestor element, not the map div. Hope this helps!
