2019-11-16, 10:46 AM
(2019-11-15, 11:38 PM)Crazycat Wrote: [ -> ]I see the code, line #38.Ok, I tried replacing the code but it blanked out the entire map! I reverted it back to original for now.
Replace with the new code.
(2019-11-15, 11:38 PM)Crazycat Wrote: [ -> ]I see the code, line #38.Ok, I tried replacing the code but it blanked out the entire map! I reverted it back to original for now.
Replace with the new 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, {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: [ -> ]I did a small error (bad placement of a quote) :(2019-11-15, 11:38 PM)Crazycat Wrote: [ -> ]I see the code, line #38.Ok, I tried replacing the code but it blanked out the entire map! I reverted it back to original for now.
Replace with the new code.
Replace with var marker = L.marker([umusers[user].lat, umusers[user].lon], { icon: uIcon }).bindPopup(umusers[user].img, {className:'{$umap_class}', minWidth:100});
<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>
Eldenroot Wrote:make it compatible with httpsIf you're talking about using the api over https, two detals: