Limit the number of markers display on map

New home Forums Basic Version General queries Limit the number of markers display on map

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #79912
    esprangers
    Participant

    Is it possible to limit the number of markers displayed on the map ? For instance no more than 20 markers so that if zoomed out to max level of the map only max 20 markers (picked at random) are displayed. And when zoomed further in to a specific area on the map, more markers are displayed in that area but still max 20 are shown in the viewport.
    I see this behavior is several other Google Map applications so I assume it must be possible with WP GoMaps too. But the question is how to set this up.

    #79934
    Matthew
    Moderator

    Hi there,

    Thank you for getting in touch with us, we do apppreciate your time.

    Yes this may be possible using the “Only load markers within viewport” beta setting (Maps -> Edit -> Settings -> Beta Features / Maps -> Edit -> Advanced Settings) in combination with some custom JS code.

    With that said, please may I ask if you would be able to enable the above mentioned setting, and provide me with the link to your map so that I may take a closer look?

    Kindest Regards,
    Matthew

    #79975
    esprangers
    Participant
    This reply has been marked as private.
    #79983
    esprangers
    Participant

    Matthew,

    I enabled that setting and replied to you in private with the map url. The setting does impact, it shows that if the viewport is changed, more icons are drawn with some minor delay on the map. I think that’s OK. So if you can share those javascript lines of code that enables to limit the number of icons, that would certainly help.

    Regards,
    Eric

    #80005
    Matthew
    Moderator

    Hi Eric,

    Thank you for your response.

    Yes sure, please copy, paste and save the below code into the “Custom JS” setting block (Maps -> Settings -> Advanced Settings):

    jQuery(function($){
      WPGMZA.ProMap.prototype.onMarkersFetched = function(data, expectMoreBatches)
    	{
    		if(this.settings.only_load_markers_within_viewport)
    		{
    			// NB: Remove existing markers before adding
    			this.removeAllMarkers();
    		}
    
        // custom - only pick 20 markers
        let shuffled = arguments[0].sort(() => 0.5 - Math.random());
        arguments[0] = shuffled.slice(0, 20);
    		
    		WPGMZA.Map.prototype.onMarkersFetched.apply(this, arguments);
    	}
    })

    Once this has been done, please may you clear your browser cache and confirm if this helps?

    Kindest Regards,
    Matthew

    • This reply was modified 1 month, 4 weeks ago by Matthew.
    #80019
    esprangers
    Participant

    Matthew,
    I installed that piece of code and the map now shows indeed a limited number of markers. Pity is that these are selected at random so if you zoom in on or pan towards the location of a specific marker, you might not see it anymore as it is no longer in the new random selected subset. If you have ideas how to improve this, please share.

    Thanks for your input,
    Eric

    #80036
    Matthew
    Moderator

    Hi Eric,

    Thank you for your response.

    Unfortunately as the 20 markers are randomly selected, there is no way of knowing which marker the user is focusing on and thus to specifically keep that marker.

    I hope this answers your question?

    Kindest Regards,
    Matthew

    #80041
    esprangers
    Participant

    Thanks Matthew,

    I have an idea how to improve it for zoom in and panning. And maybe I do find a solution for zoom out as well. I will have to do some testing in my dev environment.
    I think this topic can be closed.

    Regards,
    Eric

    #80087
    Matthew
    Moderator

    Hi Eric,

    Thank you for your response, it is much appreciated.

    That is not a problem at all, please do let us know if you come right with your testing/solution.

    Kindest regards,
    Matthew

    #80742
    steve9441
    Participant

    https://www.w3schools.com/tags/tag_a.asp

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.