[Resolved] Change what a map shows when there are no search results

This thread is resolved. Here is a description of the problem and solution.

Problem:

The client wanted to change the zoom accordingly the results of the View. If it doesn't return any results, then the zoom should be different.

Solution:

1. Call the map render as last thing in the layout
2. Add your default marker inside of the no posts found shortcode
3. Just like this:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <ul class="wpv-loop js-wpv-loop">
        <wpv-loop>
            <li>[wpv-post-body view_template="Loop item in posts"]</li>
            [wpv-map-marker map_id='map-4' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-test'][/wpv-map-marker]
        </wpv-loop>
    </ul>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
    [wpv-map-marker map_id='map-4' marker_id='marker-[wpv-post-id]' address='Rua Pedro Trogo - Santo Antônio, Juiz de Fora - State of Minas Gerais, Brazil'][/wpv-map-marker]
    [/wpv-no-items-found]
    [wpv-map-render map_id='map-4' marker_icon='http://localhost:8888/teste/wp-content/plugins/views-addon-maps/resources/images/markers/Buildings.png']
[wpv-layout-end]

Now use a Views JavaScript front-end event to change the zoom dynamically:

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_started', function( event, data ) {
    if (WPViews.view_addon_maps.maps_data[0].markers[0].marker == 'marker-123'){
        data.map_options.single_zoom = 1;
    }  
});

First you will need to define an ID for your marker in the wpv-map-marker shortcode inside of no items found. Then use the same ID in the code above and your zoom can be adjusted.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 5 replies, has 2 voices.

Last updated by Adriano 4 years ago.

Assigned support staff: Adriano.

Author
Posts
#374164

I have a map that shows the result of a parametric search. My problem comes when the user filters the results such that there are no results. The map then shows a place in the middle of the Pacific Ocean. Instead, I would like it to show the state of Oregon with no markers (ie, be able to control the lat long and zoom level of the map displayed with no results)

I tried putting a transparent marker in the No Results section of the loop. However, I couldn't control the zoom except by setting the map's zoom level when it displayed one result. This doesn't work because the zoom I want for 0 results is much lower than what I want when one legitimate result is returned.

Any ideas on how to get this to work? Thanks.

#374326

Adriano
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello,

To achieve that you need to follow this:

1. Call the map render as last thing in the layout
2. Add your default marker inside of the no posts found shortcode
3. Just like this:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<ul class="wpv-loop js-wpv-loop">
		<wpv-loop>
			<li>[wpv-post-body view_template="Loop item in posts"]</li>
          	[wpv-map-marker map_id='map-4' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-test'][/wpv-map-marker]
		</wpv-loop>
	</ul>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
    [wpv-map-marker map_id='map-4' marker_id='marker-[wpv-post-id]' address='Rua Pedro Trogo - Santo Antônio, Juiz de Fora - State of Minas Gerais, Brazil'][/wpv-map-marker]
	[/wpv-no-items-found]
	[wpv-map-render map_id='map-4' marker_icon='<em><u>hidden link</u></em>
[wpv-layout-end]

#374419

This doesn't seem to solve the zoom issue. I had already had the no-items found marker showing up, but can't control its zoom level. I want a very zoomed out view for no markers found, but when one marker is found from the search, I want the results zoomed in on that marker.

#374619

Adriano
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

You can use the code below in filter JS section:

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_started', function( event, data ) {
  	if (WPViews.view_addon_maps.maps_data[0].markers[0].marker == 'marker-123'){
      	data.map_options.single_zoom = 1;
    }  
});

First you will need to define an ID for your marker in the wpv-map-marker shortcode inside of no items found. Then use the same ID in the code above and your zoom can be adjusted 🙂

Please let me know if you are satisfied with my reply and any other questions you may have.

Regards,

Adriano Ferreira

#374728

That worked perfectly - thanks!

#374729

Adriano
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

You are welcome.