summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChristopher Baines <cb15g11@soton.ac.uk>2014-08-26 19:36:53 +0100
committerChristopher Baines <cb15g11@soton.ac.uk>2014-08-26 19:36:53 +0100
commitbc8929fce24eb64e0f781daba7b94fe3a6bf2fe1 (patch)
treede573d99cb831781c62e055ed6db14958a8a9f2d
parent38afe83cf46641c6a9b25a7f0dc18fdcdb562b4c (diff)
downloadleaflet-soton-bc8929fce24eb64e0f781daba7b94fe3a6bf2fe1.tar
leaflet-soton-bc8929fce24eb64e0f781daba7b94fe3a6bf2fe1.tar.gz
Improve support for customising popups
Also improve room and building popups
-rw-r--r--src/leaflet-soton.js103
1 files changed, 44 insertions, 59 deletions
diff --git a/src/leaflet-soton.js b/src/leaflet-soton.js
index ecbc9c6..931bb3c 100644
--- a/src/leaflet-soton.js
+++ b/src/leaflet-soton.js
@@ -413,14 +413,12 @@ SELECT * WHERE {\
layerOptions.onEachFeature = function(feature, layer) {
// When the feature is clicked on
layer.on('click', function(e) {
- var close;
-
var content = buildingTemplate(feature.properties,
- options.indoor,
+ options,
map,
- function() { close(); });
+ function() { map.closeInfo(); });
- close = map.showInfo(content, e.latlng);
+ map.showInfo(content, e.latlng);
});
};
} else {
@@ -655,7 +653,7 @@ SELECT * WHERE {\
// When the feature is clicked on
if ("buildingpart" in feature.properties) {
if (feature.properties.buildingpart === "room") {
- content = roomPopupTemplate(feature.properties);
+ content = roomPopupTemplate(feature.properties, options);
} else if (feature.properties.buildingpart === "verticalpassage") {
content = verticalPassagePopupTemplate(feature.properties);
}
@@ -784,12 +782,10 @@ SELECT * WHERE {\
var building = buildings[i];
if (building.properties.uri === uri) {
- var close;
-
var content = buildingTemplate(building.properties,
- this.options.indoor,
+ this.options,
map,
- function() { close(); });
+ function() { map.closeInfo(); });
var temp = { _rings: building.geometry.coordinates, _map: this };
@@ -799,7 +795,7 @@ SELECT * WHERE {\
map.panTo(center);
- close = map.showInfo(content, center);
+ map.showInfo(content, center);
return;
}
@@ -863,43 +859,19 @@ SELECT * WHERE {\
options.maxWidth = map.getContainer().offsetWidth;
- var close;
-
- if (false && smallScreen()) {
- // Just in case there is a popup open, as the screen has just shrunk
- map.closePopup();
-
- var containerWrapper = document.getElementById('dynamicContentWrapper');
- containerWrapper.style.display = 'block';
-
- var container = document.getElementById('dynamicContent');
-
- var contentDiv = document.createElement('div');
+ map.closeInfo();
- var closeButton = L.DomUtil.create('button', 'close', container);
- closeButton.setAttribute('aria-hidden', 'true');
- closeButton.setAttribute('type', 'button');
- closeButton.textContent = 'x';
+ var popup = L.popup(options).setLatLng(latlng);
+ map._popup = popup;
- close = closeButton.onclick = function() {
- container.innerHTML = '';
- containerWrapper.style.display = 'none';
- };
-
- container.appendChild(content);
- } else {
- var popup = L.popup(options).setLatLng(latlng);
-
- popup.setContent(content);
+ popup.setContent(content);
- popup.openOn(map);
-
- close = function() {
- map.closePopup(popup);
- };
+ popup.openOn(map);
+ },
+ closeInfo: function() {
+ if (map._popup) {
+ map.closePopup(map._popup);
}
-
- return close;
}
});
@@ -930,7 +902,7 @@ SELECT * WHERE {\
parking: parkingTemplate,
};
- function roomPopupTemplate(properties) {
+ function roomPopupTemplate(properties, options) {
properties = L.extend({}, properties);
if (!("name" in properties)) {
@@ -1023,11 +995,16 @@ SELECT * WHERE {\
imageWidth = version.width;
imageHeight = version.height;
- var mapContainer = map.getContainer();
- var widthBound = mapContainer.offsetWidth;
- var heightBound = mapContainer.offsetHeight;
+ var widthBound;
+ var heightBound;
+ if ("popupWidth" in options && "popupHeight" in options) {
+ widthBound = options.popupWidth;
+ heightBound = options.popupHeight;
+ } else {
+ var mapContainer = map.getContainer();
+ widthBound = mapContainer.offsetWidth;
+ heightBound = mapContainer.offsetHeight;
- if (!smallScreen()) {
widthBound *= 0.7;
heightBound *= 0.7;
}
@@ -1117,7 +1094,9 @@ SELECT * WHERE {\
});
}
- function buildingTemplate(properties, indoor, map, close) {
+ function buildingTemplate(properties, options, map, close) {
+ var indoor = options.indoor;
+
return getTemplateWrapper(properties, function(content) {
var buildingTabs = [
@@ -1153,6 +1132,20 @@ SELECT * WHERE {\
var versions = properties.images[0].versions;
var url;
+ var widthBound;
+ var heightBound;
+ if ("popupWidth" in options && "popupHeight" in options) {
+ widthBound = options.popupWidth;
+ heightBound = options.popupHeight;
+ } else {
+ var mapContainer = map.getContainer();
+ widthBound = mapContainer.offsetWidth;
+ heightBound = mapContainer.offsetHeight;
+
+ widthBound *= 0.7;
+ heightBound *= 0.7;
+ }
+
for (var i=0; i<versions.length; i++) {
var version = versions[i];
url = version.url;
@@ -1160,15 +1153,6 @@ SELECT * WHERE {\
imageWidth = version.width;
imageHeight = version.height;
- var mapContainer = map.getContainer();
- var widthBound = mapContainer.offsetWidth;
- var heightBound = mapContainer.offsetHeight;
-
- if (!smallScreen()) {
- widthBound *= 0.7;
- heightBound *= 0.7;
- }
-
if (imageWidth < widthBound &&
imageHeight < heightBound) {
break; // Use this image, as it is the first smaller
@@ -1541,6 +1525,7 @@ SELECT * WHERE {\
activeLi = li;
li.classList.add('active');
+ div.style.display = 'block';
} else {
div.style.display = 'none';
}