Skip to content

Allowing to use LeafletSearch plugin by username.

Hi.

I would like to ask You to add one line into the inc/plugins/abp_umap.php file, line 852:

$udata[$user['uid']] = [
++     'name' => $user['username'],
       'lat' => $user['lat'],

This allows to create a searchable layer of markers and allow of use Leaflet-Search plugin.

With the PHP addition above, here is my working example of abpumap_page template (using latest leaflet and leaflet-search plugin available):

<head>
     <title>{$mybb->settings['bbname']} - {$lang->abp_umapname}</title>
     {$headerinclude}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-search@3.0.9/dist/leaflet-search.min.css" />
    <script src="https://unpkg.com/leaflet-search@3.0.9/dist/leaflet-search.min.js"></script>
</head>
<body>
{$header}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    <tbody>
        <tr><td class="thead"><strong>{$lang->abp_umap_page_title}</strog></td></tr>
        <tr><td class="trow1"><div id="abp_usermap" style="height:600px;"></div></td></tr>
        <tr><td class="trow1">
            <input class="button" type="button" name="rzoom" id="rzoom" value="{$lang->abp_umap_rzoom}" />
            <input class="button" type="button" name="centerme" id="centerme" value="{$abp_umap_recenter}" />
        </td></tr>
        <tr><td class="trow1"><ul>
            <li>{$abp_umap_stats}</li>
            {$abp_umap_userlist}
        </ul></td></tr>
    </tbody>
</table>
<script type="text/javascript">
    var center = {{$umap_center}};
    var abp_umap = null;
    var markery;
    var markers = [];
    {$umap_users}
    function init_map() {
            abp_umap = new L.map("abp_usermap").setView([center.lat, center.lon], {$umap_zoom});
            markery = new L.markerClusterGroup({$disabcluster});

            L.tileLayer("//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: '{$lang->osm_credit}'}).addTo(abp_umap);
            {$scalecontrol}

             var controlSearch = new L.Control.Search({
                position:'topright',          
                layer: markery,
                initial: false,
				propertyName: 'title',
				zoom: 14
            });

            abp_umap.addControl( controlSearch );
                       
            for (user in umusers) {
                var uName = umusers[user].name,
                loc = [umusers[user].lat, umusers[user].lon],
                uIcon = new L.icon({ iconUrl:"{$mybb->settings['bburl']}{$umap_marker}", iconSize:[{$iw}, {$ih}], iconAnchor: [{$hof},{$vof}], popupAnchor :[({$iw}/2)-{$hof},-{$vof}] }),
                marker = new L.marker(new L.latLng(loc), { icon: uIcon, title: uName }).bindPopup(umusers[user].img, {className:'{$umap_class}'});
                markers[user] = marker;
                markery.addLayer(marker);
            }
            abp_umap.addLayer(markery);
                
    }
    $(function() {
            // Adding a comment here
            init_map();
            $("#centerme").click(function() { abp_umap.setView([{$ulat}, {$ulng}]); return false; });
            $("#rzoom").click(function() { abp_umap.setZoom($umap_zoom); return false; });
            $(".popmap").on("click", function(e) {
                if (1=={$usettings['linktype']}) {
                    e.preventDefault();
                    popuser = markers[this.id];
                    abp_umap.setView([umusers[this.id].lat, umusers[this.id].lon]);
                    abp_umap.setZoom({$userzoom});
                    popuser.openPopup();
                    return false;
                }
            });
        });
</script>
{$footer}
</body>
</html>

This will show a map with a search icon in right upper corner and when You click on it, You can search over the markers for particular user name :) Found items is shown as a dropdown list and when You click on found item, map will relocate and zoom to that marker.

I would show You the real working example, but the map on my forum is private, so You have to register first ;) But it is quite straight forward with the above.

Many thanks in advance!

Kindly please convert this to 'suggestion' or 'enhancement' type.

Edited by Martinezio