[Closed] Toolset view with Google map and filtering loading slowly after filtering

[Author]

Posts

[kenR]

Hi,
yes on the copied set that you made here hidden link it does still progressively gets slower in loading the map the more you interact with it. It does seem good at first but the more I interact with it it eventually slows and doesn't load the map. Steps I took to experience it:
1. Select Shared warehouse space from the drop down
2. click a couple different markers and pan the map a little
3. select "yes" from the Food Grade filter, and again select a couple markers and pan the map
4. select "yes" from temperature controlled filter, pan map
5. select "yes" from ambient storage filter. this is ware I can start to see it get slower to load but still loads and it also is getting slower to load the colored circles when clicking a marker
6. remove the selection on Temperature controlled filter, loading is getting slower
7. remove the selection on Ambient storage filter, now load is really slow, even panning the map has lag and the circles loading is slow.
8. remove the selection form the Food grade filter, now the map takes a long time to load and clicking a marker doesn't show the circles and panning the map doesn't seem to work.
9. select a different filter and the map times out.

[kenR]

Oh and I am getting some console errors.

[kenR]

Maybe this look at the console errors will help more

[Christopher Amirian]

Hi there,

Thank you for the steps. I reported this to the second tier support.

I will update you if I have news.

Thank you.

[Christopher Amirian]

Hi there,

I have an answer from the second tier support:

The problems with the Map on the client site may be related to the theme (and/or ACF Pro; it's not possible to activate the theme without ACF being active), as well as problems with the markup in the Loop Editor of the View.

If you open the developer tools while interacting with the map page on the live site and switch to the Memory tab, you'll see that the main JavaScript instance consumes quite a lot, and a growing amount, of memory, but there are also several other processes also consuming memory.

Compare that to the copy of the site on our server. It has only the main process, and if you interact with the map and filters you'll notice that it stays at a relatively modest level, and that there are no problems with the map slowing down the more you interact with the page.

You'll also notice that is after switching theme to twentytwentyone. The locations post type and warehouse type taxonomy are registered by the theme, so after switching theme I had to use Types to register a post type and taxonomy with the same slug.

At first when I did this, I could see that the markup was broken (producing closing wpv-map-marker shortcodes).

So the first job was to fix the Loop Editor markup.

Here are the results of my re-organising their markup to achieve what I think are the same objectives:

[wpv-layout-start]
	[wpv-items-found]
    [wpv-map-render map_id="map-1" map_height="20rem" spiderfy="on" map_type_control="off" street_view_control="off" style_json="//wordpress-1055182-4815688.cloudwaysapps.com/wp-content/plugins/toolset-maps/resources/json/Silver.json" marker_icon="//wordpress-1055182-4815688.cloudwaysapps.com/wp-content/plugins/toolset-maps/resources/images/markers/Hospital-1.png"][/wpv-map-render]
    <!-- wpv-loop-start -->
    <wpv-loop>
      <h4>[wpv-post-title]</h4>
        [wpv-conditional if="( CONTAINS(#(warehouse_type),'shared-warehouse') )"]
          [wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]' marker_icon='//wordpress-1055182-4815688.cloudwaysapps.com/wp-content/uploads/2023/10/KENCO-SHARED-V1-01-64.png' marker_field='wpcf-location_address']
          <div class="wst-hidden-div" data-marker="[wpv-post-id]" data-one-day="[types field='1-day-shipping-radius' format='FIELD_VALUE'][/types]" data-pop-one="[types field='1-day-population-percent' format='FIELD_VALUE'][/types]" data-two-day="[types field='2-day-shipping-radius' format='FIELD_VALUE'][/types]" data-pop-two="[types field='2-day-population-percent' format='FIELD_VALUE'][/types]">
            <div class="shared">
              <h4>[wpv-post-title]</h4>
                [wpv-conditional if="( $(wpcf-food-grade) ne '' )"]<p><span>Food Grade:</span> [types field='food-grade'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_temp_cont) ne '' )"]<p><span>Temperature Controlled:</span> [types field='sw_temp_cont'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_ambient_storage) ne '' )"]<p><span>Ambient Storage:</span> [types field='sw_ambient_storage'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_prod_rest) ne '' )"]<p><span>Production Restrictions:</span> [types field='sw_prod_rest'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_no_of_buildings) ne '' )"]<p><span>No. of Buildings:</span> [types field='sw_no_of_buildings'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_address_location) ne '' )"]<p><span>Location:</span> [types field='sw_address_location'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_total_sf) ne '' )"]<p><span>Total SF:</span> [types field='sw_total_sf'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_dock_doors) ne '' )"]<p><span>Dock Doors:</span> [types field='sw_dock_doors'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_trailer_parking) ne '' )"]<p><span>Trailer Parking:</span> [types field='sw_trailer_parking'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_clear_height) ne '' )"]<p><span>Clear Height:</span> [types field='sw_clear_height'][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_supported_activities) ne '' )"]<p><span>Supported Activities:</span> [types field='sw_supported_activities' separator=', '][/types]</p>[/wpv-conditional]
                [wpv-conditional if="( $(wpcf-sw_additional_features) ne '' )"]<p><span>Additional Features:</span> [types field='sw_additional_features' separator=', '][/types]</p>[/wpv-conditional]
              </div>
          </div>
          [/wpv-map-marker]
        [/wpv-conditional]

        [wpv-conditional if="( CONTAINS(#(warehouse_type),'dedicated-warehouse') )"]
          [wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]' marker_icon='//wordpress-1055182-4815688.cloudwaysapps.com/wp-content/uploads/2023/10/KENCO-DEDICATED-V1-01-64.png' marker_field='wpcf-location_address']
          <div class="dedicated">
            <h4>Dedicated Warehouse</h4>
            [wpv-conditional if="( $(wpcf-dw_feature) ne '' )"]<p><span>Feature:</span> [types field='dw_feature' separator=', '][/types]</p>[/wpv-conditional]
            [wpv-conditional if="( $(wpcf-dw_scope_service) ne '' )"]<p><span>Scope of Service:</span> [types field='dw_scope_service' separator=', '][/types]</p>[/wpv-conditional]
            [wpv-conditional if="( $(wpcf-dw_vertical) ne '' )"]<p><span>Vertical:</span> [types field='dw_vertical'][/types]</p>[/wpv-conditional]
          </div>
          [/wpv-map-marker]
        [/wpv-conditional]
    </wpv-loop>
    <!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
      <div class="no-results">
    		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
      </div>
	[/wpv-no-items-found]
[wpv-layout-end]

(Note, for testing purposes it includes <h4>[wpv-post-title]</h4> at the start of the Loop, to see on screen how many markers should be shown on the map.)

In this scenario (the current state of the copied site) it works as expected, no memory problems, no slowing down as the map is interacted with.

It is not as simple as switching back to the client child theme and activating ACF Pro (and disabling the post type and taxonomy registration within Types). If you do that, the reported problem of the map slowing as the page is interacted with doesn't appear to be an issue, but what is an issue is that I have no idea where the markers are coming from: the map renders with all of the markers, even if, for example, filters are chosen which result in only two locations being returned (which we know because we are outputting the post title within the loop).

Something in the child theme appears to be responsible for adding those markers, but I didn't look any further into that. After editing the View markup as described above, things work as expected.

---------------

As mentioned by the second tier support, you need to search for the problem on your Child theme.

Thanks.

[kenR]

I have made the edits the view's code to correct the closing wpv-map-marker shortcode as you showed that you have done. This alone did not fix the slowing of the map as I interact with it. It did however, implement a new issue where on initial load of the map it gets the Silver.json styling of the map as it did before, though once a filter is selected it no longer keeps that styling and goes back to default google maps styling. So I understand correctly, you are saying it is either an issue with ACF and/or our theme? Are you telling me that Toolset is not compatible with ACF? I don't know why ACF would have anything to do with the render speed of the map for the locations, because we aren't even using ACF for the locations post type, for the locations post type I specifically chose to use toolset custom fields since I know I was going to use toolset to do the map and filtering. As for our theme causing markers to show when they shouldn't, I am not seeing that as of yet, but also we don't have any custom code in our theme that renders the markers for the toolset map. All the code for the views map is inside of the view, the shortcodes, the html output and the JS. I will try converting the locations and warehouse taxonomy over to toolset post types though, are you saying toolset is not compatible with post types that are not created through toolset? I will look further into the memory issue you pointed out, but I think it is obvious that we need to use our custom theme and ACF pro.

[kenR]

I have converted the locations post type and warehouse taxonomy toolset created post type and taxonomy and removed the registration of those from our theme. This still didn't fix the issue. I have deactivated ACF Pro and this did not fix the issue. Have you looked into the console errors that I uploaded in here earlier? The `too many arguments provided for a function call` error points to google maps and toolset files/functions. When loading just the view onto a template that does not output the header the issue does go away. we are trouble shooting this now, but we would like to know what you found regarding the console errors.

[Christopher Amirian]

Hi,

As mentioned in the description of the second-tier support the mere changing of the code and using the default theme of WordPress fixed the problem which you can find in the current status of the copied website:

hidden link

That includes the removal of the console error you have mentioned and the site above uses the same code base of Toolset Maps.

This shows that the native code of Toolset Maps is not on fault here and there should be something else such as the theme you use.

The fact that you found out that the map works ok if you use a template that does not include the header of the website points to problems on the theme or whatever code you added in the header.

but that is something which you need to investigate as we showed here that the code of Toolset Maps is not on fault here.

Thank you for your understanding.