hover thumbnails

Author: ddunc23

memorymap_toolkit/settings/base.py

@@ -177,6 +177,7 @@
     '': {
         'site_small': {'size': (300, 175), 'crop': 'smart', 'upscale': True},
         'banner': {'size': (600, 350), 'crop': 'smart', 'upscale': True},
+        'hover_thumb': {'size': (100, 100), 'crop': 'smart', 'upscale': True},
     },
 }
 
@@ -216,12 +217,13 @@
     'CACHE_TIMEOUT': (0, 'If you have a large number of interactive features and heavy site traffic, you can optionally cache them to reduce load on the database, at the expense of having changes to your map visible on the website immediately. This setting determines the number of minutes the tiles are cached for.'),
     'MAPBOX_VERSION': ('v1.11.0', 'The version of the MapboxGL library you want to use to display your map. Versions above v1.11.0 hosted by Mapbox require a Mapbox key.'),
     'LAYERS_MENU_TITLE': ('Themes', 'The name of the switchable layers menu.'),
-    'SHOW_AUDIO_PLAYER_TITLES': (True, 'Whether or not audio player titles are visible. Useful if your audio has the same title as the map feature that it\'s attached to.')
+    'SHOW_AUDIO_PLAYER_TITLES': (True, 'Whether or not audio player titles are visible. Useful if your audio has the same title as the map feature that it\'s attached to.'),
+    'HOVER_THUMBNAILS': (True, 'Whether image thumbnails are shown on hovering over a map feature'),
 }
 
 CONSTANCE_CONFIG_FIELDSETS = {
-    'Site Settings': ('SITE_TITLE', 'LOGO_IMAGE', 'WELCOME_MESSAGE', 'CUSTOM_CSS', 'LAYERS_MENU_TITLE', 'SHOW_AUDIO_PLAYER_TITLES', 'SITE_METADATA', 'CACHE_TIMEOUT'),
-    'Map Settings': ('MAP_CENTER_LATITUDE', 'MAP_CENTER_LONGITUDE', 'BOUNDS_SW_LONGITUDE', 'BOUNDS_SW_LATITUDE', 'BOUNDS_NE_LATITUDE', 'BOUNDS_NE_LONGITUDE', 'ZOOM', 'MIN_ZOOM', 'MAX_ZOOM', 'SCALE', 'PITCH', 'BEARING', 'MAPBOX_VERSION'),
+    'Site Settings': ('SITE_TITLE', 'LOGO_IMAGE', 'WELCOME_MESSAGE', 'CUSTOM_CSS', 'LAYERS_MENU_TITLE', 'SHOW_AUDIO_PLAYER_TITLES', 'SITE_METADATA', 'CACHE_TIMEOUT', 'HOVER_THUMBNAILS'),
+    'Map Settings': ('MAP_CENTER_LATITUDE', 'MAP_CENTER_LONGITUDE', 'BOUNDS_SW_LATITUDE', 'BOUNDS_SW_LONGITUDE',  'BOUNDS_NE_LATITUDE', 'BOUNDS_NE_LONGITUDE', 'ZOOM', 'MIN_ZOOM', 'MAX_ZOOM', 'SCALE', 'PITCH', 'BEARING', 'MAPBOX_VERSION'),
     'Map Style': ('BASE_MAP_STYLE_URL', 'MAPTILER_KEY', 'MAPBOX_KEY', 'SWITCHABLE_LAYERS', 'FEATURE_LABEL_FONT', 'BASE_MAP_STYLE_FILE')
 }
 

mmt_map/migrations/0031_auto_20230109_1535.py

@@ -0,0 +1,28 @@
+# Generated by Django 3.1.13 on 2023-01-09 15:35
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mmt_map', '0030_auto_20221215_1536'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='line',
+            name='thumbnail_url',
+            field=models.CharField(blank=True, max_length=300),
+        ),
+        migrations.AddField(
+            model_name='point',
+            name='thumbnail_url',
+            field=models.CharField(blank=True, max_length=300),
+        ),
+        migrations.AddField(
+            model_name='polygon',
+            name='thumbnail_url',
+            field=models.CharField(blank=True, max_length=300),
+        ),
+    ]

mmt_map/models.py

@@ -57,6 +57,7 @@ class AbstractFeature(models.Model):
 	banner_image = models.ImageField(upload_to=feature_directory_path, null=True, blank=True, verbose_name='Banner Image')
 	banner_image_copyright = models.CharField(max_length=240, blank=True)
 	popup_image = models.ImageField(upload_to=feature_directory_path, null=True, blank=True)
+	thumbnail_url = models.CharField(max_length=300, blank=True)
 	popup_audio_title = models.CharField(max_length=128, blank=True)
 	popup_audio_slug = models.SlugField(max_length=128, blank=True)
 	popup_audio_file = FilerFileField(null=True, blank=True, related_name='%(app_label)s_%(class)s_popup_audio_file', on_delete=models.SET_NULL)
@@ -88,13 +89,13 @@ def get_banner_image_url(self):
 		else:
 			return ''
 
-	def __str__(self):
-		return self.name
-
 	def get_absolute_url(self):
 		feature_type = self.get_type()
 		return '/?feature_type=' + feature_type + '&id=' + str(self.id)
 
+	def __str__(self):
+		return self.name
+
 	class Meta:
 		abstract = True
 
@@ -106,7 +107,12 @@ class Point(AbstractFeature):
 	def save(self, *args, **kwargs):
 		# Model has to be saved first to access the tags
 		super(Point, self).save(*args, **kwargs)
-		#self.tag_str = ', '.join(self.tags.names())
+		self.tag_str = ', '.join(self.tags.names())
+		# The hover thumbnail url needs to be saved in the DB because it needs to be accessed from the MVTs, not the API
+		if self.popup_image:
+			thumbnail_url = get_thumbnailer(self.popup_image)['hover_thumb'].url
+			self.thumbnail_url = thumbnail_url
+		super(Point, self).save(*args, **kwargs)
 
 
 
@@ -117,6 +123,10 @@ class Polygon(AbstractFeature):
 	def save(self, *args, **kwargs):
 		super(Polygon, self).save(*args, **kwargs)
 		self.tag_str = ', '.join(self.tags.names())
+		# The hover thumbnail url needs to be saved in the DB because it needs to be accessed from the MVTs, not the API
+		if self.popup_image:
+			thumbnail_url = get_thumbnailer(self.popup_image)['hover_thumb'].url
+			self.thumbnail_url = thumbnail_url
 		super(Polygon, self).save(*args, **kwargs)
 
 
@@ -127,6 +137,10 @@ class Line(AbstractFeature):
 	def save(self, *args, **kwargs):
 		super(Line, self).save(*args, **kwargs)
 		self.tag_str = ', '.join(self.tags.names())
+		# The hover thumbnail url needs to be saved in the DB because it needs to be accessed from the MVTs, not the API
+		if self.popup_image:
+			thumbnail_url = get_thumbnailer(self.popup_image)['hover_thumb'].url
+			self.thumbnail_url = thumbnail_url
 		super(Line, self).save(*args, **kwargs)
 
 

mmt_map/views.py

@@ -80,7 +80,7 @@ def vector_tile(request, z, x, y, tile_format):
 		),
 		"mvtgeom" AS (
 			SELECT ST_AsMVTGeom(ST_Transform("t"."geom", 3857), "bounds"."b2d") AS "geom", 
-				   "id", "name", "weight", "theme_id", "tag_str"
+				   "id", "name", "weight", "theme_id", "tag_str", "thumbnail_url"
 			FROM  {table} "t", "bounds"
 			WHERE ST_Intersects("t"."geom", ST_Transform("bounds"."geom", 4326)) AND "published" = TRUE
 		) 

project_static/css/styles.css

@@ -448,6 +448,12 @@ article img {
 		width: 22rem;
 	}
 
+	.hover_popup .mapboxgl-popup-content {
+		width: 4rem;
+		margin: 0;
+		padding: 0;
+	}
+
 	.popup_player #play_button_container {
 		border-radius: 2.5rem;
 		height: 2.5rem;
@@ -464,6 +470,9 @@ article img {
 	.detail_popup .mapboxgl-popup-content {
 		width: 22rem;
 	}
+	.hover_popup .mapboxgl-popup-content {
+		width: 6rem;
+	}
 }
 
 /* Extra large devices (large desktops, 1200px and up) */

project_static/js/interactionHandler.js

@@ -8,7 +8,8 @@ MmtMap.hoverInteractions = {
 
 	smallPopup: new mapboxgl.Popup({
     	closeButton: false,
-    	closeOnClick: false
+    	closeOnClick: false,
+		className: 'hover_popup'
 	}),
 
 	togglePopup: function(sourceLayer) {
@@ -27,7 +28,13 @@ MmtMap.hoverInteractions = {
 	    // Popup
 	    map.getCanvas().style.cursor = 'pointer';
 	    let name = feature.properties.name;
-	    MmtMap.hoverInteractions.smallPopup.setLngLat(coords).setHTML('<p class="text-center">' + name + '</p>').addTo(map);
+		let thumbnail = feature.properties.thumbnail_url;
+
+		if (MmtMap.settings.hoverThumbs) {
+	    	MmtMap.hoverInteractions.smallPopup.setLngLat(coords).setHTML('<div class="popup_header"><img alt="location thumbnail" src="' + thumbnail + '" class="m-0 p-0" /img><p class="m-0 p-0 text-center">' + name + '</p></div>').addTo(map);
+		} else {
+			MmtMap.hoverInteractions.smallPopup.setLngLat(coords).setHTML('<p class="m-0 p-0 text-center">' + name + '</p>').addTo(map);
+		}
 	}
 }
 

templates/mmt_map/index.html

@@ -31,7 +31,8 @@
 		pitch: {{ config.PITCH }},
 		bearing: {{ config.BEARING }},
 		scale: '{{ config.SCALE }}',
-		font: '{{ config.FEATURE_LABEL_FONT}}'
+		font: '{{ config.FEATURE_LABEL_FONT}}',
+		hoverThumbs: {% if config.HOVER_THUMBNAILS %}true{% else %}false{% endif %}
 	},
 
 	themes: [