I have a directory website with placed you can have lunch. On the homepage you an search on your location or type in a city / lunchroom you know. When you press search you will see the result page with several listings. Here you can also choose to view the map (this is a Mapbox Api).

On the map the listings are shown, but the map doesn't automatically zoom in to your location. The map just shows the center of all listings. I want to show the listings within a 10km radius of the position you searched for.

On the MapBox website this is called GeoLocate (locate the user) and there is code for this you can use. So I changed the code to my preference only now I need to add it to my Wordpress theme. I'm using Directory theme Guido.

The code in the theme edit builder is different from the code I've made and I hope you can help me adjust the code properly. I'll show you both type of codes here so maybe that gives a better understanding:

This is the Wordpress Guido code in theme editor:

            if ( $item.data('latitude') !== "" && $item.data('latitude') !== "" ) {
                var zoom = (typeof MapWidgetZoom !== "undefined") ? MapWidgetZoom : 15;
                self.addMakerToMap($item);
                map.addLayer(markers);
                map.setView([$item.data('latitude'), $item.data('longitude')], zoom);
                $(window).on('update:map', function() {
                    map.setView([$item.data('latitude'), $item.data('longitude')], zoom);
                });

                $('.location-map-view').on('click', function(e){
                    e.preventDefault();
                    $('#single-listing-street-view-map').hide();
                    $('#'+map_e_id).show();
                    $('.location-street-view').removeClass('hidden');
                    $(this).removeClass('hidden').addClass('hidden');
                    map._onResize();
                });
                

And the code for the MapBox Geolocate I need to add can be found here exactly: https://docs.mapbox.com/mapbox-gl-js/example/locate-user/

Hope anyone can help, thanks in advance