MyBB Community Forums

Full Version: ABP Usermap v2.0 beta - A map of your users with Open Street Map
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7
(2019-11-15, 11:38 PM)Crazycat Wrote: [ -> ]I see the code, line #38.
Replace with the new code.
Ok, I tried replacing the code but it blanked out the entire map!  I reverted it back to original for now.
Replace the content of abpumap_page template with:
<head>
<title>{$mybb->settings['bbname']} - {$lang->abp_umapname}</title>
{$headerinclude}
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
</head>
<body>
{$header}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    <tbody>
        <tr><td class="thead"><strong>7173 User Map (Visit the link in your USER CP to add your marker!)</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 markCluster;
	{$umap_users}
	function init_map() {
            abp_umap = L.map("abp_usermap").setView([center.lat, center.lon], {$umap_zoom});
            markCluster = L.markerClusterGroup({$disabcluster});
            L.tileLayer("//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: '{$lang->osm_credit}'}).addTo(abp_umap);
            {$scalecontrol}
            for (user in umusers) {
                var uIcon = L.icon({ iconUrl:"{$mybb->settings['bburl']}{$umap_marker}", iconSize:[{$iw}, {$ih}], iconAnchor: [{$hof},{$vof}], popupAnchor :[({$iw}/2)-{$hof},-{$vof}]});
                var marker = L.marker([umusers[user].lat, umusers[user].lon], { icon: uIcon }).bindPopup(umusers[user].img, {minWidth:100,className:'{$umap_class}'});
                markCluster.addLayer(marker);
            }
            abp_umap.addLayer(markCluster);
	}
	$(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; });
        });
</script>
{$footer}
</body>
</html>
(2019-11-16, 10:46 AM)RocketFoot Wrote: [ -> ]
(2019-11-15, 11:38 PM)Crazycat Wrote: [ -> ]I see the code, line #38.
Replace with the new code.
Ok, I tried replacing the code but it blanked out the entire map!  I reverted it back to original for now.
I did a small error (bad placement of a quote) :
Replace with var marker = L.marker([umusers[user].lat, umusers[user].lon], { icon: uIcon }).bindPopup(umusers[user].img, {className:'{$umap_class}', minWidth:100});

So it gives:
<head>
<title>{$mybb->settings['bbname']} - {$lang->abp_umapname}</title>
{$headerinclude}
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
</head>
<body>
{$header}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    <tbody>
        <tr><td class="thead"><strong>7173 User Map (Visit the link in your USER CP to add your marker!)</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 markCluster;
	{$umap_users}
	function init_map() {
            abp_umap = L.map("abp_usermap").setView([center.lat, center.lon], {$umap_zoom});
            markCluster = L.markerClusterGroup({$disabcluster});
            L.tileLayer("//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: '{$lang->osm_credit}'}).addTo(abp_umap);
            {$scalecontrol}
            for (user in umusers) {
                var uIcon = L.icon({ iconUrl:"{$mybb->settings['bburl']}{$umap_marker}", iconSize:[{$iw}, {$ih}], iconAnchor: [{$hof},{$vof}], popupAnchor :[({$iw}/2)-{$hof},-{$vof}]});
                var marker = L.marker([umusers[user].lat, umusers[user].lon], { icon: uIcon }).bindPopup(umusers[user].img, {className:'{$umap_class}', minWidth:100});
                markCluster.addLayer(marker);
            }
            abp_umap.addLayer(markCluster);
	}
	$(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; });
        });
</script>
{$footer}
</body>
</html>
That worked!  Thanks guys!  I set mine to 125px width and everything is working good!
Now version 1.4.

I've changed the cache generation frequency (using another hook) and added a warning for users who didn't set their localisation. It has to be enabled in ACP (last setting).

To update to this version:
  • deactivate plugin
  • upload the content of Upload to the root of your board
  • activate the plugin
  • go in Home » User Map and click "Upgrade DB"
Thank you! There are so many good ideas in issues list, I hope that somw of them will find a way to v1.5!
Now version 1.4.2 : added a possibility to let the system automaticaly try to locate the user, using https://ip-api.com

Some little things about this feature and this version:
This feature disables the Usermap section in UCP and try to get the location of the user if it's not already set. So it could be considered as a privacy break, because users haven't any choice if you choose to activate the autolocate.
This is a test version, if you use it, you must notice your users that you'll get their location based on their IP.

Next evolution will be less "unethical": it will add a consentment check-in in registration page, and will allow user to modify their location or hide it.

Another thing: ip-api is free to use, with limitations: no more than 45 requests / minutes and used only with http.

To update to this version:
  • deactivate plugin
  • upload the content of Upload to the root of your board
  • activate the plugin
  • go in Home » User Map and click "Upgrade DB"
Good. Would be nice to ignore users which selected own location. Do not disablr UCP section and make it compatible with https. However great addition Smile
this release is under dev/

Actually, users which have set their personnal location keep it. The system only sets the auto location for pple who have no location.
The final release will not deactivate the UCP but just forbid to totaly remove the location. The user will be allowed to modify, but not delete.

Eldenroot Wrote:make it compatible with https
If you're talking about using the api over https, two detals:
- I won't pay to have a key and then adapt the system. If anyone has an account and can share it with, I'll do.
- being without https is not a real trouble as it's only php, it's totaly transparent for the front.
Wait - so can I use with https website or not? I have not read the documentation and pricing
Pages: 1 2 3 4 5 6 7