[openstreetmap/openstreetmap-website] Image download with user feedback (PR #6192)

[Marwin Hochfelsner]

@hlfan commented on this pull request.



> @@ -7,8 +7,33 @@ L.OSM.share = function (options) {
         });
 
   function init(map, $ui) {
-    // Link / Embed
+    $("#export-image").on("turbo:submit-end", function (event) {

Could this code block be moved into the `// Image` section just below?
I'd suggest just below the csrf input.

> @@ -7,8 +7,33 @@ L.OSM.share = function (options) {
         });
 
   function init(map, $ui) {
-    // Link / Embed
+    $("#export-image").on("turbo:submit-end", function (event) {
+      if (event.detail.success) {
+        event.detail.fetchResponse.response.blob().then((blob) => {
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          const contentType = blob.type;
+          let extension = "bin";
+          if (contentType === "image/png") extension = "png";
+          else if (contentType === "image/jpeg") extension = "jpg";
+          else if (contentType === "image/svg+xml") extension = "svg";
+          else if (contentType === "image/webp") extension = "webp";
+          else if (contentType === "application/pdf") extension = "pdf";
+          a.download = `map.${extension}`;

For the directions route download, I made the filename translatable.
This would be nice to have here, too.

> +          const contentType = blob.type;
+          let extension = "bin";
+          if (contentType === "image/png") extension = "png";
+          else if (contentType === "image/jpeg") extension = "jpg";
+          else if (contentType === "image/svg+xml") extension = "svg";
+          else if (contentType === "image/webp") extension = "webp";
+          else if (contentType === "application/pdf") extension = "pdf";
+          a.download = `map.${extension}`;

`blob.type` is normally used for automatically determining the file extension. Why is this done manually here?

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6192#pullrequestreview-3035355576
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6192/review/3035355576 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250719/6c437c8d/attachment.htm>