Update map-customer.tpl

fix Map
This commit is contained in:
Focuslinkstech 2024-03-19 09:08:30 +01:00
parent af3995b421
commit 21058d5c4e

View File

@ -4,59 +4,42 @@
<div id="map" style="width: '100%'; height: 600px; margin: 20px auto"></div> <div id="map" style="width: '100%'; height: 600px; margin: 20px auto"></div>
{literal} {literal}
<script> <script>
function getLocation() { window.onload = function() {
if (navigator.geolocation) { var map = L.map('map').setView([51.505, -0.09], 13);
navigator.geolocation.getCurrentPosition(showPosition); var group = L.featureGroup().addTo(map);
} else {
setupMap(51.505, -0.09);
}
}
function showPosition(position) { var customers = {/literal}{$customers|json_encode}{literal};
setupMap(position.coords.latitude, position.coords.longitude);
}
function setupMap(lat, lon) { L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png', {
var map = L.map('map').setView([lat, lon], 13); attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
var group = L.featureGroup().addTo(map); subdomains: 'abcd',
maxZoom: 20
}).addTo(map);
var customers = {/literal}{$customers|json_encode}{literal}; customers.forEach(function(customer) {
var name = customer.id;
var name = customer.name;
var info = customer.info;
var coordinates = customer.coordinates;
var balance = customer.balance;
var address = customer.address;
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png', { // Create a popup for the marker
attribution: var popupContent = "<strong>Customer Name</strong>: " + name + "<br>" +
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>', "<strong>Customer Info</strong>: " + info + "<br>" +
subdomains: 'abcd', "<strong>Customer Balance</strong>: " + balance + "<br>" +
maxZoom: 20 "<strong>Address</strong>: " + address + "<br>" +
}).addTo(map); "<strong>Coordinates</strong>: " + coordinates + "<br>" +
"<a href='{/literal}{$_url}{literal}customers/view/"+ customer.id +"'>More Info</a><br>";
customers.forEach(function(customer) { // Add marker to map
var name = customer.id; var marker = L.marker(JSON.parse(coordinates)).addTo(group);
var name = customer.name; marker.bindTooltip(name).bindPopup(popupContent);
var info = customer.info; });
var coordinates = customer.coordinates;
var balance = customer.balance;
var address = customer.address;
// Create a popup for the marker map.fitBounds(group.getBounds());
var popupContent = "<strong>Customer Name</strong>: " + name + "<br>" + }
"<strong>Customer Info</strong>: " + info + "<br>" + </script>
"<strong>Customer Balance</strong>: " + balance + "<br>" +
"<strong>Address</strong>: " + address + "<br>" +
"<strong>Coordinates</strong>: " + coordinates + "<br>" +
"<a href='{/literal}{$_url}{literal}customers/view/"+ customer.id +"'>More Info</a><br>";
// Add marker to map
var marker = L.marker(JSON.parse(coordinates)).addTo(group);
marker.bindTooltip(name).bindPopup(popupContent);
});
map.fitBounds(group.getBounds());
}
window.onload = function() {
getLocation();
}
</script>
{/literal} {/literal}
{include file="sections/footer.tpl"} {include file="sections/footer.tpl"}