|
|
@ -19,8 +19,11 @@
|
|
|
|
var map;
|
|
|
|
var map;
|
|
|
|
|
|
|
|
|
|
|
|
function loadLeafletMap() {
|
|
|
|
function loadLeafletMap() {
|
|
|
|
|
|
|
|
|
|
|
|
var deviceLocationID = "#device-location",
|
|
|
|
var deviceLocationID = "#device-location",
|
|
|
|
locations = $(deviceLocationID).data("locations"),
|
|
|
|
locations = $(deviceLocationID).data("locations"),
|
|
|
|
|
|
|
|
location_lat = $(deviceLocationID).data("lat"),
|
|
|
|
|
|
|
|
location_long = $(deviceLocationID).data("long"),
|
|
|
|
container = "device-location",
|
|
|
|
container = "device-location",
|
|
|
|
zoomLevel = 13,
|
|
|
|
zoomLevel = 13,
|
|
|
|
tileSet = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
|
|
tileSet = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
|
@ -46,6 +49,19 @@ function loadLeafletMap() {
|
|
|
|
|
|
|
|
|
|
|
|
$("#map-error").hide();
|
|
|
|
$("#map-error").hide();
|
|
|
|
$("#device-location").show();
|
|
|
|
$("#device-location").show();
|
|
|
|
|
|
|
|
} else if (location_long && location_lat) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
map = L.map(container).setView([location_lat, location_long], zoomLevel);
|
|
|
|
|
|
|
|
L.tileLayer(tileSet, {attribution: attribution}).addTo(map);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var m = L.marker([location_lat, location_long], {"opacity": opacVal}).addTo(map).bindPopup("Your device is here");
|
|
|
|
|
|
|
|
m.on('mouseover', function (e) {
|
|
|
|
|
|
|
|
this.openPopup();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
m.on('mouseout', function (e) {
|
|
|
|
|
|
|
|
this.closePopup();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
$("#device-location").hide();
|
|
|
|
$("#device-location").hide();
|
|
|
|
$("#map-error").show();
|
|
|
|
$("#map-error").show();
|
|
|
@ -56,4 +72,4 @@ $(document).ready(function () {
|
|
|
|
$(".location_tab").on("click", function () {
|
|
|
|
$(".location_tab").on("click", function () {
|
|
|
|
loadLeafletMap();
|
|
|
|
loadLeafletMap();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|