I have this map that will place coordinates into inputfields when you click on the map. It would be great to have a marker to place on the map that will show where was clicked.
Only thing is that the examples I find will leave all of the points on the map when you re-click it, while I only need a marker on the last position clicked on the image. Anyone that can help with this? It is like this or this example. The first one is good but will place marker image under the image itself, and the second one will leave all of the dots on the image.
All help is appreciated!
I have this map that will place coordinates into inputfields when you click on the map. It would be great to have a marker to place on the map that will show where was clicked.
Only thing is that the examples I find will leave all of the points on the map when you re-click it, while I only need a marker on the last position clicked on the image. Anyone that can help with this? It is like this or this example. The first one is good but will place marker image under the image itself, and the second one will leave all of the dots on the image.
All help is appreciated!
Share Improve this question edited May 23, 2017 at 11:52 CommunityBot 11 silver badge asked Jun 29, 2016 at 7:54 dnskodnsko 1,0575 gold badges18 silver badges30 bronze badges 4- 2 You get the logic. Now to remove any previous one, you could just set a class or id or whatever and remove any previous one, e.g: jsfiddle/95vczfve/37 – A. Wolff Commented Jun 29, 2016 at 7:59
- Well that is exactly what I was looking for. Javascript is certainly not my area of expertise so it was best to ask. Thanks a lot! @A.Wolff – dnsko Commented Jun 29, 2016 at 8:00
-
Hmm, this is adding a
divto the body and then setting the dot in the div, however this will not work for an actual image? When I do it will put it behind the image i guess – dnsko Commented Jun 29, 2016 at 8:17 - Then this isn't what you are looking for. You should search for "edit image using canvas" but this is subject to same origin policy. See e.g: stackoverflow./questions/32053687/… But again, you'd need to remove previoud marker – A. Wolff Commented Jun 29, 2016 at 8:21
2 Answers
Reset to default 5Extending the accepted solution on Add a marker to an image in javascript?
I just added a unique class to the appending div and then removed all elements with that class on every click event.
MODIFIED CODE:
$(document).ready(function(){
$(document).click(function (ev) {
if($('div').length < 3) {
$(".marker").remove(); // remove all existing markers
$("body").append(
$('<div class="marker"></div>').css({ // include a class
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '10px',
height: '10px',
background: '#000000'
})
);
}
});
});
See the action: JSFIDDLE
Update as requested in ment: FIDDLE
Not the best method, but the simpliest I coult think about Shortest code I could make to do it:
<!doctype html>
<html>
<head>
<title>
Bla!
</title>
<style type='text/css'>
div.divImgContainer { position:absolute; top:10px; left:10px; bottom:10px; right:10px; border: 1px solid black; }
div#divMark { position:absolute; top:-100px; left:-100px; background-color:red; width:3px; height:3px;}
</style>
<script type='text/javascript'>
function ShowMarker(event) {
//console.log (event);
console.log (event);
var mark = document.getElementById('divMark');
mark.style.top = (event.clientY)+'px';
mark.style.left = (event.clientX) +'px';
}
</script>
</head>
<body>
<div class='divImgContainer' onclick='ShowMarker(event);'>
<!-- set image as background to this div -->
</div>
<div id='divMark' ><!-- you can change the "x" to image of marker if needed --></div>
</body>
</html>