How would you do this?

[heldercervantes]

Check this out for the marker:

http://www.heldercervantes.com/experiments/ifim/marker.html

• Pure CSS;
• Minimal markup, just the marker div with inline left and top position (can be % of course) and a span surrounding the number;
• The main marker div is just 1x1 pixels making the position accurate;
• Bubble is a ::before pseudo-element;
• Features active state just by adding/removing css class;
• Used plain red and green for colors. Can this be read from the theme's colors?

[kongondo]

Guys, these are very nice!

@heldercervantes, are you able to incorporate these into your original sketch please?

Edited December 24, 2015 by kongondo

[tpr]

@heldercervantes

Your bubbles are only designed to hold 1 character, isn't that too limiting?

[kongondo]

Three characters min+max, I think.

[heldercervantes]

I've updated it on the original link:

http://heldercervantes.com/experiments/ifim/

Added a behavior for turning the last marker green when clicked/dragged, and tested one with 999 for the number. Don't think anyone will ever need more than two digits though.

I'm on a mac and don't have a pc for proper cross-browser testing, so let me know if you detect any problems.

EDIT: Re-uploaded file after adding a little keyboard control, complete with shift-key for 10px skips.

[rick]

heldercervantes

Works great on linux with FF, Chrome, and Opera

[heldercervantes]

@kongondo

Got a preliminary version I can test drive? I'm almost done building the website and need to put something together for that section. If not, I'll just slap in there a couple of fields for x and y.

[kongondo]

Sorry I got delayed with other stuff + sluggish coming off the holidays ...I'll put something up tonight or tomorrow morning....

[kongondo]

Sorry guys...Couldn't do this earlier and could not implement the latest marker designs (callout and tear drop [gmap]). CSS gave me a lot of grief so I stopped. Would appreciate if either of you could work out if/how all three marker styles could be available but still allow marker positions to remain in place, thanks!

Started a support forum here:

https://processwire.com/talk/topic/11863-module-imagemarker-fieldtype-inputfield/