No, it is solved, you just have to change alignment in ACP.
Ah! Missed that; adjusting the vertical alignment does the trick
Maybe preset it to "top" instead of "centre" which suits the default marker type (you now... for simpletons like me!)
It's true that the default setting doesn't match the default marker. I will change that
Hey Crazycat! Great plugin!!
I have one super minor issue...on the map display page, when you click on a user's marker...the pop up is not sized to fit the avatar. If you click out and then click it again, the pop up is correct! Any way to fix this. It doesn't seem to affect anything, just a minor thing!
Otherwise, this is great!! I tried the google maps plugin and it is not worth a google subscription to make it work!
Hello and thanks for your feedback
(2019-11-15, 11:06 AM)RocketFoot Wrote: [ -> ]I have one super minor issue...on the map display page, when you click on a user's marker...the pop up is not sized to fit the avatar. If you click out and then click it again, the pop up is correct! Any way to fix this. It doesn't seem to affect anything, just a minor thing!
I know this bug, I'll try to correct that if possible.
EDIT I now remember why I din't correct this issue: I can use the width of the avatar as min width of the popup, but it only works with local pictures, not whith remote ones. But I'll work on it
I'm using the default mybb avatar settings as reference for popup minWidth.
BTW: Very nice plugin....Thx@Crazycat!
(2019-11-15, 12:24 PM)SvePu Wrote: [ -> ]I'm using the default mybb avatar settings as reference for popup minWidth.
BTW: Very nice plugin....Thx@Crazycat!
What template did you change this. SvePu? I'll give it a try!
edit abpumap_page
search for var marker = L.marker([umusers[user].lat, umusers[user].lon], { icon: uIcon }).bindPopup(umusers[user].img, {className:'{$umap_class}'});
Replace with var marker = L.marker([umusers[user].lat, umusers[user].lon], { icon: uIcon }).bindPopup(umusers[user].img, {className:'{$umap_class}, minWidth:100'});
Or put whatever you want as value for minWidth.
(2019-11-15, 03:19 PM)Crazycat Wrote: [ -> ]edit abpumap_page
search for var marker = L.marker([umusers[user].lat, umusers[user].lon], { icon: uIcon }).bindPopup(umusers[user].img, {className:'{$umap_class}'});
Replace with var marker = L.marker([umusers[user].lat, umusers[user].lon], { icon: uIcon }).bindPopup(umusers[user].img, {className:'{$umap_class}, minWidth:100'});
Or put whatever you want as value for minWidth.
I can't find that in the template abpumap_page?
Here is my code:
<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}'});
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>
I see the code, line #38.
Replace with the new code.