Popmap - popup editor

#1

I’ve been trying to put a popup editor together for some time. It started out as a ‘mindmap with a difference’ idea but the recent forum question about points/overlays prompted me to tidy it up a bit and put it on github here in case it helps.

https://wattaged.github.io/popmap/

I’ve called it Popmap. I made it on a mobile phone and it works for me on that screen size but on a larger laptop screen the coordinates get out of sync. (one of many idiosyncrasies that I need help with.)

There are several other problems, as you’ll see, but I thought I’d float it as a ‘proof of concept’ first and perhaps some general suggestions would be forthcoming. Maybe I can ask for help with specifics in seperate threads.

The code is amateur and the css eccentric and probably totally redundant now in light of 5.2.1’s new methods. I still haven’t learnt the old methods.

This grew rather organically over a long period and, although it works for me on a mobile, I’m sure it can be done much more efficiently now.

Please take a look. Best viewed on a mobile I expect. Feedback, suggestions and corrections would be very welcome if there is any interest.

6 Likes
The Worst Feature of Tiddlywiki
#2

Great plugin, this reminds me of the Skitch | Evernote

#3

Thanks for taking a look linonetwo! There is still a lot of room for improvement. The table - eventcatcher combo seems very ‘old school’ but it seems to work on a mobile. There is no javascript used.

I think it might be useful for games too but I’ll wait to see if the idea gets shot down before going further.

Thanks for your comment - Happy 2022, Watt.

#4

Hi Walt,
a very usefull plugin! Thanks for this!
My question is: Can I use it with external images. So far, entering the URL into the background field does not work. Could you make this possible?
Best wishes Jan

#5

Hi JanJo, thanks for the feedback.

Yes I think it can work with external files via an url. I will try to make it and add the option. It may take a little while.

Locally stored background images also work for me with some css changes but my ‘environment’ is the wonderful Quinoid on Android. Other browsers might not allow it - it’s on my list to try.

I have Popmap setup for internal images only at the moment just for the sake of simplicity.

I really appreciate your taking the time to look at it. If the grid table - eventcatcher approach is viable I think it might work for games.

Happy 2022!

1 Like
#6

Hi @JanJo ,
I think I have it working now for external urls. Try it out if you get a chance, there are some ‘how to’ instructions included.

https://wattaged.github.io/popmap/

It’s not the most sophisticated solution but it works for me - probably best viewed on a mobile or tablet.

There is still a lot to be fixed, many flaws and a lot of tidying and refinement to be done but it works (for me) as a proof of concept. All feedback welcome - I hope to keep improving it.

There are some really dazzling graphics and popup libraries appearing here now, incredible stuff!

Happy 2022 everybody!

2 Likes
#7

@Watt thanks for your work here, I know it stemmed from my question in another thread.

I have not yet got to test it, but it is important to me that I can set as many as a hundred (perhaps more) points on my map, is it still limited to 10 as earlier?

#8

Happy 2022 @TW_Tones !

No, this isn’t the tool for 100 points - it’s hard coded for up to 10 at the moment. That seemed to be the comfortable max for my mobile screen. It’s a good feature suggestion for a future iteration though, I’ll add it to the list of possibilities.

I’d recommend taking a look at it - close everything and open ‘Floorplan’. I was imagining a small floor!

2 Likes
#9

Hi Walt,
thanks for implementing external-URLs.
The Moon-Picture-map is cool… But I haf some difficulties inserting an Image myself and positioning the markers.

I could not find an URL-Field in the wizard and inserting it directly to the moon-tiddler, the image stayed the same.
The steps two and three in the wizard could be one, in my opinon - and it would be good if only the pin edited was shown when its tab is open.
It could be more clear, which tiddler you edit.

Best wishes for 2022 Jan

#10

Hi Jan
Yes, it is very rough around the edges. Still very early days, but thanks for trying it out.

If you have an url for an external image then try these steps.

  • Create a new tidddler and give it a simple name, tag it ‘popmap’ and ‘extimage’
  • Give it a field named “bkground” and paste in the url of your internet image as its value.
  • Save it and close it.
  • Go to the Popmap editor.
  • Go to ‘Choose background’. Select your new tiddler title from the dropdown and click the external image button. Your background should appear.

To add ‘pins’:

Go to pin options and select pin 1 from the dropdown - note that only that selected pin is now active for edits.

  • Give it a radius, colour and icon. (nb. if it doesn’t show up over the background, select the next pin in line eg 2 and then re-select 1, the pin you’re working on - sorry, a temporary bug)
  • Tap the screen or click to position your pin on the background.

See how that works for you. I know the interface is very crude and clunky so feedback like yours is really helpful, thanks. I’m waiting a bit to see if there is any interest before spending too many more hours on it.

Instructions for adding text to the popup are on the page under ‘How to start?’ They should work - but please come back to me if you don’t have any luck. Writing instructions is hard!

Good luck! Watt

1 Like