Simple working prototype for specifying points on a football pitch e g key feature locations Details Click to add points to a football pitch click to add a point hover over the point and click it again to remove it The points can them be exported listed to be used in other projects Author Benjamin Kenwright Version 0 1 3 document body style minHeight 600px let numPointsDiv document createElement div document body appendChild numPointsDiv numPointsDiv innerHTML Num Points 0 let imgurl https webgpulab xbdev net var images footballfield jpg let img document createElement img img src imgurl document body appendChild img img style cursor crosshair img style display block img style position relative let numpoints 0 let points function addPoint x y let divMarker document createElement div document body appendChild divMarker divMarker style width divMarker style height 6px divMarker style borderRadius 50 divMarker style position absolute divMarker style left x 3 px divMarker style top y 3 px divMarker style backgroundColor red divMarker onclick function numpoints numPointsDiv innerHTML Num Points numpoints divMarker parentElement removeChild divMarker end addPoint img onclick function e numpoints cursorX e pageX cursorY e pageY const x e pageX e currentTarget offsetLeft const y e pageY e currentTarget offsetTop addPoint cursorX cursorY points x y n numPointsDiv innerHTML Num Points numpoints let eb document createElement button document body appendChild eb eb innerHTML Export Points eb onclick function console log numpoints numpoints console log points points console log Click mouse cursor on image to add remove key marker points pixel coordinates
erRadius 50 divMarker style position absolute divMarker style left x 3 px divMarker style top y 3 px divMarker style backgroundColor red divMarker onclick function numpoints numPointsDiv innerHTML Num Points numpoints divMarker parentElement removeChild divMarker end addPoint img onclick function e numpoints cursorX e pageX cursorY e pageY const x e pageX e currentTarget offsetLeft const y e pageY e currentTarget offsetTop addPoint cursorX cursorY points x y n numPointsDiv innerHTML Num Points numpoints let eb document createElement button document body appendChild eb eb innerHTML Export Points eb onclick function console log numpoints numpoints console log points points console log Click mouse cursor on image to add remove key marker points pixel coordinates