Can I create a shareable, interactive multi layer file with Affinity Photo 1 or 2?

[muttleytm]

I would like to create an image that can be easily shared which is based on a GIS multi layered view or map. As I understand it this can be done with Adobe Acrobat Pro or maybe it is Photoshop.

The area of the image is limited and not a whole continent or the world. So I have to specify the extent of the layers. They are all geo spatial layers so that information is there or can be there. However as they will all be the same size I don't think this is really needed for what I'm doing. 

I just want to have a list of two or three layers and the ability to select which ones to make visible. I suppose if there are other options available like transparency/opacity, contrast, brightness, etc. that might be useful as well.

I see that you can save Affinity photos as jpg and share those. They are certainly shareable,  but I don't think they are multi-layer or interactive files.

So if I have to do it as a link I assume the image is online somewhere and its opened and viewed with an Affinity viewer or some sort. So can this file be on some place like Dropbox or Google Drive or is it on an Affinity hosted site somewhere? if so is it free?

I also used Linux so there is no Linux version of Affinity. Does it run well in wine or on a virtual machine? I do have a drive I can boot up in with Windows on it, but it has been corrupted somehow. So maybe I can get it working again, but that is yet another project.

I'd love something free of course, but if I have to pay I'd love an alternative to Adobe anything.

 

Thanks

 

 

[Komatös]

Hello @muttleytm and welcome to the forum.

As far as I know, the only exchange format that can include layers is TIFF. Possibly also GIF. Both then, however, not interactive.

[muttleytm]

So it sounds like you are saying to make an interactive pdf with layers I would need either Affinity Publisher or Designer and use the file with a viewer that supports this. Is that correct?

I use Linux and from what I've read so far and it was about Photo 2 is that it doesn't work well at this time with wine.  I do have a separate hard drive with windows on it I can boot too if I have to. However, the last time I tried to do so the hard drive had been corrupted. I hadn't used it in a long time and that doesn't make much sense. I suppose it may have been corrupted when it was shut down the last time I used it. I can't remember anything about that.  I'd been putting off trying to test and diagnose that. So it looks like that project will go to the top of the list.

Assuming I can get it working, I'd consider getting Affinity, maybe the whole suite. Even if it is on windows, it isn't Adobe.

 

 

[muttleytm]

I have Affinity Suite now and and am attempting to make a file with layers exported as a pdf that I can turn off and on when read with pdfstudioviewer.

 

I have created a multilayer file in Publisher. I don't see any way to add like a little legend or layer list in the document though. In publisher I have a layers toolbox. I've looked for something like that in the export to pdf settings and don't see anything that sounds like that.

It seems like there would be a way within publisher to create a layers list, give each layer then name you want to appear, etc. and I suppose there probably is. There are lots of settings and terms, I just haven't found out which ones yet.

Can someone give a little description of the process and how to do this?

 

[muttleytm]

I have had a chance to do some more reading and playing around. I can find the layers control in publisher. I can also see how to export to pdf in a variety of ways. I don't see how to add a layer control element to the page I've created. Maybe I have to set up a page and insert a frame to hold the layer display contols or something, but I having seen anything like that to choose.

I see Designer also allows you to export or design pdfs, I assume it has the same capabilities.

 

[walt.farrell]

The Affinity applications do not let you create interactive PDF files, @muttleytm. You can certainly create a PDF which contains Layers (created by Layer > New Layer in Published or Designer) and put content in them, and Export them if you set the right Export options. 

But you can't make a control that will affect layer visibility. The user would have to use a PDF viewer/editor that provides that capability.

[muttleytm]

OK, thanks.

I posted here earlier about creating an interactive pdf with layers and the earlier response was you could create a page with layers and if it was interactive it could be read  and interacted with by others with a viewer or editor with that capability. I took that to mean it could create not only a file with layers but an interactive one as well.

So I won't be wasting any more time trying to figure out getting it to work. It won't be the first time I've wasted money. It does look like a pretty nice app, but I needed to do this specific thing. So I guess I'll have to figure out how to get access or find someone with Adobe. It sounds like it can do it and also work with georeferenced layers as well, which is what these are and will work better.

Maybe that feature could be added though??

[David in Яuislip]

If you do this with pdf then the users will need a compatible viewer and the knowledge to operate it
If you do this with svg then you can use Javascript to control what's displayed. The file can be hosted anywhere or emailed, the user just needs to open it in a browser, it's responsive too
In this example, move the mouse until you see a big plus sign, clicking will then toggle the legend on and off
Whilst the legend is visible, clicking on items in the list will toggle them on or off
Affinity can be used for the initial layout but after that you're on your own
I have no idea what "GIS multi layered view or map" means but if you can get the data in vector or bitmap formats then there is a chance
Only tested in Chrome Version 111.0.5563.112, file contains an image in webp format so not all browsers will show it

RedBlue.svg

[muttleytm]

I can export my various layer images from QGIS, a geographic information system app as geo pdf files. One of them started out as simply a tiff of a perspective map that was drawn. It had no geo references, unlike the other layers from google, bing, etc. However it did have a streets, bridges and other features that I could reference with the current map. So then the whole thing could be warped onto the current map layers. The old drawing was a 150 year old map of the area. So I want to overlay it onto the same spot today. The alignment isn't perfect, but pretty close.

I can export as svg, but I can't have georeferences not that affinity supports it. There's also a caveat that not do do limitations of my GIS app, but do to some limitations of python (I think it was) that it uses to create the svgs that they might not be very good.  I did export a few and did see that a file was created and I zoomed in a little and it appeared to be OK, but I didn't Iook closely.  I was mainly interested in getting the layers to turn on and off.

I did find that with the pdfs I exported all the same way and they should be the same size that when I put them into the page on Affinity I had to adjust them to fit, etc and they didn't line up all that well. I also so though that I can pick one corner to align and drag from there or something like that. I haven't tried that yet, but maybe they will give me the alignment I need. It seems like they should all have exported to the same size and extent so I figured they'd have to align.

I don't know anything about java though. Is that something that is from within affinity?

I also learned that html or html5 might be a way to do it and have read some ways of using some Adobe stuff that is free along with some other scripts both free and pay to turn it into a standalone html4 file, but I think like what you are suggested there is some programming involved.

I also came across something called openlayers which is a collection of scripts or something that you can use to create maps to put on web pages. So that is designed to work with GIS files to begin with, but I'm not sure it is a standalone app that I can just use. I wonder too if some Web page design software can't do this as well.

I think there is a solution to this, just not what I thought it was. This is also sort of a side project and I have a lot of other things higher priority I have to deal with, so I haven't had a whole lot of time to dig very deep or lean very much. Maybe that is good in this case though.

It's funny too. I went to open the file with my browser. It's been quite a while since I'd done this. I couldn't find any way to run a file manager while in the browser to find the file. I tried Firefox and it was the same. Then I looked online and saw that for chrome you use control O. Sometimes it's like traveling back to DOS and hot keys only then sometimes they were listed in the app.

[muttleytm]

I know nothing about java, but after I opened up the file in a browser and looked at the code I realized I might be able to use this script with my base images which I think I can create with Affinity. The example actually has more layers than I do, do it would simply be a matter of substituting the names and locations of the images in the script with the ones in my images as well as the names of the legend items.

I see that vs-code and visual studio are common editors and there are others such as vscodium for doing the editing.

This is a pretty big image and would need to be able to be panned and zoomed. I can zoom the sample file with hot keys, but not pan. However. I haven't looked a lot but have looked to see if that could be don with Affinity when making a base image and haven't found that it can. It would have to be  able to more all the images at the same time and by the same time as well, to keep them aligned. I see there is js code for lots of things,

So maybe this is fairly simple if I can get up to speed with java.

[David in Яuislip]

To pan and zoom you'll need to write your own event handlers
Here's one that moves the "Me" image using the arrow keys so if you change it to target your large, presumably background image, it will effectively pan it
Place it in the <script> section
However this is not really within the scope of the Affinity forums so this is my last comment, good luck with the Javascript if you decide to go this route

document.getElementById("main").addEventListener('keydown', function(event) {
  const key = event.key;
  var jump = 20;
  if (document.getElementById("Me").style.visibility === 'visible'){
    var XXX = parseFloat(document.getElementById("Me").getAttribute('x'));
    var YYY = parseFloat(document.getElementById("Me").getAttribute('y'));
    if (key === "ArrowRight"){XXX += jump;}
      else if (key === "ArrowLeft"){XXX -= jump;}
      else if (key === "ArrowUp"){YYY -= jump;}
      else if (key === "ArrowDown"){YYY += jump;}
    document.getElementById("Me").setAttribute('x', XXX);
    document.getElementById("Me").setAttribute('y', YYY);
  }
});

 

[muttleytm]

OK, thanks it is very helfpful, for what it's worth was wondering about the svg of the maps that I exported. I did put my glasses on and zoom in. They looked OK to me. They are a composite of a road map and an aerial photo for a fairly large area. I went to copy the text of the svg file to a text editor and also a word processor and things crashed. So looks like that might be any issue but as I thought more that is the code of the image. I'll really just  be referencing the name of the file and calling it. 

So really my svg will just  be the a handler like you just posted and the previous code in the example with a few modifications. So maybe the size of the image code won't much matter.

I also looked into the code in the sample and how the image placement and sizing works, first you specify the top left corner coordinates on the page and then the height  and width.  So I think that alone if i set them all the same should keep them lined up and I'll look more closely at your handler example.

I still know next to nothing of java, but I think I have a handle on what I need to figure out, a few terms to use in a java forum or if I can find anyone in person who knows something.  It looks like I might be able to do what I wanted to do without really having to actually learn much.

You've been a great help, thanks again.