You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2179 lines
98 KiB
2179 lines
98 KiB
(function () {
|
|
var mapNumber = 0,
|
|
currentProtocol = document.location.protocol,
|
|
errorLayers = [];
|
|
|
|
if (currentProtocol !== 'http:' && currentProtocol !== 'https:') {
|
|
currentProtocol = 'https:';
|
|
}
|
|
|
|
function getBaseLayers(tiles)
|
|
{
|
|
var layers = [], factories = {
|
|
openstreetmap: function () {
|
|
return new ol.layer.Tile({
|
|
source: new ol.source.OSM(),
|
|
title: 'OpenStreetMap'
|
|
});
|
|
},
|
|
bing_road: function () {
|
|
return new ol.layer.Tile({
|
|
source: new ol.source.BingMaps({ key: jqueryTiki.bingMapsAPIKey, imagerySet: 'Road' }),
|
|
title: 'BingRoad'
|
|
});
|
|
},
|
|
bing_road_on_demand: function () {
|
|
return new ol.layer.Tile({
|
|
source: new ol.source.BingMaps({ key: jqueryTiki.bingMapsAPIKey, imagerySet: 'RoadOnDemand' }),
|
|
title: 'BingRoadOnDemand'
|
|
});
|
|
},
|
|
bing_aerial: function () {
|
|
return new ol.layer.Tile({
|
|
source: new ol.source.BingMaps({ key: jqueryTiki.bingMapsAPIKey, imagerySet: 'Aerial' }),
|
|
title: 'BingAerial'
|
|
});
|
|
},
|
|
bing_aerial_with_labels: function () {
|
|
return new ol.layer.Tile({
|
|
source: new ol.source.BingMaps({ key: jqueryTiki.bingMapsAPIKey, imagerySet: 'AerialWithLabels' }),
|
|
title: 'BingAerialWithLabels'
|
|
});
|
|
},
|
|
bing_ordnance_survey: function () {
|
|
return new ol.layer.Tile({
|
|
source: new ol.source.BingMaps({ key: jqueryTiki.bingMapsAPIKey, imagerySet: 'ordnanceSurvey' }),
|
|
title: 'BingOrdnanceSurvey'
|
|
});
|
|
},
|
|
bing_collins_bart: function () { // doesn't seem to work?
|
|
return new ol.layer.Tile({
|
|
source: new ol.source.BingMaps({ key: jqueryTiki.bingMapsAPIKey, imagerySet: 'collinsBart' }),
|
|
title: 'BingCollinsBart'
|
|
});
|
|
},
|
|
nextzen: function () {
|
|
var nextzenRoadStyleCache = {},
|
|
nextzenStyle = function (feature, resolution) {
|
|
switch (feature.get('layer')) {
|
|
case 'water':
|
|
return new ol.style.Style({
|
|
fill: new ol.style.Fill({
|
|
color: '#9db9e8'
|
|
})
|
|
});
|
|
case 'buildings':
|
|
return (resolution < 10) ? new ol.style.Style({
|
|
fill: new ol.style.Fill({
|
|
color: '#bbb',
|
|
opacity: 0.4
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: '#999',
|
|
width: 1
|
|
})
|
|
}) : null;
|
|
case 'roads':
|
|
var kind = feature.get('kind');
|
|
var railway = feature.get('railway');
|
|
var sort_key = feature.get('sort_key');
|
|
var styleKey = kind + '/' + railway + '/' + sort_key;
|
|
var style = nextzenRoadStyleCache[styleKey];
|
|
if (!style) {
|
|
var color, width = 1;
|
|
if (railway || kind === "rail") {
|
|
color = "#7a5";
|
|
} else if (kind === "major_road"){
|
|
color = "#aaa";
|
|
} else if (kind === "minor_road"){
|
|
color = "#ccb";
|
|
} else if (kind === "path"){
|
|
color = "#ddd";
|
|
} else if (kind === "highway"){
|
|
color = "#f39";
|
|
width = 2;
|
|
} else if (kind === "ferry"){
|
|
color = "#448cff";
|
|
width = 2;
|
|
} else if (kind === "aeroway"){
|
|
color = "#999";
|
|
width = 3;
|
|
} else {
|
|
color = "#aaa";
|
|
console.log("Unknown road kind: " + kind);
|
|
}
|
|
style = new ol.style.Style({
|
|
stroke: new ol.style.Stroke({
|
|
color: color,
|
|
width: width
|
|
}),
|
|
zIndex: sort_key
|
|
});
|
|
nextzenRoadStyleCache[styleKey] = style;
|
|
}
|
|
return style;
|
|
default:
|
|
return null;
|
|
}
|
|
|
|
};
|
|
|
|
return new ol.layer.VectorTile({
|
|
source: new ol.source.VectorTile({
|
|
attributions: '© OpenStreetMap contributors, Who’s On First, ' +
|
|
'Natural Earth, and openstreetmapdata.com',
|
|
format: new ol.format.MVT({
|
|
layertitle: 'layer',
|
|
layers: ['water', 'roads', 'buildings']
|
|
}),
|
|
maxZoom: 19,
|
|
url: 'https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=' + jqueryTiki.nextzenAPIKey
|
|
}),
|
|
style: function (feature, resolution) {
|
|
return typeof window.nextzenStyle === "function" ? window.nextzenStyle(feature, resolution) : nextzenStyle(feature, resolution);
|
|
}
|
|
})
|
|
}
|
|
|
|
};
|
|
|
|
if (tiles.length === 0) {
|
|
tiles.push('openstreetmap');
|
|
}
|
|
|
|
var visible = true;
|
|
|
|
$.each(tiles, function (k, name) {
|
|
var getLayer = function (name) {
|
|
var f = factories[name], layer;
|
|
if (f) {
|
|
layer = f();
|
|
} else {
|
|
if (name.match(/stamen_/)) {
|
|
var flavor = name.substring(7);
|
|
|
|
layer = new ol.layer.Tile({
|
|
source: new ol.source.Stamen({
|
|
layer: flavor
|
|
}),
|
|
title: 'Stamen' + flavor
|
|
});
|
|
}
|
|
}
|
|
return layer;
|
|
};
|
|
|
|
if (typeof name === "object") {
|
|
var sublayers = [], names = [];
|
|
for (i = 0; i < name.length; i++) {
|
|
sublayers.push(getLayer(name[i]));
|
|
names.push(name[i]);
|
|
}
|
|
layers.push(new ol.layer.Group({
|
|
title: k,
|
|
combine: true,
|
|
visible: visible,
|
|
type: "base",
|
|
layers: sublayers
|
|
})
|
|
);
|
|
|
|
} else {
|
|
var lyr = getLayer(name);
|
|
if (lyr) {
|
|
lyr.set("visible", visible);
|
|
lyr.set("type", "base");
|
|
lyr.set("title", k);
|
|
layers.push(lyr);
|
|
} else {
|
|
errorLayers.push(name);
|
|
console.log(tr("Cannot create map layer: " + name));
|
|
}
|
|
}
|
|
visible = false;
|
|
});
|
|
|
|
return layers;
|
|
}
|
|
|
|
function parseCoordinates(value) {
|
|
var matching = value.match(/^(-?[0-9]*(\.[0-9]+)?),(-?[0-9]*(\.[0-9]+)?)(,(.*))?$/);
|
|
|
|
if (matching) {
|
|
var lat = parseFloat(matching[3]);
|
|
var lon = parseFloat(matching[1]);
|
|
var zoom = matching[6] ? parseInt(matching[6], 10) : 0;
|
|
|
|
return {lat: lat, lon: lon, zoom: zoom};
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function writeCoordinates(lonlat, map, fixProjection) {
|
|
var original = lonlat;
|
|
|
|
if (fixProjection) {
|
|
lonlat = lonlat.transform(
|
|
map.getView().getProjection(),
|
|
new ol.proj.Projection({ code: "EPSG:4326" })
|
|
);
|
|
|
|
if (! lonlat) {
|
|
lonlat = original;
|
|
}
|
|
}
|
|
|
|
let coords = lonlat.getCoordinates();
|
|
|
|
return formatLocation(coords[0], coords[1], map.getView().getZoom());
|
|
}
|
|
|
|
function formatLocation (lat, lon, zoom)
|
|
{
|
|
// Convert , decimal points - where those are used
|
|
var strLon = '' + lon;
|
|
strLon.replace(',', '.');
|
|
var strLat = '' + lat;
|
|
strLat.replace(',', '.');
|
|
return strLon + ',' + strLat + ',' + zoom;
|
|
}
|
|
|
|
$.fn.createMap = function () {
|
|
this.each(function () {
|
|
var id = $(this).attr('id'), container = this, desiredControls;
|
|
$(container).css('background', 'white');
|
|
|
|
container.getLayer = function (name) {
|
|
var vectors;
|
|
|
|
if (name) {
|
|
if (! container.layers[name]) {
|
|
// basic feature clustering
|
|
if ($(container).data("cluster")) {
|
|
var distance = $(container).data("cluster"),
|
|
clusterSource = new ol.source.Cluster({
|
|
distance: distance,
|
|
source: new ol.source.Vector({wrapX: false})
|
|
}),
|
|
clusterFillColor = $(container).data("clusterfillcolor"),
|
|
clusterTextColor = $(container).data("clustertextcolor");
|
|
|
|
if (clusterFillColor) {
|
|
clusterFillColor = clusterFillColor.split(",");
|
|
} else {
|
|
clusterFillColor = [86, 134, 200];
|
|
}
|
|
if (clusterTextColor) {
|
|
clusterTextColor = clusterTextColor.split(",");
|
|
} else {
|
|
clusterTextColor = [255, 255, 255];
|
|
}
|
|
var styleCache = {},
|
|
maxFeatureCount,
|
|
/**
|
|
* Calculate size of cluster depending on zoom extent
|
|
* based on https://openlayers.org/en/latest/examples/earthquake-clusters.html
|
|
* @param resolution
|
|
*/
|
|
calculateClusterInfo = function (resolution) {
|
|
maxFeatureCount = 0;
|
|
var features = vectors.getSource().getFeatures();
|
|
var feature, radius;
|
|
for (var i = features.length - 1; i >= 0; --i) {
|
|
feature = features[i];
|
|
var originalFeatures = feature.get('features');
|
|
var extent = ol.extent.createEmpty();
|
|
var j = (void 0), jj = (void 0);
|
|
for (j = 0, jj = originalFeatures.length; j < jj; ++j) {
|
|
ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent());
|
|
}
|
|
maxFeatureCount = Math.max(maxFeatureCount, jj);
|
|
radius = .4 * (ol.extent.getWidth(extent) + ol.extent.getHeight(extent)) / resolution;
|
|
feature.set('radius', radius);
|
|
}
|
|
},
|
|
createMarkerStyle = function (feature) {
|
|
if (feature.get("intent") === "marker") {
|
|
return new ol.style.Style({
|
|
geometry: feature.getGeometry(),
|
|
image: new ol.style.Icon({
|
|
anchor: [feature.get("offsetx"), feature.get("offsety")],
|
|
anchorXUnits: "pixels",
|
|
anchorYUnits: "pixels",
|
|
src: feature.get("url")
|
|
})
|
|
});
|
|
}
|
|
}, invisibleFill = new ol.style.Fill({
|
|
color: 'rgba(255, 255, 255, 0.01)'
|
|
}),
|
|
selectClusterFeaturesStyle = function (feature) {
|
|
var styles = [],
|
|
features = feature.get('features');
|
|
|
|
if (! features && feature) {
|
|
return createMarkerStyle(feature);
|
|
}
|
|
|
|
if (features.length > 1) {
|
|
styles.push(new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
radius: feature.get('radius'),
|
|
fill: invisibleFill
|
|
})
|
|
})
|
|
);
|
|
}
|
|
for (var i = features.length - 1; i >= 0; --i) {
|
|
styles.push(createMarkerStyle(features[i]));
|
|
}
|
|
return styles;
|
|
};
|
|
|
|
|
|
vectors = container.layers[name] = new ol.layer.Vector({
|
|
source: clusterSource,
|
|
title: name,
|
|
style: function (feature, resolution) {
|
|
|
|
var features = feature.get("features");
|
|
if (features && features.length > 1) {
|
|
calculateClusterInfo(resolution);
|
|
|
|
var size = features.length,
|
|
style = styleCache[size + " " + maxFeatureCount];
|
|
|
|
if (!style) {
|
|
style = new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
radius: Math.max(feature.get('radius'), 20),
|
|
stroke: new ol.style.Stroke({
|
|
color: clusterTextColor
|
|
}),
|
|
fill: new ol.style.Fill({
|
|
color: [
|
|
clusterFillColor[0],
|
|
clusterFillColor[1],
|
|
clusterFillColor[2],
|
|
Math.min(0.8, 0.4 + (size / maxFeatureCount))
|
|
]
|
|
})
|
|
}),
|
|
text: new ol.style.Text({
|
|
text: features.length.toString(),
|
|
font: "14px sans-serif",
|
|
fill: new ol.style.Fill({
|
|
color: clusterTextColor
|
|
})
|
|
})
|
|
});
|
|
styleCache[size + " " + maxFeatureCount] = style;
|
|
}
|
|
} else if (features) {
|
|
|
|
feature = features[0];
|
|
|
|
if (feature.get("intent") === "marker") {
|
|
style = createMarkerStyle(feature);
|
|
}
|
|
}
|
|
return style;
|
|
}
|
|
});
|
|
|
|
if ($(container).data("clusterhover") === "features") {
|
|
container.map.interactions = container.map.getInteractions().extend(
|
|
[new ol.interaction.Select({
|
|
condition: function (evt) {
|
|
return evt.type === 'pointermove' ||
|
|
evt.type === 'singleclick';
|
|
},
|
|
style: selectClusterFeaturesStyle,
|
|
layers: [vectors]
|
|
})]);
|
|
}
|
|
|
|
if ($(container).data("popup-style")) {
|
|
var selectionInteraction = new ol.interaction.Select({
|
|
style: createMarkerStyle,
|
|
layers: [vectors]
|
|
});
|
|
|
|
container.map.addInteraction(selectionInteraction);
|
|
|
|
// use select to make popup
|
|
selectionInteraction.on('select', container.showPopup);
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
vectors = container.layers[name] = new ol.layer.Vector({
|
|
source: new ol.source.Vector({wrapX: false}),
|
|
title: name
|
|
//styleMap: container.defaultStyleMap,
|
|
//rendererOptions: {zIndexing: true}
|
|
});
|
|
|
|
}
|
|
|
|
container.overlays.getLayers().push(vectors);
|
|
}
|
|
|
|
return container.layers[name];
|
|
}
|
|
|
|
return container.vectors;
|
|
};
|
|
|
|
container.clearLayer = function (name) {
|
|
var vectors = container.getLayer(name).getSource();
|
|
|
|
vectors.getFeatures().forEach(f => {
|
|
if ((f && f.get("itemId")) || (f && f.get("type") && f.get("object"))) {
|
|
vectors.removeFeature(f);
|
|
}
|
|
});
|
|
};
|
|
|
|
desiredControls = $(this).data('map-controls');
|
|
if (desiredControls === undefined) {
|
|
desiredControls = 'controls,layers,search_location,current_location,streetview,navigation';
|
|
}
|
|
|
|
desiredControls = desiredControls.split(',');
|
|
|
|
var setupHeight = function () {
|
|
var height = $(container).height();
|
|
if (0 === height) {
|
|
height = $(container).width() / 4.0 * 3.0;
|
|
}
|
|
|
|
$(container).closest('.height-size').each(function () {
|
|
height = $(this).data('available-height');
|
|
$(this).css('padding', 0);
|
|
$(this).css('margin', 0);
|
|
});
|
|
|
|
$(container).height(height);
|
|
};
|
|
setupHeight();
|
|
|
|
$(window).resize(setupHeight);
|
|
|
|
if (! id) {
|
|
++mapNumber;
|
|
id = 'openlayers' + mapNumber;
|
|
$(this).attr('id', id);
|
|
}
|
|
|
|
setTimeout(function () {
|
|
ol.ImgPath = "lib/openlayers/theme/dark/";
|
|
|
|
var controls = ol.control.defaults({
|
|
// zoom control is added by default, so remove it if not needed
|
|
zoom: $.inArray('controls', desiredControls) !== -1
|
|
});
|
|
|
|
if ($.inArray('coordinates', desiredControls) !== -1) {
|
|
controls.push(new ol.control.MousePosition({
|
|
projection: "EPSG:4326",
|
|
coordinateFormat: function (coordinate) {
|
|
return ol.coordinate.format(coordinate, '{y}, {x}', 4);
|
|
}
|
|
})
|
|
);
|
|
}
|
|
|
|
if ($.inArray('scale', desiredControls) !== -1) {
|
|
controls.push(new ol.control.ScaleLine());
|
|
}
|
|
|
|
if ($.inArray('levels', desiredControls) !== -1) {
|
|
controls.push(new ol.control.ZoomSlider());
|
|
}
|
|
|
|
if (-1 !== $.inArray('layers', desiredControls)) {
|
|
controls.push(new ol.control.LayerSwitcher());
|
|
}
|
|
|
|
/* no navbar, pan or layer switcher anymore?
|
|
if (layers.length > 0 && -1 !== $.inArray('navigation', desiredControls)) {
|
|
defaultMode.controls.push(new ol.control.NavToolbar());
|
|
}
|
|
*/
|
|
|
|
// Set up initial layers
|
|
container.layers = {};
|
|
|
|
var tilesets = {}, key = "", pos = -1, ts = $(container).data("tilesets") || jqueryTiki.mapTileSets;
|
|
if (ts) {
|
|
if (typeof ts === "string") {
|
|
ts = ts.replace(/\s*/g, "").split(",");
|
|
}
|
|
if (typeof ts === "string") {
|
|
ts = [ts];
|
|
}
|
|
}
|
|
for (var i = 0; i < ts.length; i++) {
|
|
pos = ts[i].indexOf("=");
|
|
if (pos !== -1) {
|
|
key = ts[i].substr(0, pos);
|
|
ts[i] = ts[i].substr(pos + 1);
|
|
} else {
|
|
var m = ts[i].match(/\W/);
|
|
if (m) {
|
|
key = ts[i].substr(0, ts[i].indexOf(m[0]));
|
|
} else {
|
|
key = ts[i];
|
|
}
|
|
}
|
|
if (ts[i].indexOf("~") !== -1) {
|
|
tilesets[key] = ts[i].split("~");
|
|
} else {
|
|
tilesets[key] = ts[i];
|
|
}
|
|
}
|
|
|
|
errorLayers = [];
|
|
|
|
var layers = [
|
|
new ol.layer.Group({
|
|
title: tr("Base Maps"),
|
|
layers: getBaseLayers(tilesets)
|
|
}),
|
|
new ol.layer.Group({
|
|
title: tr("Overlays")
|
|
})
|
|
];
|
|
|
|
var map = container.map = new ol.Map({
|
|
target: id,
|
|
controls: controls,
|
|
view: new ol.View({
|
|
center: [0, 0],
|
|
zoom: 2
|
|
}),
|
|
layers: layers
|
|
});
|
|
|
|
if (errorLayers.length) {
|
|
$("#tikifeedback").showError(tr("Cannot create map layer/s: " + errorLayers.join(", ")));
|
|
errorLayers = [];
|
|
}
|
|
|
|
map.getLayerGroup().getLayers().forEach(function (layer) {
|
|
if (layer.get("title") === tr("Overlays")) {
|
|
container.overlays = layer;
|
|
}
|
|
});
|
|
|
|
container.vectors = container.getLayer(tr("Editable"));
|
|
|
|
container.uniqueMarkers = {};
|
|
|
|
container.resetPosition = function (center) {
|
|
|
|
center = center || [0, 0, 3];
|
|
|
|
var view = map.getView();
|
|
view.setCenter(ol.proj.fromLonLat([center.lon, center.lat]));
|
|
view.setZoom(center.zoom);
|
|
};
|
|
|
|
container.resetPosition();
|
|
|
|
container.modeManager = {
|
|
modes: [],
|
|
activeMode: null,
|
|
addMode: function (options) {
|
|
var mode = $.extend({
|
|
title: tr('Default'),
|
|
icon: null,
|
|
events: {
|
|
activate: [],
|
|
deactivate: []
|
|
},
|
|
controls: [],
|
|
layers: []
|
|
}, options);
|
|
|
|
$.each(mode.layers, function (k, layer) {
|
|
layer.displayInLayerSwitcher = false;
|
|
layer.setVisibility(false);
|
|
map.addLayer(layer);
|
|
});
|
|
|
|
$.each(mode.controls, function (k, control) {
|
|
control.autoActivate = false;
|
|
map.addControl(control);
|
|
});
|
|
|
|
this.modes.push(mode);
|
|
|
|
this.register('activate', mode.name, mode.activate);
|
|
this.register('deactivate', mode.name, mode.deactivate);
|
|
|
|
if (! this.activeMode) {
|
|
this.activate(mode);
|
|
}
|
|
|
|
$(container).trigger('modechanged');
|
|
|
|
return mode;
|
|
},
|
|
switchTo: function (modeName) {
|
|
var manager = this;
|
|
$.each(this.modes, function (k, mode) {
|
|
if (mode.name === modeName) {
|
|
manager.activate(mode);
|
|
}
|
|
});
|
|
},
|
|
register: function (eventName, modeName, callback) {
|
|
$.each(this.modes, function (k, mode) {
|
|
if (mode.name === modeName && callback) {
|
|
mode.events[eventName].push(callback);
|
|
}
|
|
});
|
|
},
|
|
activate: function (mode) {
|
|
if (this.activeMode) {
|
|
this.deactivate();
|
|
}
|
|
|
|
this.activeMode = mode;
|
|
|
|
$.each(mode.controls, function (k, control) {
|
|
control.activate();
|
|
});
|
|
$.each(mode.layers, function (k, layer) {
|
|
layer.setVisibility(true);
|
|
});
|
|
$.each(mode.events.activate, function (k, f) {
|
|
f.apply([], container);
|
|
});
|
|
|
|
$(container).trigger('modechanged');
|
|
},
|
|
deactivate: function () {
|
|
if (! this.activeMode) {
|
|
return;
|
|
}
|
|
|
|
$.each(this.activeMode.controls, function (k, control) {
|
|
control.deactivate();
|
|
});
|
|
$.each(this.activeMode.layers, function (k, layer) {
|
|
layer.setVisibility(false);
|
|
});
|
|
$.each(this.activeMode.events.deactivate, function (k, f) {
|
|
f.apply([], container);
|
|
});
|
|
|
|
this.activeMode = null;
|
|
}
|
|
};
|
|
|
|
var defaultMode = {
|
|
controls: []
|
|
};
|
|
|
|
var $mapBootstrapDummy = $("<div>")
|
|
.attr("id", "map-tooltip")
|
|
.css("position", "absolute")
|
|
.appendTo($(".ol-viewport", container));
|
|
|
|
/* tooltips */
|
|
|
|
if ($(container).data("tooltips")) {
|
|
// based on https://gis.stackexchange.com/a/166745/25953
|
|
|
|
|
|
container.displayFeatureInfo = function (pixel, evt) {
|
|
$mapBootstrapDummy.tooltip("hide");
|
|
var feature, layer, both = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
|
|
return [feature, layer];
|
|
});
|
|
if (! both) {
|
|
return;
|
|
}
|
|
feature = both[0];
|
|
layer = both[1];
|
|
|
|
if (! feature) {
|
|
return;
|
|
}
|
|
if (layer && layer instanceof ol.layer.VectorTile) {
|
|
return;
|
|
}
|
|
$mapBootstrapDummy.css({
|
|
left: pixel[0] + "px",
|
|
top: (pixel[1] - 15) + "px"
|
|
});
|
|
var clusterFeatures = feature.get("features");
|
|
|
|
if (clusterFeatures) {
|
|
if ($(container).data("clusterhover") === "none") {
|
|
feature.set("content", "");
|
|
for (var i = 0; i < clusterFeatures.length; i++) {
|
|
feature.set("content", feature.get("content") + clusterFeatures[i].get("content") + "<br>");
|
|
}
|
|
} else if (clusterFeatures.length === 1) {
|
|
feature = clusterFeatures[0];
|
|
} else if (layer) {
|
|
var f = layer.getSource().getSource().getClosestFeatureToCoordinate(evt.coordinate);
|
|
if (f) {
|
|
feature = f;
|
|
}
|
|
}
|
|
}
|
|
if (feature && feature.get("content")) {
|
|
$mapBootstrapDummy
|
|
.tooltip("dispose")
|
|
.tooltip({
|
|
animation: false,
|
|
trigger: "manual",
|
|
html: true,
|
|
title: feature.get("content"),
|
|
container: "body"
|
|
})
|
|
.tooltip("show");
|
|
}
|
|
};
|
|
|
|
map.on('pointermove', function (evt) {
|
|
if (evt.dragging) {
|
|
$mapBootstrapDummy.tooltip('hide');
|
|
return true;
|
|
}
|
|
container.displayFeatureInfo(map.getEventPixel(evt.originalEvent), evt);
|
|
return true;
|
|
});
|
|
}
|
|
|
|
if ($(container).data("popup-style")) {
|
|
|
|
container.showPopup = function (e) {
|
|
var pixel, feature, features = e.target.getFeatures();
|
|
|
|
if (features.getLength()) {
|
|
feature = features.getArray()[0];
|
|
var clusterFeatures = feature.get("features");
|
|
if (clusterFeatures) {
|
|
if (clusterFeatures.length === 1) {
|
|
feature = clusterFeatures[0];
|
|
} else {
|
|
selectionInteraction.getFeatures().clear();
|
|
var extent = ol.extent.createEmpty();
|
|
for (var i = 0; i < clusterFeatures.length; ++i) {
|
|
ol.extent.extend(extent, clusterFeatures[i].getGeometry().getExtent());
|
|
}
|
|
container.map.getView().fit(
|
|
extent,
|
|
{
|
|
duration: 2000,
|
|
padding: [10, 5, 10, 5]
|
|
}
|
|
);
|
|
return;
|
|
}
|
|
} else {
|
|
feature = features.getArray()[0];
|
|
}
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
pixel = map.getEventPixel(e.mapBrowserEvent.originalEvent);
|
|
|
|
$mapBootstrapDummy.tooltip("dispose").css({
|
|
left: pixel[0] + "px",
|
|
top: pixel[1] + "px"
|
|
});
|
|
|
|
let type = feature.get("type"), object = feature.get("object");
|
|
|
|
if (! type && ! object) {
|
|
type = "trackeritem", object = feature.get("itemId");
|
|
}
|
|
|
|
switch ($(container).data('popup-style')) {
|
|
case 'dialog':
|
|
|
|
var $modal = $('.modal.fade:not(.show):first')
|
|
.modal({})
|
|
.one('shown.bs.modal', function (event) {
|
|
if (type && object) {
|
|
$(container).loadInfoboxPopup({
|
|
type: type,
|
|
object: object,
|
|
feature: feature,
|
|
event: event,
|
|
element: this,
|
|
callback: function (event, $html) {
|
|
var title = $html.find("h1").remove().text() || feature.get(
|
|
"content"),
|
|
$header = $(".modal-header", $modal);
|
|
|
|
$html.find("a.service-dialog").clickModal({});
|
|
|
|
if ($header.length === 0) {
|
|
$(".modal-content", $modal).append(
|
|
$("<div class='modal-header'>").append(
|
|
$("<h4 class='modal-title'>").text(title)
|
|
)
|
|
);
|
|
} else {
|
|
$(".modal-title", $modal).text(title)
|
|
}
|
|
|
|
$(".modal-content", $modal).append(
|
|
$("<div class='modal-body'>").append($html),
|
|
$("<div class='modal-footer'>").append(
|
|
$('<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">'
|
|
+ tr('Close') + '</button>')
|
|
)
|
|
);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.one('hidden.bs.modal', function () {
|
|
selectionInteraction.getFeatures().clear();
|
|
})
|
|
.modal("show");
|
|
|
|
break;
|
|
case 'popup':
|
|
default:
|
|
$mapBootstrapDummy.popover("dispose").popover({
|
|
trigger: "manual",
|
|
html: true,
|
|
content: tr("Loading..."),
|
|
container: "body",
|
|
placement: "auto"
|
|
}).popover("show").on('shown.bs.popover', function (event) {
|
|
if (type && object) {
|
|
$(container).loadInfoboxPopup({
|
|
type: type,
|
|
object: object,
|
|
feature: feature,
|
|
event: event,
|
|
element: this,
|
|
callback: function (event, $html) {
|
|
var $popover = $(".popover.show:first");
|
|
$html.find("a.service-dialog").remove();
|
|
var title = $html.find("h1").remove().text() || feature.get("content");
|
|
$(".popover-header", $popover).text(title);
|
|
$(".popover-body", $popover).empty().append($html.children());
|
|
$popover.mouseleave(function () {
|
|
$popover.popover("dispose");
|
|
selectionInteraction.getFeatures().clear();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
function setupLayerEvents(vectors)
|
|
{
|
|
selectionInteraction = new ol.interaction.Select({
|
|
condition: ol.events.condition.click
|
|
});
|
|
|
|
map.addInteraction(selectionInteraction);
|
|
|
|
selectionInteraction.on('select', function (event) {
|
|
|
|
if (event.target.executor) {
|
|
event.target.executor();
|
|
}
|
|
container.showPopup.apply(null, [event]);
|
|
|
|
//$(container).setMapPopup(null);
|
|
});
|
|
|
|
selectionInteraction.on('modified', function (event) {
|
|
if (event.target.executor) {
|
|
event.target.executor();
|
|
}
|
|
});
|
|
|
|
selectionInteraction.on('added', function (event) {
|
|
if (!event.target.get("color")) {
|
|
event.target.set("color", '#6699cc');
|
|
}
|
|
if (!event.target.get("intent")) {
|
|
event.target.set("intent", "vectors");
|
|
}
|
|
});
|
|
}
|
|
let selectionInteraction;
|
|
|
|
setupLayerEvents(container.vectors);
|
|
|
|
|
|
if (layers.length > 0 && -1 !== $.inArray('overview', desiredControls)) {
|
|
var overview = new ol.control.OverviewMap({minRatio: 128, maxRatio: 256, maximized: true});
|
|
overview.desiredZoom = function () {
|
|
return Math.min(Math.max(1, map.getZoom() - 6), 3);
|
|
};
|
|
overview.isSuitableOverview = function() {
|
|
return this.ovmap.getZoom() === overview.desiredZoom() && this.ovmap.getExtent().contains(map.getExtent());
|
|
};
|
|
overview.updateOverview = function() {
|
|
overview.ovmap.setCenter(map.getCenter());
|
|
overview.ovmap.zoomTo(overview.desiredZoom());
|
|
this.updateRectToMap();
|
|
};
|
|
|
|
map.addControl(overview);
|
|
}
|
|
|
|
container.markerIcons = {
|
|
loadedMarker: {},
|
|
actionQueue: {},
|
|
loadingMarker: [],
|
|
loadMarker: function (name, src) {
|
|
this.loadingMarker.push(name);
|
|
this.actionQueue[name] = [];
|
|
|
|
var img = new Image(), me = this;
|
|
img.onload = function () {
|
|
var width = this.width, height = this.height, action;
|
|
me.loadedMarker[name] = {
|
|
intent: 'marker',
|
|
url: src,
|
|
width: width,
|
|
height: height,
|
|
offsetx: width / 2,
|
|
offsety: height
|
|
};
|
|
|
|
while (action = me.actionQueue[name].pop()) {
|
|
action();
|
|
}
|
|
};
|
|
$(img).on("error", function () {
|
|
console.log("Map error loading marker image " + src);
|
|
var index = container.markerIcons.loadingMarker.indexOf(src), action;
|
|
if (index > -1) {
|
|
container.markerIcons.loadingMarker.splice(index, 1);
|
|
}
|
|
while (action = me.actionQueue[name].pop()) {
|
|
action();
|
|
}
|
|
});
|
|
img.src = src;
|
|
},
|
|
createMarker: function (name, lonlat, callback) {
|
|
if (this.loadedMarker[name]) {
|
|
this._createMarker(name, lonlat, callback);
|
|
return;
|
|
}
|
|
|
|
if (-1 === $.inArray(name, this.loadingMarker)) {
|
|
this.loadMarker(name, name);
|
|
}
|
|
|
|
var me = this;
|
|
this.actionQueue[name].push(function () {
|
|
me._createMarker(name, lonlat, callback);
|
|
});
|
|
},
|
|
_createMarker: function (name, lonlat, callback) {
|
|
if (lonlat) {
|
|
var properties = $.extend(this.loadedMarker[name] || this.loadedMarker.default, {
|
|
geometry: lonlat
|
|
}), marker;
|
|
|
|
marker = new ol.Feature(
|
|
properties
|
|
);
|
|
callback(marker);
|
|
}
|
|
}
|
|
};
|
|
|
|
container.markerIcons.loadMarker('default', 'lib/openlayers/img/marker.svg');
|
|
container.markerIcons.loadMarker('selection', 'lib/openlayers/img/marker-gold.svg');
|
|
|
|
if (navigator.geolocation && navigator.geolocation.getCurrentPosition) {
|
|
container.toMyLocation = $('<a class="btn btn-sm btn-info">')
|
|
.attr('href', '')
|
|
.click(function () {
|
|
navigator.geolocation.getCurrentPosition(function (position) {
|
|
|
|
var view = map.getView();
|
|
view.setCenter(ol.proj.fromLonLat([position.coords.longitude, position.coords.latitude]));
|
|
view.setZoom(view.getZoomForResolution(position.coords.accuracy));
|
|
|
|
$(container).addMapMarker({
|
|
lat: position.coords.latitude,
|
|
lon: position.coords.longitude,
|
|
unique: 'selection'
|
|
});
|
|
});
|
|
return false;
|
|
})
|
|
.text(tr('To My Location'));
|
|
|
|
if (-1 !== $.inArray('current_location', desiredControls)) {
|
|
$(container).after(container.toMyLocation);
|
|
}
|
|
}
|
|
|
|
container.searchLocation = $('<a class="btn btn-sm btn-info">')
|
|
.attr('href', '')
|
|
.click(function () {
|
|
var address = prompt(tr('What address are you looking for?'), "");
|
|
|
|
$(container).trigger('search', [ { address: address } ]);
|
|
return false;
|
|
})
|
|
.text(tr('Search Location'));
|
|
|
|
if (-1 !== $.inArray('search_location', desiredControls)) {
|
|
$(container).after(container.searchLocation);
|
|
}
|
|
|
|
var field = $(container).data('target-field');
|
|
var central = null, useMarker = true;
|
|
|
|
if (field) {
|
|
field = $($(container).closest('form')[0][field]);
|
|
|
|
$(container).setupMapSelection({
|
|
field: field
|
|
});
|
|
var value = field.val();
|
|
central = parseCoordinates(value);
|
|
|
|
if (central) { // cope with zoom levels greater than what OSM layer[0] can cope with
|
|
var geLayer;
|
|
if (central.zoom > 19) {
|
|
geLayer = map.getLayersByName("Google Satellite");
|
|
} else if (central.zoom > 18) {
|
|
geLayer = map.getLayersByName("Google Streets");
|
|
}
|
|
if (geLayer) {
|
|
container.layer = geLayer[0];
|
|
map.setBaseLayer(container.layer);
|
|
map.baseLayer.setVisibility(true);
|
|
}
|
|
}
|
|
}
|
|
|
|
if ($(container).data('marker-filter')) {
|
|
var filter = $(container).data('marker-filter');
|
|
$(filter).each(function () {
|
|
var lat = $(this).data('geo-lat')
|
|
, lon = $(this).data('geo-lon')
|
|
, zoom = $(this).data('geo-zoom')
|
|
, extent = $(this).data('geo-extent')
|
|
, icon = $(this).data('icon-src')
|
|
, object = $(this).data('object')
|
|
, type = $(this).data('type')
|
|
, content = $(this).clone().data({}).wrap('<span/>').parent().html()
|
|
;
|
|
|
|
if (! extent) {
|
|
if ($(this).hasClass('primary') || this.href === document.location.href) {
|
|
central = {lat: lat, lon: lon, zoom: zoom ? zoom : 0};
|
|
} else {
|
|
$(container).addMapMarker({
|
|
type: type,
|
|
object: object,
|
|
lon: lon,
|
|
lat: lat,
|
|
content: content,
|
|
icon: icon ? icon : null
|
|
});
|
|
}
|
|
} else if ($(this).is('img')) {
|
|
var graphic = new ol.layer.Image(
|
|
$(this).attr('alt'),
|
|
$(this).attr('src'),
|
|
ol.Bounds.fromString(extent),
|
|
new ol.Size($(this).width(), $(this).height())
|
|
);
|
|
|
|
graphic.isBaseLayer = false;
|
|
graphic.alwaysInRange = true;
|
|
container.map.addLayer(graphic);
|
|
}
|
|
});
|
|
}
|
|
|
|
var provided = $(container).data('geo-center');
|
|
|
|
if (provided && !central) {
|
|
central = parseCoordinates(provided);
|
|
useMarker = false;
|
|
}
|
|
|
|
if (central) {
|
|
container.resetPosition(central);
|
|
|
|
if (useMarker) {
|
|
$(container).addMapMarker({
|
|
lon: central.lon,
|
|
lat: central.lat,
|
|
unique: 'selection'
|
|
});
|
|
}
|
|
}
|
|
|
|
container.modeManager.addMode(defaultMode);
|
|
|
|
if (jqueryTiki.googleStreetView) {
|
|
container.streetview = {
|
|
buttons: []
|
|
};
|
|
|
|
if (jqueryTiki.googleStreetViewOverlay) {
|
|
container.streetview.overlay = new ol.layer.XYZ(
|
|
"StreetView Overlay",
|
|
currentProtocol + "//mts1.google.com/vt?hl=en-US&lyrs=svv|cb_client:apiv3&style=40,18&x=${x}&y=${y}&z=${z}",
|
|
{sphericalMercator: true, displayInLayerSwitcher: false}
|
|
);
|
|
container.map.addLayer(container.streetview.overlay);
|
|
|
|
container.map.events.on({
|
|
move: function () {
|
|
if (container.streetview.overlay.visibility) {
|
|
container.streetview.overlay.redraw();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
var StreetViewHandler = ol.Class(ol.control, {
|
|
defaultHandlerOptions: {
|
|
'single': true,
|
|
'double': false,
|
|
'pixelTolerance': 0,
|
|
'stopSingle': false,
|
|
'stopDouble': false
|
|
},
|
|
initialize: function(options) {
|
|
this.handlerOptions = ol.Util.extend({}, this.defaultHandlerOptions);
|
|
ol.control.prototype.initialize.apply(this, arguments);
|
|
this.handler = new ol.Handler.Click(
|
|
this,
|
|
{
|
|
'click': this.trigger
|
|
},
|
|
this.handlerOptions
|
|
);
|
|
},
|
|
trigger: function(e) {
|
|
var width = 600, height = 500;
|
|
|
|
var lonlat = map.getLonLatFromViewPortPx(e.xy).transform(
|
|
map.getProjectionObject(),
|
|
new ol.proj.Projection("EPSG:4326")
|
|
);
|
|
|
|
var canvas = $('<div/>')[0];
|
|
$(canvas)
|
|
.appendTo('body')
|
|
.dialog({
|
|
title: tr('Panorama'),
|
|
width: width,
|
|
height: height + 30,
|
|
modal: true,
|
|
close: function () {
|
|
$(canvas).dialog('destroy');
|
|
},
|
|
buttons: container.streetview.getButtons(canvas)
|
|
});
|
|
|
|
canvas.getImageUrl = function () {
|
|
var pov = canvas.panorama.getPov();
|
|
var pos = canvas.panorama.getPosition();
|
|
var base = currentProtocol + '//maps.googleapis.com/maps/api/streetview?'
|
|
+ 'size=' + width + 'x' + height + '&'
|
|
+ 'location=' + tiki_encodeURIComponent(pos.toUrlValue()) + '&'
|
|
+ 'heading=' + tiki_encodeURIComponent(pov.heading) + '&'
|
|
+ 'pitch=' + tiki_encodeURIComponent(pov.pitch) + '&'
|
|
+ 'sensor=false'
|
|
;
|
|
|
|
return base;
|
|
};
|
|
|
|
canvas.getPosition = function () {
|
|
var pos = canvas.panorama.getPosition();
|
|
|
|
return formatLocation(pos.lat(), pos.lng(), 12);
|
|
};
|
|
|
|
canvas.panorama = new google.maps.StreetViewPanorama(canvas, {
|
|
position: new google.maps.LatLng(lonlat.lat, lonlat.lon),
|
|
zoomControl: false,
|
|
scrollwheel: false,
|
|
disableDoubleClickZoom: true
|
|
});
|
|
var timeout = setTimeout(function () {
|
|
alert(tr('StreetView is not available at this specific point on the map. Zoom in as needed and make sure to click on a blue line.'));
|
|
$(canvas).dialog('close');
|
|
}, 5000);
|
|
google.maps.event.addListener(canvas.panorama, 'pano_changed', function () {
|
|
if (! canvas.panorama.getPano()) {
|
|
alert(tr('StreetView is not available at this specific point on the map. Zoom in as needed and make sure to click on a blue line.'));
|
|
$(canvas).dialog('close');
|
|
}
|
|
clearTimeout(timeout);
|
|
});
|
|
}
|
|
});
|
|
|
|
container.modeManager.addMode({
|
|
title: 'StreetView',
|
|
controls: [ new StreetViewHandler(), new ol.control.NavToolbar() ],
|
|
activate: function () {
|
|
if (container.streetview.overlay) {
|
|
container.streetview.overlay.setVisibility(true);
|
|
}
|
|
},
|
|
deactivate: function () {
|
|
if (container.streetview.overlay) {
|
|
container.streetview.overlay.setVisibility(false);
|
|
}
|
|
}
|
|
});
|
|
|
|
container.streetview.addButton = function (label, callback) {
|
|
container.streetview.buttons.unshift({
|
|
label: label,
|
|
callback: callback
|
|
});
|
|
};
|
|
|
|
container.streetview.getButtons = function (canvas) {
|
|
var buttons = {};
|
|
$.each(container.streetview.buttons, function (k, b) {
|
|
buttons[b.label] = function () {
|
|
b.callback(canvas);
|
|
}
|
|
});
|
|
|
|
return buttons;
|
|
};
|
|
|
|
container.streetview.addButton('Cancel', function (canvas) {
|
|
$(canvas).dialog('close');
|
|
});
|
|
|
|
container.streetViewToggle = $('<a/>')
|
|
.css('display', 'block')
|
|
.attr('href', '')
|
|
.click(function () {
|
|
if (container.modeManager.activeMode && container.modeManager.activeMode.name == 'StreetView') {
|
|
container.modeManager.switchTo('Default');
|
|
$(this).text(tr('Enable StreetView'));
|
|
} else {
|
|
container.modeManager.switchTo('StreetView');
|
|
$(this).text(tr('Disable StreetView'));
|
|
}
|
|
return false;
|
|
})
|
|
.text(tr('Enable StreetView'));
|
|
|
|
if (-1 !== $.inArray('streetview', desiredControls)) {
|
|
$(container).after(container.streetViewToggle);
|
|
}
|
|
}
|
|
|
|
var searchboxes = $(container)
|
|
.closest('.tab, #appframe, #tiki-center')
|
|
.find('form.search-box')
|
|
.filter(function () {
|
|
return $(this).closest('.map-container').size() === 0;
|
|
});
|
|
|
|
searchboxes = searchboxes.add($('form.search-box', container));
|
|
|
|
searchboxes
|
|
.off('submit')
|
|
.submit(function () {
|
|
$(container).trigger("start.map.search");
|
|
var form = this;
|
|
$.post('tiki-searchindex.php?filter~geo_located=y', $(this).serialize(), function (data) {
|
|
|
|
if (! form.autoLayers) {
|
|
form.autoLayers = [];
|
|
}
|
|
|
|
$(form.autoLayers).each(function (k, name) {
|
|
container.clearLayer(name);
|
|
});
|
|
|
|
$.each(data.result, function (k, i) {
|
|
var layerName = $(form).data('result-layer'), suffix = $(form).data('result-suffix');
|
|
|
|
if (layerName && i[layerName]) {
|
|
layerName = i[layerName] + ": ";
|
|
} else if (! layerName) {
|
|
layerName = ' -- ';
|
|
}
|
|
|
|
if (suffix && i[suffix]) {
|
|
layerName = layerName + i[suffix];
|
|
}
|
|
|
|
if (-1 === $.inArray(layerName, form.autoLayers)) {
|
|
form.autoLayers.push(layerName);
|
|
}
|
|
|
|
var icon;
|
|
$(i.link).each(function () { // if the object has an img with it (tracker status for instance) then we need to find the <a>
|
|
if ($(this).is("a")) { // and just using $(i.link).find("a") doesn't work for some reason
|
|
icon = $(this).data('icon-src');
|
|
}
|
|
});
|
|
|
|
if (i.geo_location) {
|
|
$(container).addMapMarker({
|
|
coordinates: i.geo_location,
|
|
content: i.title,
|
|
type: i.object_type,
|
|
object: i.object_id,
|
|
icon: icon ? icon : null,
|
|
layer: layerName,
|
|
dataSource: i,
|
|
form: form
|
|
});
|
|
} else if (i.geo_feature) {
|
|
var wkt = new ol.format.WKT()
|
|
, features
|
|
, layer = container.getLayer(layerName)
|
|
;
|
|
|
|
format = new ol.format.GeoJSON();
|
|
|
|
try {
|
|
features = format.readFeatures(i.geo_feature);
|
|
} catch (e) {
|
|
features = null;
|
|
}
|
|
|
|
if (! features) {
|
|
// Corrupted feature - display plain marker
|
|
$(container).addMapMarker({
|
|
coordinates: $(container).getMapCenter(),
|
|
content: i.title,
|
|
type: i.object_type,
|
|
object: i.object_id,
|
|
icon: null,
|
|
layer: layerName,
|
|
dataSource: i
|
|
});
|
|
return;
|
|
}
|
|
|
|
$.each(features, function (k, feature) {
|
|
var initial;
|
|
feature.set("itemId", i.object_id);
|
|
feature.set("content", i.title);
|
|
if (! feature.get("color")) {
|
|
feature.set("color", '#6699cc');
|
|
}
|
|
if (! feature.get("intent")) {
|
|
feature.set("intent", "vectors");
|
|
}
|
|
if (! feature.get("popup_config")) {
|
|
feature.set("popup_config", $(form).data("popup-config"));
|
|
}
|
|
|
|
initial = wkt.writeFeature(feature) + feature.get("color");
|
|
|
|
feature.executor = delayedExecutor(5000, function () {
|
|
var fields = {}, current = wkt.write(feature) + feature.get("color");
|
|
fields[i.geo_feature_field] = format.writeFeature(feature);
|
|
|
|
if (current === initial || layer !== container.vectors) {
|
|
return;
|
|
}
|
|
|
|
$.post($.service('tracker', 'update_item'), {
|
|
trackerId: i.tracker_id,
|
|
itemId: i.object_id,
|
|
fields: fields
|
|
}, function () {
|
|
initial = current;
|
|
}, 'json')
|
|
.error(function () {
|
|
$(container).trigger('changed');
|
|
});
|
|
});
|
|
});
|
|
layer.getSource().addFeatures(features);
|
|
|
|
$.each(features, function (k, feature) {
|
|
$(container).trigger('add', [i, feature]);
|
|
});
|
|
|
|
} else if (i.geo_file) { // load a file containing geometry, set using tracker Files indexGeometry option
|
|
|
|
var format,
|
|
files = i.geo_file.split(","),
|
|
proj4326 = new ol.proj.Projection("EPSG:4326"),
|
|
proj900913 = new ol.proj.Projection("EPSG:900913");
|
|
|
|
layer = container.getLayer(layerName);
|
|
|
|
if (i.geo_file_format == "geojson") {
|
|
format = new ol.format.GeoJSON();
|
|
} else {
|
|
if (i.geo_file_format == "gpx") {
|
|
format = new ol.format.GPX();
|
|
}
|
|
}
|
|
for (var f = 0; f < files.length; f++) {
|
|
|
|
$.get(
|
|
files[f],
|
|
function (data) {
|
|
|
|
if (data.indexOf(""") > -1) {
|
|
// decode html entities coming from file galleries
|
|
data = $("<div/>").html(data).text();
|
|
}
|
|
try {
|
|
features = format.readFeatures(data);
|
|
} catch (e) {
|
|
// Corrupted feature - display plain marker
|
|
$(container).addMapMarker({
|
|
coordinates: $(container).getMapCenter(),
|
|
content: i.title,
|
|
type: i.object_type,
|
|
object: i.object_id,
|
|
icon: null,
|
|
layer: layerName,
|
|
dataSource: i
|
|
});
|
|
return;
|
|
}
|
|
$.each(features, function (k, feature) {
|
|
|
|
feature.set("itemId", i.object_id);
|
|
feature.set("content", i.title);
|
|
if (!feature.get("color")) {
|
|
feature.set("color", '#ffa500');
|
|
}
|
|
if (!feature.get("intent")) {
|
|
feature.set("intent", "vectors");
|
|
}
|
|
if (!feature.get("popup_config")) {
|
|
feature.set("popup_config", $(form).data("popup-config"));
|
|
}
|
|
// for some reason geometry needs to be in 900913 projection to correctly appear
|
|
// in the "Editable" vector layer, even though layer.projection === "EPSG:4326"
|
|
let geometry = feature.getGeometry();
|
|
if (geometry) {
|
|
geometry.transform(proj4326, proj900913);
|
|
}
|
|
|
|
});
|
|
layer.getSource().addFeatures(features);
|
|
|
|
$.each(features, function (k, feature) {
|
|
$(container).trigger('add', [i, feature]);
|
|
});
|
|
|
|
}
|
|
);
|
|
}
|
|
}
|
|
});
|
|
}, 'json').complete(function () {
|
|
$(container).trigger("complete.map.search");
|
|
});
|
|
return false;
|
|
})
|
|
.each(function () {
|
|
if ($(this).hasClass('onload')) {
|
|
var fm = this, layerLoadDelay = parseInt($(fm).data("load-delay"), 10);
|
|
|
|
if (layerLoadDelay) {
|
|
setTimeout(function () { $(fm).submit(); }, layerLoadDelay * 1000);
|
|
} else {
|
|
$(fm).submit();
|
|
}
|
|
}
|
|
|
|
var skip = false;
|
|
if ($(this).data('result-refresh')) {
|
|
var form = this, refresh = parseInt($(this).data('result-refresh'), 10) * 1000, interval;
|
|
interval = setInterval(function () {
|
|
if (skip) {
|
|
skip = false;
|
|
} else {
|
|
$(form).submit();
|
|
}
|
|
}, refresh);
|
|
|
|
$(container).on('unregister', function () {
|
|
clearInterval(interval);
|
|
});
|
|
}
|
|
|
|
$(container).on('changed', function () {
|
|
$(form).submit();
|
|
skip = true;
|
|
});
|
|
});
|
|
$(container).on('search', function (e, data) {
|
|
function markLocation (lat, lon, bounds) {
|
|
var lonlat = ol.proj.fromLonLat([lon, lat]),
|
|
toViewport = function () {
|
|
if (bounds) {
|
|
map.getView().zoomToExtent(bounds);
|
|
} else {
|
|
map.getView().setCenter(lonlat);
|
|
map.zoomToScale(500 * ol.INCHES_PER_UNIT.m);
|
|
}
|
|
};
|
|
|
|
$(container).addMapMarker({
|
|
lat: lat,
|
|
lon: lon,
|
|
unique: 'selection',
|
|
click: toViewport
|
|
});
|
|
|
|
if (typeof zoomToFoundLocation != 'undefined') {
|
|
// Center map to the new location and zoom
|
|
var zoomFactor = -1;
|
|
switch (zoomToFoundLocation) {
|
|
default:
|
|
case 'street':
|
|
zoomFactor = 1; // these are now metres per pixel
|
|
break;
|
|
case 'town':
|
|
zoomFactor = 10;
|
|
break;
|
|
case 'region':
|
|
zoomFactor = 100;
|
|
break;
|
|
case 'country':
|
|
zoomFactor = 500;
|
|
break;
|
|
case 'continent':
|
|
zoomFactor = 20000;
|
|
break;
|
|
case 'world':
|
|
zoomFactor = -1;
|
|
break;
|
|
}
|
|
var view = map.getView();
|
|
if (zoomFactor < 0) {
|
|
view.setZoom(2); // whole world, more or less
|
|
} else {
|
|
view.setCenter(lonlat);
|
|
view.setZoom(view.getZoomForResolution(zoomFactor * ol.proj.Units.METERS_PER_UNIT.m));
|
|
}
|
|
} else {
|
|
if (!container.map.getExtent().containsLonLat(lonlat)) {
|
|
// Show marker on world map
|
|
toViewport();
|
|
}
|
|
}
|
|
}
|
|
|
|
function markGoogleLocation(result)
|
|
{
|
|
var loc = result.geometry.location
|
|
, sw = result.geometry.viewport.getSouthWest()
|
|
, ne = result.geometry.viewport.getNorthEast()
|
|
, osw, one
|
|
, left, bottom, right, top
|
|
;
|
|
|
|
osw = new ol.proj.fromLonLat([sw.lng(), sw.lat()]);
|
|
one = new ol.proj.fromLonLat([ne.lng(), ne.lat()])
|
|
|
|
left = osw[0];
|
|
bottom = osw[1];
|
|
right = one[0];
|
|
top = one[0];
|
|
|
|
markLocation(loc.lat(), loc.lng(), [left, bottom, right, top]);
|
|
}
|
|
|
|
function getBounds(bounds)
|
|
{
|
|
var osw, one
|
|
;
|
|
|
|
osw = new ol.LonLat(bounds.left, bounds.bottom).transform(
|
|
map.getProjectionObject(),
|
|
new ol.proj.Projection("EPSG:4326")
|
|
);
|
|
one = new ol.LonLat(bounds.right, bounds.top).transform(
|
|
map.getProjectionObject(),
|
|
new ol.proj.Projection("EPSG:4326")
|
|
);
|
|
|
|
return new google.maps.LatLngBounds(new google.maps.LatLng(osw.lat, osw.lon), new google.maps.LatLng(one.lat, one.lon));
|
|
}
|
|
|
|
if (data.address) {
|
|
if (window.google && google.maps && google.maps.Geocoder) {
|
|
var geocoder = new google.maps.Geocoder()
|
|
, loc = $(container).getMapCenter().split(',');
|
|
|
|
geocoder.geocode({
|
|
//bounds: getBounds(map.getExtent()),
|
|
address: data.address
|
|
}, function(results, status) {
|
|
var $list = $('<ul/>');
|
|
|
|
if (status === google.maps.GeocoderStatus.OK) {
|
|
if (results.length === 1) {
|
|
markGoogleLocation(results[0]);
|
|
return;
|
|
} else if (results.length > 0) {
|
|
$.each(results, function (k, result) {
|
|
var $link = $('<a href="#"/>');
|
|
$link.text(result.formatted_address);
|
|
$link.click(function () {
|
|
markGoogleLocation(result);
|
|
return false;
|
|
});
|
|
$('<li/>').append($link).appendTo($list);
|
|
});
|
|
}
|
|
}
|
|
|
|
$('<div/>')
|
|
.append($list)
|
|
.dialog({title: data.address});
|
|
});
|
|
} else {
|
|
$.getJSON('tiki-ajax_services.php', {geocode: data.address}, function (data) {
|
|
if (data && data.status === "OK") {
|
|
markLocation(data.lat, data.lon, 500);
|
|
} else {
|
|
var msg;
|
|
if (data && data.error) {
|
|
msg = data.status + ": " + data.error;
|
|
} else {
|
|
msg = tr("Location service unnavailable");
|
|
}
|
|
$(container).parent().showError(msg);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
$(container).trigger('initialized');
|
|
}, 250);
|
|
});
|
|
|
|
return this;
|
|
};
|
|
|
|
$.fn.addMapMarker = function (options) {
|
|
this.each(function () {
|
|
var container = this,
|
|
lonlat,
|
|
iconModel = "default";
|
|
|
|
if (options.unique) {
|
|
iconModel = options.unique;
|
|
}
|
|
|
|
if (options.icon) {
|
|
iconModel = options.icon;
|
|
}
|
|
|
|
if (options.coordinates) {
|
|
var parts = options.coordinates.split(',');
|
|
if (parts.length >= 2) {
|
|
options.lon = parts[0];
|
|
options.lat = parts[1];
|
|
}
|
|
}
|
|
|
|
if (options.lat && options.lon) {
|
|
lonlat = new ol.geom.Point(
|
|
ol.proj.fromLonLat([parseFloat(options.lon), parseFloat(options.lat)])
|
|
);
|
|
}
|
|
|
|
container.markerIcons.createMarker(iconModel, lonlat, function (feature) {
|
|
if (options.type && options.object) {
|
|
feature.set("type", options.type);
|
|
feature.set("object", options.object);
|
|
}
|
|
if (! feature.get("popup_config") && options.form) {
|
|
feature.set("popup_config", $(options.form).data("popup-config"));
|
|
}
|
|
|
|
feature.setStyle(new ol.style.Style({
|
|
image: new ol.style.Icon({
|
|
anchor: [feature.get("offsetx"), feature.get("offsety")],
|
|
anchorXUnits: "pixels",
|
|
anchorYUnits: "pixels",
|
|
src: feature.get("url")
|
|
})
|
|
}));
|
|
|
|
var markerLayer = container.getLayer(options.layer), markerLayerSource,
|
|
initial = writeCoordinates(lonlat.clone(), container.map, true);
|
|
|
|
markerLayerSource = markerLayer.getSource();
|
|
|
|
if (typeof markerLayerSource.getSource === "function") {
|
|
markerLayerSource = markerLayerSource.getSource(); // Cluster layer source
|
|
}
|
|
|
|
if (options.unique) {
|
|
if (container.uniqueMarkers[options.unique]) {
|
|
markerLayerSource.removeFeature(container.uniqueMarkers[options.unique]);
|
|
delete container.uniqueMarkers[options.unique];
|
|
}
|
|
}
|
|
markerLayerSource.addFeatures([feature]);
|
|
|
|
if (options.unique) {
|
|
container.uniqueMarkers[options.unique] = feature;
|
|
$(container).trigger(options.unique + 'Change', options);
|
|
}
|
|
|
|
if (options.type === 'trackeritem' && options.object && markerLayer === container.vectors) {
|
|
feature.executor = delayedExecutor(5000, function () {
|
|
var current = writeCoordinates(feature.geometry.getBounds().getCenterLonLat().clone(), container.map, true);
|
|
|
|
if (current === initial) {
|
|
return;
|
|
}
|
|
|
|
$.post($.service('tracker', 'set_location'), {
|
|
itemId: options.object,
|
|
location: current
|
|
}, function () {
|
|
initial = current;
|
|
}, 'json')
|
|
.error(function () {
|
|
$(container).trigger('changed');
|
|
});
|
|
});
|
|
}
|
|
|
|
if (options.content) {
|
|
feature.set("content", options.content);
|
|
}
|
|
|
|
if (options.click) {
|
|
feature.clickHandler = options.click;
|
|
}
|
|
|
|
if (options.dataSource) {
|
|
$(container).trigger('add', [options.dataSource, feature]);
|
|
}
|
|
});
|
|
});
|
|
|
|
return this;
|
|
};
|
|
|
|
$.fn.setupMapSelection = function (options) {
|
|
var control;
|
|
this.each(function () {
|
|
var container = this, field = options.field, map = this.map;
|
|
|
|
if (! field.attr('disabled')) {
|
|
$(container).on('selectionChange', function (e, lonlat) {
|
|
if (lonlat) {
|
|
field.val(writeCoordinates(lonlat, map)).change();
|
|
} else {
|
|
field.val('').change();
|
|
}
|
|
});
|
|
map.on('zoomend', function (e, lonlat) {
|
|
var coords = field.val().split(","), lon = 0, lat = 0;
|
|
if (coords.length > 1) {
|
|
lon = coords[0];
|
|
lat = coords[1];
|
|
}
|
|
field.val(formatLocation(lat, lon, map.getView().getZoom())).change();
|
|
});
|
|
|
|
}
|
|
});
|
|
|
|
return control;
|
|
};
|
|
|
|
$.fn.removeMapSelection = function () {
|
|
this.each(function () {
|
|
var container = this;
|
|
|
|
if (container.uniqueMarkers['selection']) {
|
|
container.vectors.removeFeatures([container.uniqueMarkers['selection']]);
|
|
}
|
|
|
|
$(container).trigger('selectionChange', {});
|
|
});
|
|
|
|
return this;
|
|
};
|
|
|
|
$.fn.getMapCenter = function () {
|
|
var val;
|
|
|
|
this.each(function () {
|
|
var coordinates = this.map.getView().getCenter();
|
|
val = ol.proj.fromLonLat(coordinates);
|
|
});
|
|
|
|
return val.join(",");
|
|
};
|
|
|
|
$.fn.setMapPopup = function (popup, old) {
|
|
this.each(function () {
|
|
var handler = $(this).getMapPopupHandler();
|
|
|
|
// Replacement attempt, if not the same one, skip the operation
|
|
if (old && old !== this.activePopup) {
|
|
return;
|
|
}
|
|
|
|
if (this.activePopup) {
|
|
if (this.activePopup.myclose) {
|
|
var f = this.activePopup.myclose;
|
|
this.activePopup.myclose = null;
|
|
f();
|
|
} else {
|
|
try {
|
|
handler.remove(this.activePopup);
|
|
} catch (e) {} // catch error when dialog not initialised
|
|
}
|
|
|
|
this.activePopup = null;
|
|
}
|
|
|
|
if (popup) {
|
|
this.activePopup = popup;
|
|
|
|
handler.add(popup);
|
|
}
|
|
});
|
|
};
|
|
|
|
$.fn.loadInfoboxPopup = function (options) {
|
|
if (options.type && options.object && $.inArray(options.type, jqueryTiki.infoboxTypes) !== -1) {
|
|
|
|
this.each(function () {
|
|
|
|
$.get($.service('object', 'infobox', {
|
|
type: options.type,
|
|
object: options.object
|
|
}), function (data) {
|
|
|
|
var content = $("<body>").append(data);
|
|
|
|
content.find('.svgImage')
|
|
.css('text-align', 'center')
|
|
.css('margin', 'auto');
|
|
|
|
// re-colorbox *box images
|
|
$("a[rel*='box'][rel*='type=img'], a[rel*='box'][rel!='type=']", content).colorbox({
|
|
photo: true
|
|
});
|
|
|
|
if (options.callback) {
|
|
options.callback.call(options.element, options.event, content);
|
|
}
|
|
|
|
}, 'html');
|
|
});
|
|
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
$.fn.getMapPopupHandler = function () {
|
|
var handler;
|
|
|
|
this.each(function () {
|
|
var map = this.map;
|
|
|
|
switch ($(this).data('popup-style')) {
|
|
case 'dialog':
|
|
handler = {
|
|
type: 'dialog',
|
|
add: function (popup) {
|
|
},
|
|
create: function (lonlat, content, hook, close, feature) {
|
|
var dialog = $(content), w = '80%', h = 600;
|
|
this.feature = feature;
|
|
if (this.feature.get("popup_config")) {
|
|
w = this.feature.get("popup_config").width;
|
|
h = this.feature.get("popup_config").height;
|
|
}
|
|
|
|
dialog.dialog({
|
|
modal: true,
|
|
width: w,
|
|
height: h,
|
|
close: close
|
|
});
|
|
|
|
return dialog[0];
|
|
},
|
|
remove: function (popup) {
|
|
$(popup).dialog('destroy');
|
|
},
|
|
resize: function (popup) {
|
|
$(popup).find('h1, h2, h3, h4, h5').first().each(function () {
|
|
$(this).hide();
|
|
$(popup).dialog('option', 'title', $(this).text());
|
|
});
|
|
}
|
|
};
|
|
break;
|
|
case 'popup':
|
|
default:
|
|
handler = {
|
|
type: 'popup',
|
|
add: function (popup) {
|
|
map.addPopup(popup);
|
|
},
|
|
create: function (lonlat, content, hook, close, feature) {
|
|
this.feature = feature;
|
|
return new ol.Popup.FramedCloud('marker', lonlat, null, content, hook, true, close);
|
|
},
|
|
remove: function (popup) {
|
|
map.removePopup(popup);
|
|
},
|
|
resize: function (popup) {
|
|
var w = 300, h = 260;
|
|
if (this.feature.get("popup_config")) {
|
|
w = this.feature.get("popup_config").width;
|
|
h = this.feature.get("popup_config").height;
|
|
}
|
|
popup.setSize(new ol.Size(w, h));
|
|
}
|
|
};
|
|
break;
|
|
}
|
|
});
|
|
|
|
return handler;
|
|
};
|
|
|
|
$.fn.finalMapRefresh = function (collector) {
|
|
|
|
this.each(function () {
|
|
var container = this;
|
|
|
|
$(container).trigger('unregister');
|
|
$(container).on('add', function (e, data, feature) {
|
|
collector(data, $.extend({}, feature));
|
|
});
|
|
$(container).trigger('changed');
|
|
});
|
|
|
|
return this;
|
|
};
|
|
|
|
})();
|
|
|
|
// TODO from OpenLayers2 tiki-maps.js still to be updated
|
|
/* style stuff later
|
|
// these functions attempt to retrieve values for the style attributes,
|
|
// falling back to others if not all options are specified
|
|
// e.g. if "select-fill-color" is not provided it will use "fill-color", or just "color" attributes
|
|
|
|
var getColor = function (feature, intent, type) {
|
|
return feature.attributes[intent + "-" + type + "-color"] ||
|
|
feature.attributes[intent + "-color"] ||
|
|
feature.attributes[type + "-color"] ||
|
|
feature.attributes["color"] ||
|
|
"#6699cc";
|
|
};
|
|
|
|
var getStyleAttribute = function (feature, intent, type, def) {
|
|
return feature.attributes[intent + "-" + type] ||
|
|
feature.attributes[type] ||
|
|
def;
|
|
};
|
|
|
|
container.defaultStyleMap = new ol.StyleMap({
|
|
"default": new ol.Style(ol.Util.applyDefaults({
|
|
cursor: "pointer"
|
|
}, ol.Feature.Vector.style['default']), {
|
|
context: {
|
|
getFillColor: function (feature) {
|
|
return getColor(feature, "default", "fill");
|
|
},
|
|
getStrokeColor: function (feature) {
|
|
return getColor(feature, "default", "stroke");
|
|
},
|
|
getStrokeWidth: function (feature) {
|
|
return getStyleAttribute(feature, "default", "stroke-width", 3);
|
|
},
|
|
getStrokeDashstyle: function (feature) {
|
|
return getStyleAttribute(feature, "default", "stroke-dashstyle", "solid");
|
|
},
|
|
getPointRadius: function (feature) {
|
|
return getStyleAttribute(feature, "default", "point-radius", 5);
|
|
},
|
|
getFillOpacity: function (feature) {
|
|
return getStyleAttribute(feature, "default", "fill-opacity", 0.5);
|
|
},
|
|
getStrokeOpacity: function (feature) {
|
|
return getStyleAttribute(feature, "default", "stroke-opacity", 0.9);
|
|
}
|
|
}
|
|
}),
|
|
"select": new ol.Style(ol.Util.applyDefaults({
|
|
cursor: "pointer"
|
|
}, ol.Feature.Vector.style['select']), {
|
|
context: {
|
|
getFillColor: function (feature) {
|
|
return getColor(feature, "select", "fill");
|
|
},
|
|
getStrokeColor: function (feature) {
|
|
return getColor(feature, "select", "stroke");
|
|
},
|
|
getStrokeWidth: function (feature) {
|
|
return getStyleAttribute(feature, "select", "stroke-width", 3);
|
|
},
|
|
getStrokeDashstyle: function (feature) {
|
|
return getStyleAttribute(feature, "select", "stroke-dashstyle", "solid");
|
|
},
|
|
getPointRadius: function (feature) {
|
|
return getStyleAttribute(feature, "select", "point-radius", 5);
|
|
},
|
|
getFillOpacity: function (feature) {
|
|
return getStyleAttribute(feature, "select", "fill-opacity", 0.9);
|
|
},
|
|
getStrokeOpacity: function (feature) {
|
|
return getStyleAttribute(feature, "select", "stroke-opacity", 0.9);
|
|
}
|
|
}
|
|
}),
|
|
"temporary": new ol.Style(ol.Util.applyDefaults({
|
|
cursor: "pointer"
|
|
}, ol.Feature.Vector.style['temporary']), {
|
|
context: {
|
|
getFillColor: function (feature) {
|
|
return getColor(feature, "temporary", "fill");
|
|
},
|
|
getStrokeColor: function (feature) {
|
|
return getColor(feature, "temporary", "stroke");
|
|
},
|
|
getStrokeWidth: function (feature) {
|
|
return getStyleAttribute(feature, "temporary", "stroke-width", 4);
|
|
},
|
|
getStrokeDashstyle: function (feature) {
|
|
return getStyleAttribute(feature, "temporary", "stroke-dashstyle", "solid");
|
|
},
|
|
getPointRadius: function (feature) {
|
|
return getStyleAttribute(feature, "temporary", "point-radius", 5);
|
|
},
|
|
getFillOpacity: function (feature) {
|
|
return getStyleAttribute(feature, "temporary", "fill-opacity", 0.3);
|
|
},
|
|
getStrokeOpacity: function (feature) {
|
|
return getStyleAttribute(feature, "temporary", "stroke-opacity", 0.9);
|
|
}
|
|
}
|
|
}),
|
|
"vertex": new ol.Style(ol.Util.applyDefaults({
|
|
fillColor: "#6699cc",
|
|
strokeColor: "#6699cc",
|
|
pointRadius: 5,
|
|
fillOpacity: ".7",
|
|
strokeDashstyle: "solid"
|
|
}, ol.Feature.Vector.style['temporary']))
|
|
});
|
|
|
|
var markerStyle = {
|
|
externalGraphic: "${url}",
|
|
graphicWidth: "${width}",
|
|
graphicHeight: "${height}",
|
|
graphicXOffset: "${offsetx}",
|
|
graphicYOffset: "${offsety}",
|
|
graphicOpacity: typeof window.chrome === "undefined" ? 0.9 : 1
|
|
// Google Chrome v34 makes some markers invisible if not 100% opaque
|
|
}, vectorStyle = {
|
|
fillColor: "${getFillColor}",
|
|
strokeColor: "${getStrokeColor}",
|
|
strokeDashstyle: "${getStrokeDashstyle}",
|
|
strokeWidth: "${getStrokeWidth}",
|
|
pointRadius: "${getPointRadius}",
|
|
fillOpacity: "${getFillOpacity}",
|
|
strokeOpacity: "${getStrokeOpacity}"
|
|
};
|
|
|
|
container.defaultStyleMap.addUniqueValueRules("default", "intent", {
|
|
"marker": markerStyle, "vectors": vectorStyle
|
|
});
|
|
|
|
container.defaultStyleMap.addUniqueValueRules("select", "intent", {
|
|
"marker": markerStyle, "vectors": vectorStyle
|
|
});
|
|
|
|
container.defaultStyleMap.addUniqueValueRules("temporary", "intent", {
|
|
"marker": markerStyle, "vectors": vectorStyle
|
|
});
|
|
*/
|
|
/*
|
|
var ClickHandler = ol.Class(ol.control, {
|
|
defaultHandlerOptions: {
|
|
'single': true,
|
|
'double': false,
|
|
'pixelTolerance': 0,
|
|
'stopSingle': false,
|
|
'stopDouble': false
|
|
},
|
|
initialize: function(options) {
|
|
this.handlerOptions = ol.Util.extend({}, this.defaultHandlerOptions);
|
|
ol.control.prototype.initialize.apply(this, arguments);
|
|
this.handler = new ol.Handler.Click(
|
|
this,
|
|
{
|
|
'click': this.trigger
|
|
},
|
|
this.handlerOptions
|
|
);
|
|
},
|
|
trigger: function(e) {
|
|
var lonlat = map.getLonLatFromViewPortPx(e.xy).transform(
|
|
map.getProjectionObject(),
|
|
new ol.proj.Projection("EPSG:4326")
|
|
);
|
|
$(container).addMapMarker({
|
|
lat: lonlat.lat,
|
|
lon: lonlat.lon,
|
|
unique: 'selection'
|
|
});
|
|
|
|
if (options.click) {
|
|
options.click();
|
|
}
|
|
}
|
|
});
|
|
|
|
control = new ClickHandler();
|
|
map.addControl(control);
|
|
control.activate();
|
|
*/
|
|
|