1527 строки
52 KiB
JavaScript
1527 строки
52 KiB
JavaScript
/**
|
|
* ownCloud - maps
|
|
*
|
|
* This file is licensed under the Affero General Public License version 3 or
|
|
* later. See the COPYING file.
|
|
*
|
|
* @author Sander Brand <brantje@gmail.com>
|
|
* @copyright Sander Brand 2014
|
|
*/
|
|
/** Testing
|
|
*/
|
|
|
|
Array.prototype.clean = function(deleteValue) {
|
|
for (var i = 0; i < this.length; i++) {
|
|
if (this[i] == deleteValue) {
|
|
this.splice(i, 1);
|
|
i--;
|
|
}
|
|
}
|
|
return this;
|
|
};
|
|
Array.prototype.unique = function() {
|
|
var unique = [];
|
|
for (var i = 0; i < this.length; i++) {
|
|
if (unique.indexOf(this[i]) == -1) {
|
|
unique.push(this[i]);
|
|
}
|
|
}
|
|
return unique;
|
|
};
|
|
(function($, OC) {
|
|
|
|
var normalMarkerImg = OC.filePath('maps', 'css', 'leaflet/images/marker-icon.png');
|
|
var normalMarkerIcon = L.icon({
|
|
iconUrl : normalMarkerImg,
|
|
iconSize : [31, 37],
|
|
iconAnchor : [15, 37],
|
|
popupAnchor : [0, -37]
|
|
});
|
|
|
|
var favMarkerImg = OC.filePath('maps', 'img', 'icons/favMarker.png');
|
|
var favMarkerIcon = L.icon({
|
|
iconUrl : favMarkerImg,
|
|
iconSize : [31, 37],
|
|
iconAnchor : [15, 37],
|
|
popupAnchor : [0, -37]
|
|
});
|
|
|
|
function addGeocodeMarker(latlng) {
|
|
Maps.droppedPin = new L.marker(latlng);
|
|
var decoder = L.Control.Geocoder.nominatim();
|
|
decoder.reverse(latlng, 67108864, function(results) {
|
|
var result = results[0];
|
|
setTimeout(function() {
|
|
var knownFields = ['country', 'country_code', 'postcode', 'residential', 'road', 'state', 'suburb', 'town', 'house_number'];
|
|
var popupHtml = '';
|
|
$.each(result.originalObject.address, function(k, v) {
|
|
if ($.inArray(k, knownFields) == -1) {
|
|
var prefix = k;
|
|
popupHtml += v + '<br />';
|
|
}
|
|
})
|
|
var houseNo = (result.originalObject.address.house_number) ? result.originalObject.address.house_number : '';
|
|
popupHtml += result.originalObject.address.road + ' ' + houseNo + '<br />';
|
|
popupHtml += result.originalObject.address.town + ', ' + result.originalObject.address.state + ', ' + result.originalObject.address.country;
|
|
toolKit.addMarker(Maps.droppedPin, popupHtml, true);
|
|
}, 50);
|
|
|
|
})
|
|
}
|
|
|
|
$.fn.clickToggle = function(func1, func2) {
|
|
var funcs = [func1, func2];
|
|
this.data('toggleclicked', 0);
|
|
this.click(function() {
|
|
var data = $(this).data();
|
|
var tc = data.toggleclicked;
|
|
$.proxy(funcs[tc], this)();
|
|
data.toggleclicked = (tc + 1) % 2;
|
|
});
|
|
return this;
|
|
};
|
|
|
|
// initialize map when page ready
|
|
$(document).ready(function() {
|
|
marker = null;
|
|
circle = null;
|
|
firstRun = true;
|
|
|
|
var attribution = '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
|
|
|
|
var mapQuest = L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
|
|
attribution : attribution,
|
|
subdomains : "1234"
|
|
})
|
|
/* var mapbox = L.tileLayer('https://a.tiles.mapbox.com/v3/liedman.h9ekn0f1/{z}/{x}/{y}.png', {
|
|
attribution : attribution + ' Tiles <a href="https://www.mapbox.com/about/maps/">MapBox</a>'
|
|
})
|
|
var blackAndWhite = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
|
|
attribution : attribution
|
|
})
|
|
|
|
var airial = L.tileLayer('http://server.arcgisonline.com/ArcGIS/' + 'rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution : attribution + ' Tiles © Esri',
|
|
subdomains : "1234"
|
|
})*/
|
|
|
|
/*var clouds = L.tileLayer('http://{s}.tile.openweathermap.org/map/clouds/{z}/{x}/{y}.png', {
|
|
attribution : 'Map data © <a href="http://openweathermap.org">OpenWeatherMap</a>',
|
|
opacity : 0.5
|
|
})
|
|
var wind = L.tileLayer('http://{s}.tile.openweathermap.org/map/wind/{z}/{x}/{y}.png', {
|
|
attribution : 'Map data © <a href="http://openweathermap.org">OpenWeatherMap</a>',
|
|
opacity : 0.5
|
|
})
|
|
var temperature = L.tileLayer('http://{s}.tile.openweathermap.org/map/temp/{z}/{x}/{y}.png', {
|
|
attribution : 'Map data © <a href="http://openweathermap.org">OpenWeatherMap</a>',
|
|
opacity : 0.5
|
|
})
|
|
|
|
var seamarks = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
|
|
attribution : 'Map data © <a href="http://openweathermap.org">OpenSeaMap</a>',
|
|
opacity : 1.0
|
|
})
|
|
|
|
var none = L.tileLayer('http://{s}.tile.openweathermap.org/map/temp/{z}/{x}/{y}.png', {
|
|
attribution : '',
|
|
opacity : 0.0
|
|
})*/
|
|
|
|
var oldPosition = $.jStorage.get('location', {
|
|
lat : 21.303210151521565,
|
|
lng : 6.15234375
|
|
});
|
|
var oldZoom = $.jStorage.get('zoom', 3);
|
|
|
|
map = L.map('map', {
|
|
center : new L.LatLng(oldPosition.lat, oldPosition.lng),
|
|
zoom : oldZoom,
|
|
zoomControl : false,
|
|
layers : [mapQuest]
|
|
});
|
|
map.options.minZoom = 3;
|
|
var hash = new L.Hash(map);
|
|
/*var baseMaps = {
|
|
"MapBox" : mapbox,
|
|
"Mapnik" : mapnik,
|
|
"Black and White" : blackAndWhite,
|
|
"Airial" : airial
|
|
};*/
|
|
|
|
//map.addControl(new L.Control.Compass());
|
|
/*map.addControl(new L.Control.Zoom({
|
|
position: 'bottomright'
|
|
}));*/
|
|
map.addControl(new L.Control.Gps({
|
|
minZoom : 14,
|
|
autoActive: 1,
|
|
style : {
|
|
radius : 16, //marker circle style
|
|
weight : 3,
|
|
color : '#0A00FF',
|
|
fill : true
|
|
},
|
|
position : 'topleft',
|
|
}));
|
|
$('.leaflet-control-layers-overlays').removeProp('multiple');
|
|
map.on('popupopen', function(e) {
|
|
currentMarker = e.popup._source;
|
|
});
|
|
routing = L.Routing.control({
|
|
waypoints : [],
|
|
geocoder : L.Control.Geocoder.nominatim(),
|
|
plan : L.Routing.plan(null, {
|
|
waypointIcon : function(i) {
|
|
return new L.Icon.Label.Default({
|
|
labelText : String.fromCharCode(65 + i)
|
|
});
|
|
}
|
|
})
|
|
}).addTo(map);
|
|
$(".leaflet-routing-geocoders").appendTo("#searchContainer");
|
|
$(".leaflet-routing-container").appendTo("#searchContainer");
|
|
$('.geocoder-0').attr('completiontype', 'local');
|
|
|
|
// properly style as input field
|
|
//$('#searchContainer').find('input').attr('type', 'text');
|
|
|
|
map.on('zoomend', function(e) {
|
|
var zoom = map.getZoom();
|
|
if(!$.jStorage.get('pois') || zoom < 9) return; //only show POIs on reasonable levels
|
|
Maps.displayPoiIcons(zoom);
|
|
})
|
|
|
|
map.on('mousedown', function(e) {
|
|
Maps.mouseDowntime = new Date().getTime();
|
|
});
|
|
|
|
map.on('mouseup', function(e) {
|
|
if (e.originalEvent.target.className !== 'leaflet-tile leaflet-tile-loaded' && e.originalEvent.target.nodeName != 'svg')
|
|
return;
|
|
|
|
var curTime = new Date().getTime();
|
|
if (Maps.droppedPin) {
|
|
map.removeLayer(Maps.droppedPin);
|
|
Maps.droppedPin = false;
|
|
if ($('.geocoder-0').attr('completiontype') === 'local' && ($('.geocoder-0').val() == '')) {
|
|
$('.geocoder-0').val('');
|
|
}
|
|
}
|
|
if (/*(curTime - Maps.mouseDowntime) > 200 && */Maps.dragging === false) {//200 = 2 seconds
|
|
addGeocodeMarker(e.latlng);
|
|
}
|
|
|
|
});
|
|
|
|
map.on("dragstart", function() {
|
|
Maps.dragging = true;
|
|
})
|
|
map.on("dragend zoomend", function(e) {
|
|
Maps.saveCurrentLocation(e);
|
|
Maps.dragging = false;
|
|
var searchInput = $('.geocoder-0')
|
|
if (searchInput.attr('completiontype') == 'local' && searchInput.val() != '') {
|
|
var data = {
|
|
search : searchInput.val(),
|
|
bbox : map.getBounds().toBBoxString()
|
|
}
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(function() {
|
|
console.log('Get new results');
|
|
mapSearch.getSearchResults(data, mapSearch.showResultsOnMap);
|
|
}, 500);
|
|
}
|
|
})
|
|
|
|
$(document).on('click', '.toggle-children', function(e) {
|
|
var subCat = $(this).parent().find('ul');
|
|
if (subCat.is(":visible")) {
|
|
subCat.slideUp();
|
|
} else {
|
|
subCat.removeClass('hidden');
|
|
subCat.slideDown();
|
|
}
|
|
})
|
|
|
|
function convertLatLon(latD, lonD, latDir, lonDir){
|
|
var lon = lonD[0] + lonD[1]/60 + lonD[2]/(60*60);
|
|
var lat = latD[0] + latD[1]/60 + latD[2]/(60*60);
|
|
if (latDir == "S") {
|
|
lat = lat * -1;
|
|
}
|
|
if(lonDir == "W"){
|
|
lon = lon * -1;
|
|
}
|
|
return {
|
|
lat: lat,
|
|
lon: lon
|
|
};
|
|
}
|
|
$('.photoLayer').clickToggle(function() {
|
|
OC.dialogs.filepicker("Select your photo", function addJpegFile(path){
|
|
for(i=0; i<path.length; i++){
|
|
var p = path[i];
|
|
if(p.indexOf('/') === 0) p = p.substr(1);
|
|
var separator = p.lastIndexOf('/');
|
|
var dir = p.substr(0, separator);
|
|
var file = p.substr(separator + 1);
|
|
var picUrl = OC.generateUrl('apps/files/ajax/download.php?dir={dir}&files={file}', {
|
|
dir: dir,
|
|
file: file
|
|
});
|
|
new ImageInfo(
|
|
picUrl,
|
|
(function (element){
|
|
return function (imageinfo){
|
|
var exif = imageinfo.getAllFields().exif;
|
|
var latD = exif.GPSLatitude;
|
|
var lonD = exif.GPSLongitude;
|
|
var latDir = exif.GPSLatitudeRef;
|
|
var lonDir = exif.GPSLongitudeRef;
|
|
var latlon = convertLatLon(latD, lonD, latDir, lonDir);
|
|
var photoIcon = L.icon({
|
|
iconUrl: picUrl,
|
|
iconSize : [42, 49],
|
|
iconAnchor : [21, 49],
|
|
popupAnchor : [0, -49],
|
|
className : 'photo-marker'
|
|
});
|
|
|
|
var markerHTML = '<h2>' + file + "</h2>";
|
|
/*markerHTML += '<br />Latitude: ' + latlon.lat + " " + latDir;
|
|
markerHTML += '<br />Longitude: ' + latlon.lon + " " + lonDir;
|
|
markerHTML += '<br />Altitude: ' + exif.GPSAltitude + "m";*/
|
|
var marker = L.marker([latlon.lat, latlon.lon], {
|
|
icon : photoIcon
|
|
});
|
|
toolKit.addMarker(marker, markerHTML);
|
|
};
|
|
})(this)
|
|
).readFileData();
|
|
}
|
|
}, true, ["image/jpeg", "image/png", "image/gif"], true);
|
|
}, function() {
|
|
//TODO
|
|
});
|
|
|
|
/* Favorites layer: Show by default, remember visibility */
|
|
$('.favoriteLayer').click(function() {
|
|
if($.jStorage.get('favorites')) {
|
|
favorites.hide();
|
|
$.jStorage.set('favorites', false);
|
|
$('#favoriteMenu').removeClass('active').addClass('icon-star').removeClass('icon-starred');
|
|
} else {
|
|
favorites.show();
|
|
$.jStorage.set('favorites', true);
|
|
$('#favoriteMenu').addClass('active').addClass('icon-starred').removeClass('icon-star');
|
|
}
|
|
});
|
|
if($.jStorage.get('favorites') === null) {
|
|
favorites.show();
|
|
$.jStorage.set('favorites', true);
|
|
$('#favoriteMenu').addClass('active').addClass('icon-starred').removeClass('icon-star');
|
|
}
|
|
if($.jStorage.get('favorites')) {
|
|
favorites.show();
|
|
$('#favoriteMenu').addClass('active').addClass('icon-starred').removeClass('icon-star');
|
|
} else {
|
|
favorites.hide();
|
|
}
|
|
|
|
/* POI layer: Show by default, remember visibility */
|
|
$('.poiLayer').click(function() {
|
|
if($.jStorage.get('pois')) {
|
|
Maps.hidePoiIcons();
|
|
$.jStorage.set('pois', false);
|
|
//$('#poiMenu').removeClass('active').addClass('icon-star').removeClass('icon-starred');
|
|
} else {
|
|
Maps.displayPoiIcons(map.getZoom());
|
|
$.jStorage.set('pois', true);
|
|
//$('#poiMenu').addClass('active').addClass('icon-starred').removeClass('icon-star');
|
|
}
|
|
});
|
|
if($.jStorage.get('pois') === null) {
|
|
Maps.displayPoiIcons(map.getZoom());
|
|
$.jStorage.set('pois', true);
|
|
//$('#poiMenu').addClass('active').addClass('icon-starred').removeClass('icon-star');
|
|
}
|
|
if($.jStorage.get('pois')) {
|
|
Maps.displayPoiIcons(map.getZoom());
|
|
//$('#poiMenu').addClass('active').addClass('icon-starred').removeClass('icon-star');
|
|
} else {
|
|
Maps.hidePoiIcons();
|
|
}
|
|
|
|
|
|
$('.contactLayer').clickToggle(function() {
|
|
Maps.loadAdressBooks()
|
|
}, function() {
|
|
favorites.hide()
|
|
});
|
|
$(document).on('click', '.subLayer', function() {
|
|
var layerGroup = $(this).attr('data-layerGroup');
|
|
var layerValue = $(this).attr('data-layerValue');
|
|
var isVisible = $(this).find('i').length;
|
|
|
|
if (isVisible == 1) {
|
|
$('.' + layerValue).css({
|
|
'visibility' : 'hidden'
|
|
})
|
|
$(this).find('i').remove();
|
|
Maps.updateLayers(false, false);
|
|
} else {
|
|
$('.' + layerValue).css({
|
|
'visibility' : 'visible'
|
|
})
|
|
$(this).append('<i class="icon-toggle fright micon activeLayer"></i>');
|
|
//if($('.'+layerValue).length==0){
|
|
Maps.updateLayers(layerGroup, layerValue);
|
|
/*} else{
|
|
Maps.updateLayers(false,false);
|
|
}*/
|
|
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '.device', function() {
|
|
var isVisible = $(this).find('i').length;
|
|
var dId = $(this).attr('data-deviceId')
|
|
if (isVisible == 1) {
|
|
$(this).find('i').remove();
|
|
Maps.clearDevicePositions();
|
|
Maps.clearDevicePosistionHistory(dId);
|
|
var index = Maps.activeDevices.indexOf(dId);
|
|
Maps.activeDevices.splice(index, 1);
|
|
Maps.loadDevicesLastPosition();
|
|
} else {
|
|
Maps.activeDevices.push(dId);
|
|
Maps.loadDevicesLastPosition();
|
|
$(this).append('<i class="icon-toggle fright micon"></i>');
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '.keepDeviceCentered', function(e) {
|
|
var isVisible = $(this).parent().find('i').length;
|
|
var dId = $(this).parent().attr('data-deviceId')
|
|
e.stopPropagation()
|
|
if ($(this).hasClass('tracOn')) {
|
|
$(this).removeClass('tracOn');
|
|
Maps.traceDevice = null;
|
|
} else {
|
|
$('.keepDeviceCentered').removeClass('tracOn');
|
|
$(this).addClass('tracOn');
|
|
if (!isVisible) {
|
|
Maps.activeDevices.push(dId);
|
|
Maps.traceDevice = dId;
|
|
Maps.loadDevicesLastPosition();
|
|
$(this).parent().append('<i class="icon-toggle fright micon"></i>');
|
|
} else {
|
|
Maps.traceDevice = dId;
|
|
Maps.loadDevicesLastPosition();
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Setup datepickers
|
|
*/
|
|
$('.datetime').datetimepicker({
|
|
dateFormat : 'dd-mm-yy',
|
|
minDate : -900
|
|
});
|
|
|
|
$(document).on('click', '.deviceHistory', function(e) {
|
|
var isVisible = $(this).parent().find('i').length;
|
|
var dId = $(this).parent().attr('data-deviceId');
|
|
var _this = this;
|
|
e.stopPropagation();
|
|
if (!isVisible) {
|
|
$(".datetime").datepicker("disable");
|
|
$('#showHistoryPopup').dialog({
|
|
open : function() {
|
|
$(".datetime").datepicker("enable");
|
|
var currentDate = new Date();
|
|
var month = ((currentDate.getMonth() * 1 + 1) < 10) ? '0' + (currentDate.getMonth() * 1 + 1) : (currentDate.getMonth() * 1 + 1);
|
|
$('#deviceHistory [name="startDate"]').val(currentDate.getDate() + '-' + month + '-' + currentDate.getFullYear() + ' 00:00');
|
|
},
|
|
buttons : {
|
|
"Cancel" : function() {
|
|
$(this).dialog('destroy');
|
|
},
|
|
"Ok" : function() {
|
|
var startDate = $('#deviceHistory [name="startDate"]').val();
|
|
var endDate = $('#deviceHistory [name="endDate"]').val();
|
|
var keepCenter = $('#deviceHistory [name="keepCenter"]').is(':checked');
|
|
Maps.loadDevicePosistionHistory(dId, keepCenter, startDate, endDate);
|
|
$(_this).parent().append('<i class="icon-toggle fright micon"></i>');
|
|
$(this).dialog('destroy');
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
Maps.clearDevicePosistionHistory(dId);
|
|
$(this).parent().find('i').remove();
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Custom search function
|
|
*/
|
|
/* searchItems = []*/
|
|
searchTimeout = 0;
|
|
|
|
$(document).on('keyup blur', '.geocoder-0', function(e) {
|
|
if ($(this).attr('completiontype') != 'local')
|
|
return;
|
|
|
|
var data = {
|
|
search : $(this).val(),
|
|
bbox : map.getBounds().toBBoxString()
|
|
}
|
|
clearTimeout(searchTimeout);
|
|
if ($(this).val() == '') {
|
|
mapSearch.clearSearchResults();
|
|
mapSearch._ids = [];
|
|
}
|
|
if (e.keyCode != 13) {
|
|
searchTimeout = setTimeout(function() {
|
|
|
|
}, 1000)
|
|
} else {
|
|
mapSearch.clearSearchResults();
|
|
mapSearch._ids = [];
|
|
mapSearch.getSearchResults(data, mapSearch.showResultsOnMap);
|
|
}
|
|
|
|
});
|
|
/**
|
|
* setDestination on click
|
|
*/
|
|
map.locate({
|
|
setView : false,
|
|
watch : false
|
|
})
|
|
map.on('locationfound', function doRouteCalc(e) {
|
|
currentlocation = [e.latitude, e.longitude];
|
|
|
|
})
|
|
$(document).on('click', '.setDestination', function() {
|
|
|
|
var latlng = $(this).attr('data-latlng');
|
|
routing.setWaypoints([])
|
|
var end = latlng.split(',');
|
|
end[0] = end[0] * 1;
|
|
end[1] = end[1] * 1;
|
|
//map.removeLayer(routing);
|
|
|
|
routing.setWaypoints([L.latLng(currentlocation[0], currentlocation[1]), L.latLng(end[0], end[1])]);
|
|
|
|
$('.geocoder-1').show();
|
|
map.closePopup();
|
|
});
|
|
|
|
/**
|
|
* Clear route
|
|
*/
|
|
$(document).on('click', '.clearroute', function() {
|
|
routing.setWaypoints([]);
|
|
});
|
|
|
|
});
|
|
// End document ready
|
|
function onLocationFound(e) {
|
|
var radius = e.accuracy / 2;
|
|
if (marker != null) {
|
|
map.removeLayer(marker);
|
|
}
|
|
if (circle != null) {
|
|
map.removeLayer(circle);
|
|
}
|
|
|
|
marker = L.marker(e.latlng).addTo(map);
|
|
//.bindPopup("You are within " + radius + " meters from this point").openPopup();
|
|
if (radius < 5000) {
|
|
circle = L.circle(e.latlng, radius).addTo(map);
|
|
}
|
|
|
|
if (firstRun) {
|
|
map.panTo(e.latlng);
|
|
var maxZoom = 16;
|
|
map.setZoom(14);
|
|
firstRun = false;
|
|
}
|
|
}
|
|
|
|
mapSearch = {
|
|
searchItems : [],
|
|
_ids : [],
|
|
getSearchResults : function(data, callback) {
|
|
$.getJSON(OC.generateUrl('/apps/maps/search'), data, function renderSearchResults(r) {
|
|
callback(r)
|
|
})
|
|
},
|
|
|
|
showResultsOnMap : function(r) {
|
|
if (map.getZoom() <= 14) {
|
|
var zoomMSG = '<div class="leaflet-control-minZoomIndecator leaflet-control" style="border-radius: 3px; padding: 3px 7px; display: block; background: rgba(255, 255, 255, 0.701961);">Results might be limited due current zoom, zoom in to get more</div>'
|
|
$('.leaflet-top.leaflet-middle').html(zoomMSG);
|
|
} else {
|
|
$('.leaflet-control-minZoomIndecator ').remove();
|
|
}
|
|
console.log(r)
|
|
|
|
$.each(r.contacts, function() {
|
|
var contact = this;
|
|
if ($.inArray(contact.id, mapSearch._ids) != -1) {
|
|
return;
|
|
}
|
|
if (contact.location) {
|
|
if (contact.thumbnail) {
|
|
var imagePath = contact.thumbnail;
|
|
var iconImage = L.icon({
|
|
iconUrl : imagePath,
|
|
iconSize : [42, 49],
|
|
iconAnchor : [21, 49],
|
|
popupAnchor : [0, -49],
|
|
className : 'contact-icon'
|
|
});
|
|
} else {
|
|
var imagePath = OC.filePath('maps', 'img', 'icons/marker_anonPerson.png');
|
|
var iconImage = L.icon({
|
|
iconUrl : imagePath,
|
|
iconSize : [42, 49],
|
|
iconAnchor : [21, 49],
|
|
popupAnchor : [0, -49]
|
|
});
|
|
}
|
|
|
|
for(i=0; i<contact.location.length; i++){
|
|
if(contact.location[i] == null) continue;
|
|
var markerHTML = '<h2>' + contact.FN + "</h2>";
|
|
var street = [contact.ADR[i][0], contact.ADR[i][1], contact.ADR[i][2]].clean('').join('<br />');
|
|
var city = (contact.ADR[i][3]) ? contact.ADR[i][3] : '';
|
|
markerHTML += '<br />' + street + ", " + city;
|
|
markerHTML += (contact.TEL) ? '<br />Tel: ' + escape(contact.TEL[0]) : '';
|
|
var marker = L.marker([contact.location[i].lat * 1, contact.location[i].lon * 1], {
|
|
icon : iconImage
|
|
});
|
|
toolKit.addMarker(marker, markerHTML)
|
|
mapSearch.searchItems.push(marker);
|
|
}
|
|
}
|
|
mapSearch._ids.push(contact.id)
|
|
})
|
|
|
|
$.each(r.addresses, function() {
|
|
if ($.inArray(this.place_id, mapSearch._ids) != -1) {
|
|
return;
|
|
}
|
|
var markerHTML = this.display_name.replace(',', '<br />');
|
|
var marker = new L.marker([this.lat * 1, this.lon * 1]);
|
|
toolKit.addMarker(marker, markerHTML)
|
|
mapSearch.searchItems.push(marker);
|
|
mapSearch._ids.push(this.place_id)
|
|
|
|
});
|
|
|
|
$.each(r.nodes, function() {
|
|
if ($.inArray(this.place_id, mapSearch._ids) != -1) {
|
|
return;
|
|
}
|
|
var iconImage = toolKit.getPoiIcon(this.type)
|
|
var markerHTML = this.display_name.replace(',', '<br />');
|
|
if (iconImage) {
|
|
var marker = L.marker([this.lat * 1, this.lon * 1], {
|
|
icon : iconImage
|
|
});
|
|
} else {
|
|
var marker = new L.marker([this.lat * 1, this.lon * 1]);
|
|
}
|
|
toolKit.addMarker(marker, markerHTML)
|
|
mapSearch.searchItems.push(marker);
|
|
mapSearch._ids.push(this.place_id)
|
|
|
|
});
|
|
|
|
},
|
|
|
|
clearSearchResults : function() {
|
|
for ( i = 0; i < mapSearch.searchItems.length; i++) {
|
|
map.removeLayer(mapSearch.searchItems[i]);
|
|
}
|
|
mapSearch.searchItems = []
|
|
}
|
|
}
|
|
|
|
Maps = {
|
|
addressbooks : [],
|
|
tempArr : [],
|
|
tempCounter : 0,
|
|
tempTotal : 0,
|
|
activeLayers : [],
|
|
poiMarker : [],
|
|
overpassLayers : [],
|
|
mouseDowntime : 0,
|
|
droppedPin : {},
|
|
dragging : false,
|
|
activeDevices : [],
|
|
deviceMarkers : [],
|
|
trackMarkers : {},
|
|
trackingTimer : {},
|
|
deviceTimer : 0,
|
|
historyTrack : {},
|
|
traceDevice : null,
|
|
arrowHead : {},
|
|
displayPoiIcons : function(zoomLevel) {
|
|
$.each(poiLayers, function(i, layer) {
|
|
$.each(layer, function(group, values) {
|
|
$.each(values, function(j, value) {
|
|
var overpassLayer = new L.OverPassLayer({
|
|
minZoom: 9,
|
|
query: 'node({{bbox}})[' + group + '=' + value + '];out;',
|
|
onSuccess: function(data) {
|
|
for ( i = 0; i < data.elements.length; i++) {
|
|
e = data.elements[i];
|
|
if (e.id in this.instance._ids) {
|
|
return;
|
|
}
|
|
this.instance._ids[e.id] = true;
|
|
var pos = new L.LatLng(e.lat, e.lon);
|
|
var popup = Maps.getPoiPopupHTML(e.tags).innerHTML;
|
|
poiIcon = toolKit.getPoiIcon(value);
|
|
if (poiIcon) {
|
|
var marker = L.marker(pos, {
|
|
icon : poiIcon,
|
|
}).bindPopup(popup);
|
|
Maps.poiMarker.push(marker);
|
|
toolKit.addMarker(marker, popup)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
map.addLayer(overpassLayer);
|
|
Maps.overpassLayers.push(overpassLayer);
|
|
});
|
|
});
|
|
});
|
|
},
|
|
hidePoiIcons : function() {
|
|
$.each(Maps.overpassLayers, function(i, layer) {
|
|
map.removeLayer(layer);
|
|
});
|
|
Maps.overpassLayers = [];
|
|
$.each(Maps.poiMarker, function(i, marker) {
|
|
map.removeLayer(marker);
|
|
});
|
|
Maps.poiMarker = [];
|
|
},
|
|
getPoiPopupHTML : function(tags) {
|
|
var div = document.createElement('div');
|
|
var title = document.createElement('h2');
|
|
if(tags['name']) title.appendChild(document.createTextNode(tags['name']));
|
|
div.appendChild(title);
|
|
var addr = '';
|
|
if(tags['addr:street']) addr += tags['addr:street'];
|
|
if(tags['addr:housenumber']) addr += ' ' + tags['addr:housenumber'];
|
|
if(tags['addr:postcode']) addr += ', ' + tags['addr:postcode'];
|
|
if(tags['addr:city']) addr += ' ' + tags['addr:city'];
|
|
div.appendChild(document.createTextNode(addr));
|
|
if(tags['phone']) {
|
|
var phoneDiv = document.createElement('div');
|
|
var phone = document.createElement('a');
|
|
var phoneN = tags['phone'];
|
|
if(phoneN.startsWith('+')) phoneN = phoneN.substring(1);
|
|
phone.setAttribute('href', 'tel://' + phoneN);
|
|
phone.appendChild(document.createTextNode(tags['phone']));
|
|
phoneDiv.appendChild(phone);
|
|
div.appendChild(phoneDiv);
|
|
}
|
|
if(tags['website']) {
|
|
var webDiv = document.createElement('div');
|
|
var web = document.createElement('a');
|
|
var webN = tags['website'];
|
|
web.setAttribute('href', webN);
|
|
web.appendChild(document.createTextNode(webN));
|
|
webDiv.appendChild(web);
|
|
div.appendChild(webDiv);
|
|
}
|
|
if(tags['email']) {
|
|
var mailDiv = document.createElement('div');
|
|
var mail = document.createElement('a');
|
|
var mailN = tags['email'];
|
|
mail.setAttribute('href', 'mailto:' + mailN);
|
|
mail.appendChild(document.createTextNode(mailN));
|
|
mailDiv.appendChild(mail);
|
|
div.appendChild(mailDiv);
|
|
}
|
|
return div;
|
|
},
|
|
loadAdressBooks : function() {
|
|
if($('#contactMenu').length == 0) return;
|
|
Maps.addressbooks = [];
|
|
$.get(OC.generateUrl('apps/contacts/addressbooks/'), function(r) {
|
|
$.each(r.addressbooks, function() {
|
|
var book = {
|
|
'id' : this.id,
|
|
'backend' : this.backend
|
|
}
|
|
Maps.addressbooks.push(book);
|
|
})
|
|
Maps.loadContacts();
|
|
})
|
|
},
|
|
removePosistionHistory : function(deviceId) {
|
|
for ( i = 0; i < Maps.trackMarkers[deviceId].length; i++) {
|
|
map.removeLayer(Maps.trackMarkers[deviceId][i]);
|
|
}
|
|
if (Maps.historyTrack[deviceId]) {
|
|
map.removeLayer(Maps.historyTrack[deviceId]);
|
|
map.removeLayer(Maps.arrowHead[deviceId]);
|
|
}
|
|
clearTimeout(Maps.trackingTimer[deviceId]);
|
|
},
|
|
|
|
loadDevicePosistionHistory : function(deviceId, trackCurrentPosition, from, till) {
|
|
var trackCurrentPosition = (trackCurrentPosition) ? true : false;
|
|
var from = (from) ? from : '';
|
|
var till = (till) ? till : '';
|
|
var data = {
|
|
devices : deviceId,
|
|
'from' : from,
|
|
'till' : till
|
|
};
|
|
|
|
if (!Maps.trackMarkers[deviceId]) {
|
|
Maps.trackMarkers[deviceId] = [];
|
|
Maps.arrowHead[deviceId] = [];
|
|
Maps.historyTrack[deviceId] = [];
|
|
Maps.trackingTimer[deviceId] = [];
|
|
}
|
|
|
|
clearTimeout(Maps.trackingTimer);
|
|
$.get(OC.generateUrl('/apps/maps/api/1.0/location/loadLocations'), data, function(response) {
|
|
var locations = response[deviceId];
|
|
var points = [];
|
|
var bounds = []
|
|
var lastPosition = locations[0];
|
|
for ( i = 0; i < Maps.trackMarkers[deviceId].length; i++) {
|
|
map.removeLayer(Maps.trackMarkers[deviceId][i]);
|
|
}
|
|
if (Maps.historyTrack[deviceId]) {
|
|
map.removeLayer(Maps.historyTrack[deviceId]);
|
|
map.removeLayer(Maps.arrowHead[deviceId]);
|
|
}
|
|
if (locations.length === 0) {
|
|
OC.Notification.showTimeout('No results');
|
|
return;
|
|
}
|
|
var lastPObject = L.latLng(lastPosition.lat, lastPosition.lng) //distanceTo
|
|
$.each(locations, function(k, location) {
|
|
var markerHTML = '';
|
|
var marker = new L.marker([location.lat * 1, location.lng * 1]);
|
|
var point = new L.LatLng(location.lat * 1, location.lng * 1);
|
|
//bounds.push(marker.getBounds());
|
|
var markerHTML = location.name + '<br />';
|
|
markerHTML += 'Lat: ' + location.lat + ' Lon: ' + location.lng + '<br />';
|
|
markerHTML += 'Speed: ' + location.speed + '<br />'
|
|
markerHTML += 'Time: ' + new Date(location.timestamp * 1000).toLocaleString("nl-NL")
|
|
var marker = new L.marker([location.lat * 1, location.lng * 1]);
|
|
if(Math.round(lastPObject.distanceTo(point))> 15){ //If markers are more then 15m between each other
|
|
console.log('Distance from last point: ',Math.round(lastPObject.distanceTo(point)));
|
|
Maps.trackMarkers[location.deviceId].push(marker);
|
|
toolKit.addMarker(marker, markerHTML);
|
|
points.push(point);
|
|
}
|
|
lastPObject = point;
|
|
});
|
|
points.reverse();
|
|
Maps.historyTrack[deviceId] = new L.Polyline(points, {
|
|
color : 'green',
|
|
weight : 6,
|
|
opacity : 0.5,
|
|
smoothFactor : 1
|
|
|
|
});
|
|
Maps.historyTrack[deviceId].addTo(map);
|
|
Maps.arrowHead[deviceId] = L.polylineDecorator(Maps.historyTrack[deviceId]).addTo(map);
|
|
Maps.arrowHead[deviceId].setPatterns([{
|
|
offset : '0%',
|
|
repeat : 100,
|
|
symbol : L.Symbol.arrowHead({
|
|
pixelSize : 25,
|
|
polygon : false,
|
|
pathOptions : {
|
|
stroke : true
|
|
}
|
|
})
|
|
}]);
|
|
Maps.trackingTimer[deviceId] = setTimeout(function() {
|
|
Maps.loadDevicePosistionHistory(deviceId, trackCurrentPosition, from, till);
|
|
}, 60000)
|
|
if (trackCurrentPosition && lastPosition.deviceId == Maps.traceDevice) {
|
|
map.panTo(new L.LatLng(lastPosition.lat, lastPosition.lng));
|
|
}
|
|
});
|
|
},
|
|
clearDevicePosistionHistory : function(deviceId) {
|
|
for ( i = 0; i < Maps.trackMarkers[deviceId].length; i++) {
|
|
map.removeLayer(Maps.trackMarkers[deviceId][i]);
|
|
}
|
|
map.removeLayer(Maps.historyTrack[deviceId]);
|
|
map.removeLayer(Maps.arrowHead[deviceId]);
|
|
clearTimeout(Maps.trackingTimer[deviceId]);
|
|
Maps.trackMarkers[deviceId] = [];
|
|
},
|
|
loadDevicesLastPosition : function() {
|
|
var data = {
|
|
devices : Maps.activeDevices.join(','),
|
|
limit : 1
|
|
};
|
|
clearTimeout(Maps.deviceTimer);
|
|
if (Maps.activeDevices.length > 0) {
|
|
$.get(OC.generateUrl('/apps/maps/api/1.0/location/loadLocations'), data, function(response) {
|
|
Maps.clearDevicePositions();
|
|
$.each(response, function(deviceId, location) {
|
|
console.log(deviceId, location);
|
|
var device = location[0];
|
|
if (!device)
|
|
return;
|
|
|
|
var markerHTML = device.name + '<br />';
|
|
markerHTML += 'Lat: ' + device.lat + ' Lon: ' + device.lng + '<br />';
|
|
markerHTML += 'Speed: ' + device.speed + '<br />'
|
|
markerHTML += 'Time: ' + new Date(device.timestamp * 1000).toLocaleString("nl-NL")
|
|
var marker = new L.marker([device.lat * 1, device.lng * 1]);
|
|
toolKit.addMarker(marker, markerHTML)
|
|
Maps.deviceMarkers.push(marker);
|
|
if (device.deviceId == Maps.traceDevice) {
|
|
map.panTo(new L.LatLng(device.lat * 1, device.lng * 1));
|
|
}
|
|
});
|
|
Maps.deviceTimer = setTimeout(Maps.loadDevicesLastPosition, 60000);
|
|
});
|
|
}
|
|
},
|
|
clearDevicePositions : function() {
|
|
for ( i = 0; i < Maps.deviceMarkers.length; i++) {
|
|
map.removeLayer(Maps.deviceMarkers[i]);
|
|
}
|
|
Maps.deviceMarkers = [];
|
|
},
|
|
|
|
loadContacts : function() {
|
|
Maps.tempArr = [];
|
|
Maps.tempTotal = 0;
|
|
Maps.tempCounter = 0;
|
|
$.each(Maps.addressbooks, function(ai) {
|
|
$.get(OC.generateUrl('/apps/contacts/addressbook/' + this.backend + '/' + this.id + '/contacts'), function(r) {
|
|
$.each(r.contacts, function(ci) {
|
|
Maps.tempArr.push(this);
|
|
if (ai == Maps.addressbooks.length - 1 && ci == r.contacts.length - 1) {
|
|
Maps.getContactPositionData();
|
|
Maps.tempTotal = Maps.tempArr.length;
|
|
$('#loadingContacts').show();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
},
|
|
getContactPositionData : function() {
|
|
|
|
if (Maps.tempArr.length > 0) {
|
|
temp = Maps.tempArr.pop();
|
|
var contact = toolKit.vcardToObject(temp);
|
|
toolKit.adresLookup(contact.adr, function(d) {
|
|
var curperson = $.extend({}, d, contact);
|
|
try {
|
|
toolKit.addFavContactMarker(curperson);
|
|
} catch(e) {
|
|
|
|
}
|
|
var total = Maps.tempTotal;
|
|
var index = Maps.tempCounter
|
|
var percent = Math.round((index / total * 100) * 100) / 100;
|
|
toolKit.setProgress(percent);
|
|
$('#cCounter').text(index + 1 + ' of ' + (total * 1 + 1));
|
|
Maps.tempCounter++;
|
|
if (index == total)
|
|
$('#loadingContacts').hide()
|
|
Maps.getContactPositionData();
|
|
})
|
|
}
|
|
},
|
|
|
|
saveCurrentLocation : function(e) {
|
|
var center = map.getBounds().getCenter();
|
|
var location = {
|
|
lat : center.lat,
|
|
lng : center.lng
|
|
};
|
|
$.jStorage.set('location', location)
|
|
$.jStorage.set('zoom', e.target._zoom)
|
|
},
|
|
|
|
showContact : function(data) {
|
|
|
|
}
|
|
}
|
|
toolKit = {
|
|
addMarker : function(marker, markerHTML, openPopup, fav) {
|
|
if(marker == null || marker._latlng == null) return;
|
|
fav = fav || false;
|
|
var openPopup = (openPopup) ? true : false;
|
|
var latlng = marker._latlng.lat + ',' + marker._latlng.lng;
|
|
var markerHTML2 = '<div class="';
|
|
if(fav) {
|
|
markerHTML2 += 'icon-starred removeFromFav" fav-id="' + marker.options.id + '"';
|
|
var editButton = document.createElement('button');
|
|
editButton.className = 'icon-rename editFav';
|
|
var titleEnd = markerHTML.indexOf('</h2>') + 5;
|
|
markerHTML = markerHTML.slice(0, titleEnd) + editButton.outerHTML + markerHTML.slice(titleEnd);
|
|
} else {
|
|
markerHTML2 += 'icon-star addToFav"';
|
|
}
|
|
markerHTML2 += ' data-latlng="' + latlng + '" style="float: left;"></div><div class="marker-popup-content">' + markerHTML + '</div><div><a class="setDestination" data-latlng="' + latlng + '">Navigate here</a></div>';
|
|
marker.addTo(map).bindPopup(markerHTML2);
|
|
marker.on('mouseover', function (e) {
|
|
var tgt = e.originalEvent.fromElement || e.originalEvent.relatedTarget;
|
|
var parent = this._getParent(tgt, 'leaflet-popup');
|
|
if(parent == marker._popup._container) return true;
|
|
marker.openPopup();
|
|
}, this);
|
|
marker.on('mouseout', function (e) {
|
|
var tgt = e.originalEvent.toElement || e.originalEvent.relatedTarget;
|
|
if(this._getParent(tgt, 'leaflet-popup')) {
|
|
L.DomEvent.on(marker._popup._container, 'mouseout', this._popupMouseOut, this);
|
|
return true;
|
|
}
|
|
marker.closePopup();
|
|
}, this);
|
|
if (openPopup === true) {
|
|
setTimeout(function() {
|
|
//L.popup().setLatLng([marker._latlng.lat, marker._latlng.lng]).setContent("I am a standalone popup.").openOn(map);
|
|
marker.openPopup();
|
|
}, 50);
|
|
}
|
|
},
|
|
_getParent: function(element, className) {
|
|
var parent = element.parentNode;
|
|
while (parent != null) {
|
|
if (parent.className && L.DomUtil.hasClass(parent, className))
|
|
return parent;
|
|
parent = parent.parentNode;
|
|
}
|
|
return false;
|
|
},
|
|
_popupMouseOut: function(e) {
|
|
if(marker == null) return false;
|
|
L.DomEvent.off(marker._popup, 'mouseout', this._popupMouseOut, this);
|
|
var tgt = e.toElement || e.relatedTarget;
|
|
if (this._getParent(tgt, 'leaflet-popup')) return true;
|
|
if (tgt == this._icon) return true;
|
|
marker.closePopup();
|
|
},
|
|
getPoiIcon : function(icon) {
|
|
return toolKit.toMakiMarkerIcon(icon.replace(' ', ''));
|
|
},
|
|
|
|
toMakiMarkerIcon : function(type) {
|
|
var mapper = {
|
|
'aerialway' : [ 'aerialway' ],
|
|
'airfield' : [ 'airfield' ],
|
|
'airport' : [ 'airport' ],
|
|
'alcohol-shop' : [ 'alcohol-shop', 'alcohol', 'beverages' ],
|
|
'america-football' : [ 'america-football' ],
|
|
'art-gallery' : [ 'art-gallery', 'gallery', 'artwork', 'paint' ],
|
|
'bakery' : [ 'bakery' ],
|
|
'bank' : [ 'bank', 'atm' ],
|
|
'bar' : [ 'bar' ],
|
|
'baseball' : [ 'baseball' ],
|
|
'basketball' : [ 'basketball' ],
|
|
'beer' : [ 'beer', , 'biergarten', 'pub' ],
|
|
'bicycle' : [ 'bicycle', 'bicycle_parking' ],
|
|
'building' : [ 'building' ],
|
|
'bus' : [ 'bus', 'bus_stop', 'bus_station'],
|
|
'cafe' : [ 'cafe' ],
|
|
'camera' : [ 'camera', 'viewpoint' ],
|
|
'campsite' : [ 'campsite', 'camp_site', 'caravan_site' ],
|
|
'car' : [ 'car' ],
|
|
'cemetery' : [ 'cemetery' ],
|
|
'chemist' : [ 'chemist' ],
|
|
'cinema' : [ 'cinema' ],
|
|
'circle' : [ 'circle' ],
|
|
'circle-stroked' : [ 'circle-stroked' ],
|
|
'city' : [ 'city' ],
|
|
'clothing-store' : [ 'clothing-store', 'clothes' ],
|
|
'college' : [ 'college' ],
|
|
'commercial' : [ 'commercial' ],
|
|
'cricket' : [ 'cricket' ],
|
|
'cross' : [ 'cross' ],
|
|
'dam' : [ 'dam' ],
|
|
'danger' : [ 'danger' ],
|
|
'dentist' : [ 'dentist' ],
|
|
'disability' : [ 'disability' ],
|
|
'dog-park' : [ 'dog-park' ],
|
|
'embassy' : [ 'embassy' ],
|
|
'emergency-telephone' : [ 'emergency-telephone' ],
|
|
'entrance' : [ 'entrance' ],
|
|
'farm' : [ 'farm' ],
|
|
'fast-food' : [ 'fast-food' ],
|
|
'ferry' : [ 'ferry' ],
|
|
'fire-station' : [ 'fire-station', 'fire_station' ],
|
|
'fuel' : [ 'fuel' ],
|
|
'garden' : [ 'garden' ],
|
|
'gift' : [ 'gift' ],
|
|
'golf' : [ 'golf' ],
|
|
'grocery' : [ 'grocery', 'supermarket', 'deli', 'convenience', 'greengrocer', 'fishmonger', 'butcher', 'marketplace' ],
|
|
'hairdresser' : [ 'hairdresser' ],
|
|
'harbor' : [ 'harbor' ],
|
|
'heart' : [ 'heart' ],
|
|
'heliport' : [ 'heliport' ],
|
|
'hospital' : [ 'hospital' ],
|
|
'ice-cream' : [ 'ice-cream' ],
|
|
'industrial' : [ 'industrial' ],
|
|
'land-use' : [ 'land-use' ],
|
|
'laundry' : [ 'laundry' ],
|
|
'library' : [ 'library', 'books' ],
|
|
'lighthouse' : [ 'lighthouse' ],
|
|
'lodging' : [ 'lodging', 'hotel', 'guest_house', 'hostel', 'motel' ],
|
|
'logging' : [ 'logging' ],
|
|
'london-underground' : [ 'london-underground' ],
|
|
'marker' : [ 'marker' ],
|
|
'marker-stroked' : [ 'marker-stroked' ],
|
|
'minefield' : [ 'minefield' ],
|
|
'mobilephone' : [ 'mobilephone', 'mobile_phone', 'gsm' ],
|
|
'monument' : [ 'monument' ],
|
|
'museum' : [ 'museum' ],
|
|
'music' : [ 'music' ],
|
|
'oil-well' : [ 'oil-well' ],
|
|
'park' : [ 'park' ],
|
|
'parking' : [ 'parking' ],
|
|
'parking-garage' : [ 'parking-garage', 'parking-entrance' ],
|
|
'pharmacy' : [ 'pharmacy', 'drugstore' ],
|
|
'pitch' : [ 'pitch', 'sports' ],
|
|
'place-of-worship' : [ 'place-of-worship', 'place_of_worship' ],
|
|
'playground' : [ 'playground' ],
|
|
'police' : [ 'police' ],
|
|
'polling-place' : [ 'polling-place' ],
|
|
'post' : [ 'post', 'post_box', 'post_office' ],
|
|
'prison' : [ 'prison' ],
|
|
'rail' : [ 'rail' ],
|
|
'rail-above' : [ 'rail-above' ],
|
|
'rail-light' : [ 'rail-light' ],
|
|
'rail-metro' : [ 'rail-metro' ],
|
|
'rail-underground' : [ 'rail-underground' ],
|
|
'religious-christian' : [ 'religious-christian' ],
|
|
'religious-jewish' : [ 'religious-jewish' ],
|
|
'religious-muslim' : [ 'religious-muslim' ],
|
|
'restaurant' : [ 'restaurant' ],
|
|
'roadblock' : [ 'roadblock' ],
|
|
'rocket' : [ 'rocket' ],
|
|
'school' : [ 'school', 'kindergarten' ],
|
|
'scooter' : [ 'scooter' ],
|
|
'shop' : [ 'shop', 'general', 'bag', 'furniture', 'variety_store', 'houseware', 'department_store', 'florist', 'outdoor', 'kiosk', 'kitchen', 'shoes', 'jewelry', 'sports' ],
|
|
'skiing' : [ 'skiing' ],
|
|
'slaughterhouse' : [ 'slaughterhouse' ],
|
|
'soccer' : [ 'soccer' ],
|
|
'square' : [ 'square' ],
|
|
'square-stroked' : [ 'square-stroked' ],
|
|
'star' : [ 'star' ],
|
|
'star-stroked' : [ 'star-stroked' ],
|
|
'suitcase' : [ 'suitcase' ],
|
|
'swimming' : [ 'swimming', 'swimming_pool' ],
|
|
'telephone' : [ 'telephone', 'phone' ],
|
|
'tennis' : [ 'tennis' ],
|
|
'theatre' : [ 'theatre' ],
|
|
'toilets' : [ 'toilets' ],
|
|
'town' : [ 'town' ],
|
|
'town-hall' : [ 'town-hall', 'townhall' ],
|
|
'triangle' : [ 'triangle' ],
|
|
'triangle-stroked' : [ 'triangle-stroked' ],
|
|
'village' : [ 'village' ],
|
|
'warehouse' : [ 'warehouse' ],
|
|
'waste-basket' : [ 'waste-basket' ],
|
|
'water' : [ 'water' ],
|
|
'wetland' : [ 'wetland' ],
|
|
'zoo' : [ 'zoo' ]
|
|
}
|
|
var iconUrl = OC.filePath('maps', 'vendor', 'maki/src/');
|
|
var iconSuffix = '-18.svg';
|
|
var name;
|
|
var icon;
|
|
$.each(mapper, function(iconName, types) {
|
|
if (types.indexOf(type) > -1) {
|
|
name = iconName;
|
|
icon = iconUrl + iconName + iconSuffix;
|
|
return false;
|
|
}
|
|
})
|
|
return L.icon({
|
|
className: type + ' maki-icon',
|
|
icon: name,
|
|
iconUrl : icon,
|
|
iconSize : [18, 18],
|
|
iconAnchor : [9, 18],
|
|
popupAnchor : [0, -18]
|
|
});
|
|
},
|
|
toFAClass : function(type) {
|
|
var mapper = {
|
|
'shopping-cart' : ['supermarkt', 'supermarket', 'department_store', 'deli'],
|
|
'medkit' : ['hospital'],
|
|
'cutlery' : ['fast_food', 'restaurant'],
|
|
'beer' : ['pub'],
|
|
'credit-card' : ['atm'],
|
|
'graduation-cap' : ['school'],
|
|
'lightbulb-o' : ['electronics'],
|
|
'cut' : ['hairdresser'],
|
|
'info' : ['information'],
|
|
'refresh' : ['recycling'],
|
|
'asterisk' : ['attraction', 'theme_park'],
|
|
'cogs' : ['car_repair'],
|
|
'wrench' : ['doityourself'],
|
|
'music' : ['hifi'],
|
|
'gift' : ['gift'],
|
|
'globe' : ['travel_agency'],
|
|
'minus' : ['bench', 'picnic_site'],
|
|
'desktop' : ['computer'],
|
|
'eye' : ['optician'],
|
|
'cubes' : ['toys'],
|
|
'file-picture' : ['photo'],
|
|
'copy' : ['copyshop'],
|
|
'paw' : ['pet'],
|
|
'clock-o' : ['clock'],
|
|
'key' : ['locksmith'],
|
|
'video-camera' : ['video'],
|
|
'magic' : ['party'],
|
|
'road' : ['living_street'],
|
|
'home' : ['residential']
|
|
}
|
|
var returnClass = false;
|
|
$.each(mapper, function(faClass, types) {
|
|
if (types.toString().indexOf(type) > -1) {
|
|
returnClass = faClass
|
|
} else {
|
|
}
|
|
})
|
|
if (returnClass == false)
|
|
console.log('Type icon not found: ' + type)
|
|
return returnClass;
|
|
},
|
|
vcardToObject : function(vcard) {
|
|
var contact = {};
|
|
|
|
$.each(vcard.data, function(k, v) {
|
|
if(vcard.data.photo == true){
|
|
var uid = vcard.metadata['id'];
|
|
var parent = vcard.metadata['parent'];
|
|
var backend = vcard.metadata['backend'];
|
|
contact.thumbnail = 'apps/contacts/addressbook/' + backend + '/' + parent + '/contact/' + uid + '/photo';
|
|
contact.thumbnail = OC.generateUrl(contact.thumbnail);
|
|
}
|
|
if (v[0]) {
|
|
if ($.isArray(v[0]['value'])) {
|
|
if (k === 'ADR') {
|
|
var adr = {
|
|
street : v[0]['value'][0] + v[0]['value'][1] + v[0]['value'][2],
|
|
city : v[0]['value'][3],
|
|
postalCode : v[0]['value'][5],
|
|
country : v[0]['value'][6]
|
|
}
|
|
contact[k.toLowerCase()] = adr;
|
|
} else {
|
|
contact[k.toLowerCase()] = v[0]['value'].clean('').join(',');
|
|
}
|
|
} else {
|
|
contact[k.toLowerCase()] = v[0]['value'];
|
|
}
|
|
} else {
|
|
console.log(k, v)
|
|
}
|
|
})
|
|
return contact;
|
|
},
|
|
/**
|
|
*
|
|
* @param {Object} street+houseno,City,Country
|
|
* @param {Function} callback func
|
|
*/
|
|
adresLookup : function(address, callback) {
|
|
|
|
if(address !== undefined){
|
|
var getData = {
|
|
street : address.street,
|
|
city : address.city,
|
|
country : address.country
|
|
}
|
|
} else {
|
|
var getData = null;
|
|
}
|
|
$.getJSON(OC.generateUrl('/apps/maps/adresslookup'), getData, function(r) {
|
|
callback(r)
|
|
})
|
|
},
|
|
currentMarker : null,
|
|
favMarkers : [],
|
|
addFavContactMarker : function(contact) {
|
|
if (contact.thumbnail) {
|
|
var imagePath = contact.thumbnail
|
|
var iconImage = L.icon({
|
|
iconUrl : imagePath,
|
|
iconSize : [42, 49],
|
|
iconAnchor : [21, 49],
|
|
popupAnchor : [0, -49],
|
|
className : 'contact-icon'
|
|
});
|
|
} else {
|
|
var imagePath = OC.filePath('maps', 'img', 'icons/marker_anonPerson.png');
|
|
var iconImage = L.icon({
|
|
iconUrl : imagePath,
|
|
iconSize : [42, 49],
|
|
iconAnchor : [21, 49],
|
|
popupAnchor : [0, -49]
|
|
});
|
|
}
|
|
|
|
var markerHTML = '<h2>' + contact.fn + "</h2>";
|
|
var street = (contact.adr.street) ? contact.adr.street : '';
|
|
var city = (contact.adr.city) ? contact.adr.city : '';
|
|
markerHTML += '<br />' + street + " " + city;
|
|
markerHTML += (contact.tel) ? '<br />Tel: ' + escape(contact.tel) : '';
|
|
var marker = L.marker([contact.lat * 1, contact.lon * 1], {
|
|
icon : iconImage
|
|
});
|
|
toolKit.addMarker(marker, markerHTML)
|
|
toolKit.favMarkers.push(marker);
|
|
},
|
|
removeFavMarkers : function() {
|
|
for ( i = 0; i < toolKit.favMarkers.length; i++) {
|
|
map.removeLayer(toolKit.favMarkers[i]);
|
|
}
|
|
toolKit.favMarkers = []
|
|
},
|
|
|
|
setProgress : function(percent) {
|
|
var $element = $('#progressBar');
|
|
var progressBarWidth = percent * $element.width() / 100;
|
|
$element.find('div').animate({
|
|
width : progressBarWidth
|
|
}, 50);
|
|
}
|
|
}
|
|
|
|
poiLayers = {
|
|
9 : {
|
|
shop : [
|
|
'supermarket', 'bicycle'
|
|
],
|
|
amenity : [
|
|
'atm', 'coffee_shop', 'restaurant', 'swimming_pool', 'library', 'toilets', 'post_box', 'bar'
|
|
],
|
|
tourism : [
|
|
'hotel'
|
|
]
|
|
},
|
|
10 : {},
|
|
11: {},
|
|
12 : {},
|
|
13 : {},
|
|
14 : {},
|
|
15 : {}
|
|
},
|
|
|
|
poiTypes = {
|
|
shop : ['atm', 'coffee_shop', 'restaurant', 'supermarket', 'bicycle', 'hotel', 'swimming_pool', 'library', 'toilets', 'post_box', 'bar'],
|
|
//TODO: define proper categories:
|
|
// Restaurants/food/coffeeshops/bars, Hotels/hostels, Touristic sites, Wifi, Transport, Fuel, Parking, Supermarket, ATM/Bank, Entertainment, Hospital/Pharmacy, Police, Toilets, Post
|
|
//shop : ['supermarket', 'bakery', 'car', 'stationery', 'hairdresser', 'mobile_phone', 'convenience', 'newsagent', 'kiosk', 'computer', 'clothes', 'variety_store', 'hearing_aids', 'florist', 'handicraft', 'candle', 'antique', 'pet', 'massage', 'electronics', 'laundry', 'doityourself', 'sports', 'jewelry', 'musical_instrument', 'chemist', 'shoes', 'beverages', 'toys', 'fishing', 'copyshop', 'beauty', 'bag', 'paint', 'bicycle', 'communication', 'furniture', 'alcohol', 'deli', 'optician', 'books', 'car_repair', 'butcher', 'outdoor', 'motorcycle', 'estate_agent', 'photo', 'gift', 'travel_agency', 'tea', 'wine', 'medical_supply', 'department_store', 'dry_cleaning', 'video', 'second_hand', 'greengrocer', 'erotic', 'curtain', 'haberdashery', 'garden_centre', 'art', 'fashion', 'bags', 'accessoires', 'confectionery', 'ice_cream', 'organic', 'music', 'boutique', 'interior', 'kitchen', 'vacant', 'tattoo', 'mall', 'camera', 'gallery', 'rc_models', 'coffee', 'bicycle_rental', 'photographer', 'ticket', 'charity', 'Shisha', 'hats', 'funeral_directors', 'locksmith', 'fabric', 'hardware', 'shoe_repair', 'hifi', 'fabrics', 'tailor', 'anime', 'market', 'grocery', 'no', 'surf', 'tobacco', 'animals', 'currency_exchange', 'souvenirs', 'internet-tele-cafe', 'photography', 'car_parts', 'antiques', 'bed', 'skating', 'ceramics', 'internet cafe', 'frame', 'brushes', 'fish', 'callshop', 'glass', 'comics', 'pottery', 'internet_cafe', 'stamps', 'radiotechnics', 'interior_decoration', 'carrental', 'interior_design', 'gramophone', 'Trödel', 'unused', 'watches', 'jewellery', 'tatoo', 'travelling', 'telecommunication', 'cigarettes', 'sports food', 'perfumery', 'unknown', 'orthopedics', 'fire_extinguisher', 'fishmonger', 'wholesale', 'lights', 'carpet', 'office_supplies', 'parquet', 'porcelain', 'lamps', 'make-up', 'art_gallery', 'telecom', 'underwear', 'watch', 'tableware', 'scuba_diving', 'christmas', 'tanning', 'craft', 'leather', 'for rent', 'glaziery', 'seafood', 'Sicherheitstechnik', 'coffee machines', 'alteration', 'decoration', 'sport_bet', 'seefood', 'mobile phone service', 'window_blind', 'tyres', 'cheese', 'medical', 'sewing-machine', 'Kaugummi-Automaten', 'Kaugummi-Automat', 'baby', 'games', 'piercing', 'Elektrohaushaltsgeräte', 'electrician', 'glasses', 'circus', 'food', 'marine', 'lottery', 'Hockey', 'electric', 'coins', 'metal workshop', 'nails', 'general', 'tanning_salon', 'crafts', 'household', 'floor', 'baby_goods', 'Patissier', 'delicatessen', 'telephone', 'Hema', 'soft_drugs', 'board_games', 'lingerie', 'candy', 'cd', 'stones', 'spiritual', 'health', 'juice', 'hemp_products', 'smartshop', 'cannabis', 'frozen_yoghurt', 'art_supplies', 'cigar', 'department', 'sok_shop', 'realestate', 'lighting', 'generic', 'nail', 'ink', 'traiteur', 'toko', 'key', 'gsm', 'artist', 'hearth', 'framing', 'espresso_machine', 'knives', 'rental', 'thrift_store', 'snacks', 'tobacconist', 'disused:butcher', 'party', 'audiologist', 'housewares', 'Fashion', 'printing', 'chandler', 'Shoes', 'Electronics', 'softdrugs', 'houseware', 'textiles', 'perfume'],
|
|
//amenity : ["post_box", "police", "atm", "recycling", "parking", "fuel", "telephone", "school", "pub", "doctors", "arts_centre", "cafe", "fast_food", "restaurant", "place_of_worship", "bank", "bicycle_parking", "drinking_water", "theatre", "bar", "bench", "waste_disposal", "nightclub", "pharmacy", "bicycle_rental", "post_office", "charging_station", "waste_basket", "vending_machine", "kindergarten", "marketplace", "dentist", "ev_charging", "bureau_de_change", "library", "cinema", "toilets", "car_wash", "fountain", "boat_rental", "taxi", "bus_parking", "public_building", "driving_school", "physical therapy", "coffee_shop", "embassy", "vacant", "coffeeshop", "ice_cream", "car_rental", "swimming_pool", "university", "casino", "community_centre", "lost_found", "grit_bin", "clock", "parking_entrance", "sauna", "brothel", "ferry_terminal", "fitness_center", "bus_station", "college", "fire_station", "health_centre", "townhall", "hospital", "veterinary", "gym", "fablab", "money_transfer", "kitchen_studio", "tanning_salon", "tanning", "studio"],
|
|
//tourism : ["artwork", "hostel", "attraction", "hotel", "information", "museum", "gallery", "viewpoint", "picnic_site", "guest_house", "theme_park", "apartment", "zoo", "camp_site", "chalet", "motel", "citytour", "aquarium"]
|
|
}
|
|
|
|
mapSettings = {
|
|
openTrackingSettings : function() {
|
|
$.get(OC.generateUrl('/apps/maps/api/1.0/location/loadDevices'), function(d) {
|
|
var tableHTML;
|
|
$.each(d, function() {
|
|
tableHTML += '<tr><td>' + this.name + '</td><td>' + this.hash + '</td><td><div class="icon-delete icon" data-deviceId="' + this.id + '"></div></td></tr>';
|
|
});
|
|
$('#trackingDevices tbody').html(tableHTML);
|
|
})
|
|
$('#trackingSettingsPopup').dialog({
|
|
buttons : {
|
|
"Close" : function() {
|
|
$(this).dialog('destroy');
|
|
$('#addtracking')[0].reset()
|
|
}
|
|
}
|
|
|
|
});
|
|
},
|
|
saveDevice : function() {
|
|
if ($('#addtracking input').val() == '')
|
|
return
|
|
var formData = {
|
|
name : $('#addtracking input').val()
|
|
};
|
|
$.post(OC.generateUrl('/apps/maps/api/1.0/location/adddevice'), formData, function(d) {
|
|
$('#trackingDevices tbody').append('<tr><td>' + formData.name + '</td><td>' + d.hash + '</td><td><div class="icon-delete icon" data-deviceId="' + d.id + '"></div></td></tr>');
|
|
$('#addtracking input').val('');
|
|
});
|
|
},
|
|
|
|
deleteDevice : function(e) {
|
|
var dId = $(this).attr('data-deviceId');
|
|
$(this).parent().parent().remove();
|
|
///api/1.0/location/removedevice
|
|
var formData = {
|
|
deviceId : dId
|
|
};
|
|
$.post(OC.generateUrl('/apps/maps/api/1.0/location/removedevice'), formData);
|
|
|
|
}
|
|
}
|
|
|
|
favorites = {
|
|
favArray : [],
|
|
add : function(){
|
|
var latlng = $(this).attr('data-latlng').split(',');
|
|
var popup = document.getElementsByClassName('leaflet-popup-content')[0];
|
|
var favicon = popup.getElementsByTagName('div')[0];
|
|
var content = popup.getElementsByTagName('div')[1];
|
|
|
|
var popupText = content.innerHTML;
|
|
var delimiter = '<br>';
|
|
var splitIndex = popupText.indexOf(delimiter);
|
|
content.innerHTML = popupText.substring(splitIndex + delimiter.length);
|
|
var orgTitle = popupText.substring(0, splitIndex);
|
|
var formData = {
|
|
lat : latlng[0],
|
|
lng : latlng[1],
|
|
name : orgTitle
|
|
};
|
|
$.post(OC.generateUrl('/apps/maps/api/1.0/favorite/addToFavorites'), formData, function(data) {
|
|
var markerHTML = '<h2>' + formData.name + '</h2>';
|
|
var marker = L.marker([formData.lat, formData.lng], {
|
|
icon : favMarkerIcon,
|
|
id : data.id
|
|
});
|
|
map.removeLayer(currentMarker);
|
|
currentMarker = null;
|
|
toolKit.addMarker(marker, markerHTML, true, true);
|
|
favorites.favArray.push(marker);
|
|
});
|
|
},
|
|
show : function(){
|
|
$.post(OC.generateUrl('/apps/maps/api/1.0/favorite/getFavorites'), null, function(data){
|
|
for(var i=0; i<data.length; i++){
|
|
var fav = data[i];
|
|
|
|
var imagePath = OC.filePath('maps', 'img', 'icons/favMarker.png');
|
|
var iconImage = L.icon({
|
|
iconUrl : imagePath,
|
|
iconSize : [31, 37],
|
|
iconAnchor : [15, 37],
|
|
popupAnchor : [0, -37]
|
|
});
|
|
|
|
var markerHTML = '<h2>' + fav.name + '</h2>';
|
|
/*markerHTML += '<br />Latitude: ' + parseFloat(fav.lat).toFixed(3);
|
|
markerHTML += '<br />Longitude: ' + parseFloat(fav.lng).toFixed(3);
|
|
markerHTML += '<br />Added: ' + new Date(fav.timestamp*1000).toString();*/
|
|
var marker = L.marker([fav.lat, fav.lng], {
|
|
icon : iconImage,
|
|
id : fav.id
|
|
});
|
|
toolKit.addMarker(marker, markerHTML, false, true);
|
|
favorites.favArray.push(marker);
|
|
}
|
|
});
|
|
},
|
|
hide : function(){
|
|
for(var i=0; i<favorites.favArray.length; i++){
|
|
map.removeLayer(favorites.favArray[i]);
|
|
}
|
|
favorites.favArray = [];
|
|
},
|
|
remove : function(){
|
|
var id = $(this).attr('fav-id');
|
|
var formData = {
|
|
id : id
|
|
};
|
|
$.post(OC.generateUrl('/apps/maps/api/1.0/favorite/removeFromFavorites'), formData, function(data){
|
|
for(i=0; i<favorites.favArray.length; ++i) {
|
|
if(favorites.favArray[i].options.id == id) {
|
|
//TODO this code toggles the star icon and the add/remove methods. Should be used as soon as the marker replacement works
|
|
var popup = document.getElementsByClassName('leaflet-popup-content')[0];
|
|
var favicon = popup.getElementsByTagName('div')[0];
|
|
var newClass = favicon.className.replace('icon-starred', 'icon-star');
|
|
favicon.className = newClass.replace('removeFromFav', 'addToFav');
|
|
var removedFav = favorites.favArray.splice(i,1)[0];
|
|
addGeocodeMarker(removedFav.getLatLng());
|
|
map.removeLayer(removedFav);
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
edit : function() {
|
|
var popup = document.getElementsByClassName('leaflet-popup-content')[0];
|
|
var favicon = popup.getElementsByTagName('div')[0];
|
|
var id = favicon.getAttributeNode('fav-id').value;
|
|
var content = popup.getElementsByTagName('div')[1];
|
|
var titleNode = content.getElementsByTagName('h2')[0];
|
|
var title = titleNode.innerHTML;
|
|
var button = content.getElementsByClassName('editFav')[0];
|
|
var input = document.createElement('input');
|
|
input.type = 'text';
|
|
input.value = title;
|
|
titleNode.parentNode.replaceChild(input, titleNode);
|
|
button.className = 'confirmFavEdit icon-checkmark';
|
|
$(document).on('click', '.confirmFavEdit', function() {
|
|
button.className = 'icon-rename editFav';
|
|
if(title != input.value) title = input.value;
|
|
titleNode.innerHTML = title;
|
|
content.replaceChild(titleNode, input);
|
|
var formData = {
|
|
name : title,
|
|
id : id
|
|
};
|
|
$.post(OC.generateUrl('/apps/maps/api/1.0/favorite/updateFavorite'), formData, function(data){
|
|
});
|
|
$(document).off('click', '.confirmFavEdit');
|
|
});
|
|
}
|
|
}
|
|
|
|
$(document).on('click', '#tracking-settings', mapSettings.openTrackingSettings);
|
|
$(document).on('click', '#addtracking button', mapSettings.saveDevice);
|
|
$(document).on('click', '#trackingDevices .icon-delete', mapSettings.deleteDevice);
|
|
$(document).on('click', '.addToFav', favorites.add);
|
|
$(document).on('click', '.removeFromFav', favorites.remove);
|
|
$(document).on('click', '.editFav', favorites.edit)
|
|
|
|
/**
|
|
* Extend the OC.Notification object with our own methods
|
|
*/
|
|
OC.Notification.showTimeout = function(text, timeout, isHTML) {
|
|
isHTML = (!isHTML) ? false : true;
|
|
OC.Notification.hide();
|
|
if (OC.Notification.notificationTimer) {
|
|
clearTimeout(notificationTimer);
|
|
}
|
|
timeout = (!timeout) ? 3000 : timeout;
|
|
if (isHTML) {
|
|
OC.Notification.showHtml(text);
|
|
} else {
|
|
OC.Notification.show(text);
|
|
}
|
|
OC.Notification.notificationTimer = setTimeout(function() {
|
|
OC.Notification.hide();
|
|
}, timeout);
|
|
}
|
|
})(jQuery, OC);
|