' . html_escape($loc->label) . '
'
+ $point['popupHtml'] = ''
+ . '
';
}
$points[] = $point;
@@ -37,7 +35,7 @@ public function geolocationMapSingle($item = null, $width = '200px', $height = '
$options = [];
$options['basemap'] = get_option('geolocation_basemap');
- $options['points'] = $points;
+ $options['locations'] = $points;
$options = $this->view->geolocationMapOptions($options);
$center = js_escape($center);
$varDivId = Inflector::variablize($divId);
diff --git a/views/shared/css/geolocation-items-map.css b/views/shared/css/geolocation-items-map.css
index 5997e3f..3b9de08 100644
--- a/views/shared/css/geolocation-items-map.css
+++ b/views/shared/css/geolocation-items-map.css
@@ -41,14 +41,6 @@
margin-top: 0 !important;
}
-/* The map for the items page needs a bit of styling on it */
-#address_balloon dt {
- font-weight: bold;
-}
-#address_balloon {
- width: 100px;
-}
-
div.map-notification {
display:block;
border: 1px dotted #ccc;
diff --git a/views/shared/css/geolocation-marker.css b/views/shared/css/geolocation-map.css
similarity index 67%
rename from views/shared/css/geolocation-marker.css
rename to views/shared/css/geolocation-map.css
index 1b05bb5..02260ba 100644
--- a/views/shared/css/geolocation-marker.css
+++ b/views/shared/css/geolocation-map.css
@@ -1,6 +1,6 @@
#omeka-map-form {
width: 100%;
- height: 300px;
+ height: 500px;
clear: both;
}
#geolocation_address {
@@ -28,16 +28,33 @@ div#geolocation {
padding:0;
}
-.geolocation_balloon {
+.leaflet-popup-content-wrapper:has(.geolocation-popup) {
+ overflow: hidden;
+ padding: 0;
+}
+
+.leaflet-popup-content:has(.geolocation-popup) {
+ margin: 0;
+}
+
+.geolocation-popup {
width: 200px;
+ padding: 0 20px 13px;
}
-.geolocation_balloon img {
- max-width: 100%;
+
+.geolocation-popup-header {
+ margin: 0 -20px 13px;
+ padding: 8px 20px;
+ background: #e3e3e3;
+ font-weight: bold;
+}
+
+.geolocation-popup a {
+ border-bottom: none;
}
-.geolocation_balloon_title {
- font-weight:bold;
- font-size:18px;
- margin-bottom:0px;
+
+.geolocation-popup img {
+ max-width: 100%;
}
.leaflet-control-fit-all a {
diff --git a/views/shared/exhibit_layouts/geolocation-map/layout.php b/views/shared/exhibit_layouts/geolocation-map/layout.php
index 85a0a7d..15be75f 100644
--- a/views/shared/exhibit_layouts/geolocation-map/layout.php
+++ b/views/shared/exhibit_layouts/geolocation-map/layout.php
@@ -10,6 +10,7 @@
foreach ($attachments as $attachment):
$item = $attachment->getItem();
$file = $attachment->getFile();
+ $title = metadata($item, 'display_title', ['no_escape' => true]);
$titleLink = exhibit_builder_link_to_exhibit_item(null, [], $item);
if ($file):
@@ -20,14 +21,14 @@
$itemLocations = $locationTable->findBy(['item_id' => $item->id]);
foreach ($itemLocations as $location):
- $title = $titleLink . ($location->label ? ' — ' . html_escape($location->label) : '');
- $html = '' . html_escape($loc->label) . '
'
. ''
- . ' 0) {
- this.map.fitBounds(this.markerBounds, {padding: [25, 25]});
+ addLayerFromGeometry: function (geometry, options, bindHtml) {
+ var layer;
+ if (geometry.type === 'Point') {
+ layer = this.addMarker([geometry.coordinates[1], geometry.coordinates[0]], options, bindHtml);
+ } else {
+ layer = this.addShapeLayer(geometry, bindHtml);
+ }
+ if (bindHtml) {
+ var srAlertsDiv = jQuery('#geolocation-sr-alerts');
+ var title = options.title || '';
+ var latlng = geometry.type === 'Point'
+ ? layer.getLatLng()
+ : layer.getBounds().getCenter();
+ var parts = [title, srAlertsDiv.data('latString'), latlng.lat,
+ srAlertsDiv.data('longString'), latlng.lng];
+ var srOpenedText = parts.concat(srAlertsDiv.data('openedString')).join(' ');
+ var srClosedText = parts.concat(srAlertsDiv.data('closedString')).join(' ');
+ // Leaflet popup events give no screen reader feedback; announce the
+ // layer title, coordinates, and open/close status.
+ layer.addEventListener('popupopen', function () {
+ srAlertsDiv.text(srOpenedText);
+ });
+ layer.addEventListener('popupclose', function () {
+ srAlertsDiv.text(srClosedText);
+ });
+ // Popup dimensions are calculated before images load; update on
+ // first open so the popup resizes correctly once the image loads.
+ layer.once('popupopen', function (event) {
+ var popup = event.popup;
+ jQuery(popup.getElement()).find('img').one('load', function () {
+ popup.update();
+ });
+ });
}
+ return layer;
},
initMap: function () {
@@ -81,7 +105,8 @@ OmekaMap.prototype = {
}
this.map = L.map(this.mapDivId).setView([this.center.latitude, this.center.longitude], this.center.zoomLevel);
- this.markerBounds = L.latLngBounds();
+ this.locationBounds = L.latLngBounds();
+ this.locations = [];
L.tileLayer.provider(this.options.basemap, this.options.basemapOptions).addTo(this.map);
@@ -100,9 +125,19 @@ OmekaMap.prototype = {
this.clusterGroup = L.markerClusterGroup({
showCoverageOnHover: false
});
- this.map.addLayer(this.clusterGroup);
}
+ // When clustering is enabled, markerLayer routes collapsed shapes into
+ // the cluster group so they cluster alongside point markers. When it is
+ // disabled clusterGroup is null and Leaflet.Deflate falls back to its
+ // own FeatureGroup.
+ this.deflateGroup = L.deflate({
+ minSize: 10,
+ markerLayer: this.clusterGroup,
+ greedyCollapse: false,
+ });
+ this.map.addLayer(this.deflateGroup);
+
jQuery(this.map.getContainer()).trigger('o:geolocation:init_map', this);
new OmekaFitControl({ position: 'topleft', omekaMap: this }).addTo(this.map);
@@ -115,14 +150,14 @@ var OmekaFitControl = L.Control.extend({
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-fit-all');
var link = L.DomUtil.create('a', '', container);
link.href = '#';
- link.title = omekaMap.options.strings.fitAllMarkers;
+ link.title = omekaMap.options.strings.fitAllLocations;
link.setAttribute('role', 'button');
- link.setAttribute('aria-label', omekaMap.options.strings.fitAllMarkers);
+ link.setAttribute('aria-label', omekaMap.options.strings.fitAllLocations);
link.innerHTML = '';
L.DomEvent.on(link, 'click', function (e) {
L.DomEvent.preventDefault(e);
L.DomEvent.stopPropagation(e);
- omekaMap.fitMarkers();
+ omekaMap.fitLocations();
});
this._link = link;
return container;
@@ -142,8 +177,8 @@ function OmekaMapBrowse(mapDivId, center, options) {
OmekaMapBrowse.prototype = {
afterLoadItems: function () {
- if (this.options.fitMarkers) {
- this.fitMarkers();
+ if (this.options.fitLocations) {
+ this.fitLocations();
}
if (!this.options.list) {
@@ -177,26 +212,27 @@ OmekaMapBrowse.prototype = {
},
buildLayerFromLocation: function (locationData) {
- this.addMarker(
- [locationData.latitude, locationData.longitude],
- {title: locationData.title, alt: locationData.title},
- this.buildMarkerContent(locationData)
- );
+ var geometry = JSON.parse(locationData.geometry_json);
+ var layer = this.addLayerFromGeometry(geometry, {title: locationData.title, alt: locationData.title}, this.buildLocationContent(locationData));
+ // _geolocationTitle is the label this location shows in the sidebar list.
+ layer._geolocationTitle = locationData.title || '';
},
- buildMarkerContent: function (locationData) {
- var balloon = jQuery('
' . $title . '
'
+ $headerText = $location->label ? html_escape($location->label) : html_escape($title);
+ $html = ''
+ . '
';
$locations[] = [
- 'lat' => $location->latitude,
- 'lng' => $location->longitude,
+ 'geometry_json' => $location->geometry_json,
'html' => $html,
];
endforeach;
@@ -43,13 +44,9 @@
var map_locations = ;
for (var i = 0; i < map_locations.length; i++) {
var locationData = map_locations[i];
- geolocation_map.addMarker(
- [locationData.lat, locationData.lng],
- {},
- locationData.html
- );
+ geolocation_map.addLayerFromGeometry(JSON.parse(locationData.geometry_json), {}, locationData.html);
}
- geolocation_map.fitMarkers();
+ geolocation_map.fitLocations();
});
diff --git a/views/shared/javascripts/leaflet-deflate/L.Deflate.js b/views/shared/javascripts/leaflet-deflate/L.Deflate.js
new file mode 100644
index 0000000..09782e0
--- /dev/null
+++ b/views/shared/javascripts/leaflet-deflate/L.Deflate.js
@@ -0,0 +1 @@
+"use strict";L.Layer.include({_originalRemove:L.Layer.prototype.remove,remove:function(){if(this.marker){this.marker.remove()}return this._originalRemove()}});L.Map.include({_originalRemoveLayer:L.Map.prototype.removeLayer,removeLayer:function(layer){if(layer.marker){layer.marker.remove()}return this._originalRemoveLayer(layer)}});L.Deflate=L.FeatureGroup.extend({options:{minSize:10,markerOptions:{},markerType:L.marker,greedyCollapse:true},initialize:function(options){L.Util.setOptions(this,options);this._layers=[];this._needsPrepping=[];this._featureLayer=this._getFeatureLayer(options)},_getFeatureLayer:function(){if(this.options.markerLayer){return this.options.markerLayer}return L.featureGroup(this.options)},_getBounds:function(path){if(path instanceof L.Circle){path.addTo(this._map);const bounds=path.getBounds();this._map.removeLayer(path);return bounds}return path.getBounds()},_isCollapsed:function(path,zoom){const bounds=path.computedBounds;const northEastPixels=this._map.project(bounds.getNorthEast(),zoom);const southWestPixels=this._map.project(bounds.getSouthWest(),zoom);const width=Math.abs(northEastPixels.x-southWestPixels.x);const height=Math.abs(southWestPixels.y-northEastPixels.y);if(this.options.greedyCollapse){return height' . $headerText . '
'
. $body
+ . '' . $titleLink . '
'
. '');
- var titleLink = jQuery('').addClass('view-item').attr('href', locationData.itemUrl).text(locationData.title);
- balloon.append(jQuery('
').append(titleLink));
+ buildLocationContent: function (locationData) {
+ var popup = jQuery('
');
+ var headerText = locationData.label || locationData.title;
+ popup.append(jQuery('
').text(headerText));
if (locationData.thumbnailUrl) {
var img = jQuery('![]()
').attr({src: locationData.thumbnailUrl, alt: ''});
var thumbLink = jQuery('').addClass('view-item').attr('href', locationData.itemUrl).append(img);
- balloon.append(jQuery('
').append(thumbLink));
+ popup.append(jQuery('
').append(thumbLink));
}
+ var titleLink = jQuery('').addClass('view-item').attr('href', locationData.itemUrl).text(locationData.title);
+ popup.append(jQuery('
').append(titleLink));
if (locationData.snippet) {
- balloon.append(jQuery(' starts with the title of the item
- link.text(marker.options.title);
-
- // Clicking the link should take us to the map
- link.bind('click', {}, function (event) {
- link.toggleClass('current');
-
- if (that.clusterGroup) {
- that.clusterGroup.zoomToShowLayer(marker, function () {
- marker.fire('click');
- });
+ // this.locations holds points and shapes in load order, so the list
+ // interleaves them as they were added rather than grouping by type.
+ jQuery.each(this.locations, function (index, layer) {
+ that._buildListItem(list, layer._geolocationTitle, function () {
+ if (layer instanceof L.Marker) {
+ if (that.clusterGroup) {
+ that.clusterGroup.zoomToShowLayer(layer, function () {
+ layer.fire('click');
+ });
+ } else {
+ that.map.once('moveend', function () {
+ layer.fire('click');
+ });
+ that.map.flyTo(layer.getLatLng());
+ }
} else {
that.map.once('moveend', function () {
- marker.fire('click');
+ layer.openPopup();
});
- that.map.flyTo(marker.getLatLng());
+ that.map.fitBounds(layer.getBounds());
}
});
+ });
+ },
- link.appendTo(listElement);
- listElement.appendTo(list);
+ _buildListItem: function (list, title, onClick) {
+ var link = jQuery('')
+ .addClass('item-link')
+ .attr('href', 'javascript:void(0);')
+ .attr('role', 'button')
+ .text(title);
+ link.bind('click', {}, function () {
+ link.toggleClass('current');
+ onClick();
});
+ jQuery(' ').append(link).appendTo(list);
}
};
@@ -245,12 +283,12 @@ function OmekaMapSingle(mapDivId, center, options) {
var omekaMap = new OmekaMap(mapDivId, center, options);
jQuery.extend(true, this, omekaMap);
this.initMap();
- if (options.points && options.points.length) {
- for (var i = 0; i < options.points.length; i++) {
- var pt = options.points[i];
- this.addMarker([pt.latitude, pt.longitude], {title: pt.label, alt: pt.label}, pt.markerHtml);
+ if (options.locations && options.locations.length) {
+ for (var i = 0; i < options.locations.length; i++) {
+ var pt = options.locations[i];
+ this.addLayerFromGeometry(JSON.parse(pt.geometry_json), {title: pt.label, alt: pt.label}, pt.popupHtml);
}
- this.fitMarkers();
+ this.fitLocations();
}
}
@@ -266,13 +304,18 @@ function OmekaMapForm(mapDivId, center, options) {
this.drawnItems = new L.FeatureGroup();
this.map.addLayer(this.drawnItems);
+ L.drawLocal.edit.toolbar.buttons.edit = options.strings.editLocations;
+ L.drawLocal.edit.toolbar.buttons.editDisabled = options.strings.noLocationsToEdit;
+ L.drawLocal.edit.toolbar.buttons.remove = options.strings.deleteLocations;
+ L.drawLocal.edit.toolbar.buttons.removeDisabled = options.strings.noLocationsToDelete;
+
var drawControl = new L.Control.Draw({
position: 'topleft',
draw: {
marker: true,
- polyline: false,
- polygon: false,
- rectangle: false,
+ polyline: true,
+ polygon: true,
+ rectangle: true,
circle: false,
circlemarker: false,
},
@@ -285,16 +328,24 @@ function OmekaMapForm(mapDivId, center, options) {
this.map.addControl(drawControl);
this.map.on(L.Draw.Event.CREATED, function (event) {
- var latlng = event.layer.getLatLng();
- var marker = that.addLocation(latlng.lat, latlng.lng, that.map.getZoom(), null, '', '');
- marker.openPopup();
+ var isMarker = event.layerType === 'marker';
+ var layer = that.addLocation({
+ geometry_json: JSON.stringify(event.layer.toGeoJSON().geometry),
+ zoom_level: isMarker ? that.map.getZoom() : 0
+ });
+ if (isMarker) {
+ layer.openPopup();
+ }
});
this.map.on(L.Draw.Event.EDITED, function (event) {
event.layers.eachLayer(function (layer) {
- var latlng = layer.getLatLng();
- layer._locationData.latitude = latlng.lat;
- layer._locationData.longitude = latlng.lng;
+ layer._locationData.geometry_json = JSON.stringify(layer.toGeoJSON().geometry);
+ if (layer instanceof L.Marker) {
+ var latlng = layer.getLatLng();
+ layer._locationData.latitude = latlng.lat;
+ layer._locationData.longitude = latlng.lng;
+ }
});
});
@@ -316,25 +367,51 @@ function OmekaMapForm(mapDivId, center, options) {
OmekaMapForm.prototype = {
- addLocation: function (lat, lng, zoom, id, address, label) {
- var marker = L.marker([lat, lng]);
- this.drawnItems.addLayer(marker);
- this.markers.push(marker);
- this.markerBounds.extend([lat, lng]);
+ // Adds an editable layer (point marker or shape) from a location object and
+ // records its _locationData for form submission. locationData needs only a
+ // geometry_json string; id/zoom_level/address/label default sensibly.
+ addLocation: function (locationData) {
+ var geometry = JSON.parse(locationData.geometry_json);
+ var layer = L.GeoJSON.geometryToLayer(geometry);
+ this.drawnItems.addLayer(layer);
+ this.locations.push(layer);
+
+ // A point is represented by its own position; a shape by its bounding
+ // box, with the box center standing in as its point (matching how
+ // Location::beforeSave derives lat/lng server-side). `extent` is the
+ // shape we grow the map's overall bounds by.
+ var center, extent;
+ if (geometry.type === 'Point') {
+ extent = center = layer.getLatLng();
+ } else {
+ extent = layer.getBounds();
+ center = extent.getCenter();
+ }
+ this.locationBounds.extend(extent);
- marker._locationData = {id: id, latitude: lat, longitude: lng, zoom_level: zoom, address: address, label: label};
+ layer._locationData = {
+ id: locationData.id || null,
+ latitude: center.lat,
+ longitude: center.lng,
+ zoom_level: locationData.zoom_level || 0,
+ address: locationData.address || '',
+ label: locationData.label || '',
+ geometry_json: locationData.geometry_json
+ };
- var labelInput = jQuery('').val(label);
- var popupContent = jQuery('')
- .append(jQuery('').text(this.options.strings.label + ': ').append(labelInput));
+ this._bindLabelPopup(layer, layer._locationData.label);
- marker.bindPopup(popupContent[0], {autoPanPadding: [50, 50]});
+ return layer;
+ },
+ _bindLabelPopup: function (layer, initialLabel) {
+ var labelInput = jQuery('').val(initialLabel);
+ var popupContent = jQuery('')
+ .append(jQuery('').text(this.options.strings.label + ': ').append(labelInput));
+ layer.bindPopup(popupContent[0], {autoPanPadding: [50, 50]});
labelInput.on('input', function () {
- marker._locationData.label = jQuery(this).val();
+ layer._locationData.label = jQuery(this).val();
});
-
- return marker;
},
getLocationCount: function () {
diff --git a/views/shared/map/browse-json.php b/views/shared/map/browse-json.php
index 174a43c..394fd9c 100644
--- a/views/shared/map/browse-json.php
+++ b/views/shared/map/browse-json.php
@@ -2,12 +2,11 @@
$output = [];
foreach (loop('item') as $item):
$itemLocations = $locations[$item->id] ?? [];
- $rawTitle = metadata($item, 'display_title', ['no_escape' => true]);
+ $title = metadata($item, 'display_title', ['no_escape' => true]);
$thumbnailUrl = metadata($item, 'has thumbnail') ? record_image_url($item, 'thumbnail') : '';
$snippet = (string) metadata($item, ['Dublin Core', 'Description'], ['snippet' => 150]);
$itemUrl = record_url($item, 'show', true);
foreach ($itemLocations as $location):
- $displayTitle = $location->label ? "$rawTitle — {$location->label}" : $rawTitle;
$output[] = [
'id' => (int) $location->id,
'latitude' => (float) $location->latitude,
@@ -15,7 +14,8 @@
'zoom_level' => (int) $location->zoom_level,
'address' => $location->address,
'label' => $location->label,
- 'title' => $displayTitle,
+ 'geometry_json' => $location->geometry_json,
+ 'title' => $title,
'thumbnailUrl' => $thumbnailUrl,
'snippet' => $snippet,
'itemId' => (int) $item->id,
diff --git a/views/shared/map/input-partial.php b/views/shared/map/input-partial.php
index b745b30..6dca998 100644
--- a/views/shared/map/input-partial.php
+++ b/views/shared/map/input-partial.php
@@ -25,7 +25,7 @@
').text(locationData.snippet)); + popup.append(jQuery('
').text(locationData.snippet)); } - return balloon[0]; + return popup[0]; }, buildListLinks: function (container) { @@ -204,40 +240,42 @@ OmekaMapBrowse.prototype = { var list = jQuery('