OpenLayers Custom Marker with Drag and Drop - JSFiddle - JSFiddle - JSFiddle

by Daniel Pegues

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.4.2/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
<div id="map" class="map" tabindex="0"></div>

<div id="canvas-data">
  <div class="map-mouse-position"></div>
</div>

<div id="pegmanButtonDiv">
	<div id="pegmanMarker" class="draggable drag-drop"></div>
	<div id="pegmanButton"></div>
</div>

<div id="removebtn">Remove Marker</div>

SCSS

html,body { margin: 0; padding: 0; width: 100%; height: 100%; }
#map { width: 100%; height: 100%; }

#removebtn { padding: 0 10px; width: auto; height: 30px; background-color: #f00; position: fixed; bottom: 20px; right: 70px; z-index: 5; cursor: pointer; line-height: 30px; color: #fff; font-family: Arial, Helvetica, Sans-serif; font-size: 11px; }

#pegmanButtonDiv {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    width: 30px;
    height: 30px;
    background-color: #fff;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkitbox-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

	
	#pegmanButton {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url('https://image.ibb.co/nqagYG/pegman_sprites.png');
		background-position: -145px -23px;
		background-repeat: no-repeat;

		&:hover {
			background-position: -145px -75px;

			cursor: move;
			cursor: -webkit-grab;
			cursor:    -moz-grab;
			cursor:         grab;
			}
		
		&:active {
			background-position: -145px -75px;

			cursor: -webkit-grabbing;
			cursor:    -moz-grabbing;
			cursor:         grabbing;
			}
	}
}

/* Marker */
#pegmanMarker {
	position: absolute;
	z-index: 9999999;
	display: block;
	width: 32px;
	height: 32px;
	
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	
	opacity: 0.00;
	
	/* Pegman Marker Icon */
	&::before {
		position: relative;
		z-index: 5;
		display: block;
		width: 19px;
		height: 32px;
		content: ' ';
		background-image: url("https://image.ibb.co/nqagYG/pegman_sprites.png");
		background-repeat: no-repeat;
		background-position: -112px -4px;
		}
	
	/* Circle Marker */
	&::after {
		position: absolute;
		bottom: -18px;
		left: 50%;
		z-index: 4;
		margin-left: -11px;
		display: block;
		width: 22px;
		height: 22px;
		content: ' ';
		overflow: visible;
		visibility:...

JavaScript

/* ******************************************************* */
/* Load Marker */
$(document).ready(function(){
	pegmanDragDrop();
  interactionEvents();
});

/* ******************************************************* */
/* Pegman Marker */
function pegmanDragDrop(){
	console.log('Drag and Drop Function Called');
	
	// Grab Left/Right Direction of Mouse for Pegman Image
	var direction = '',
		oldx = 0,
		mouseMove,
		mousemovemethod = function(e){
			
			// Left
			if(e.pageX < oldx){
				direction = 'left';
				$('.draggable').addClass('left').removeClass('right');
			
			// Right
			} else if(e.pageX > oldx){
				direction = 'right';
				$('.draggable').addClass('right').removeClass('left');
			}
			oldx = e.pageX;
			console.log('Mouse moving: ' + direction);
			
			return oldx;
		}
	
	interact('.draggable').draggable({
		inertia: false,
		restrict: {
			restriction: "#geojson-box", // Load Where Pegman can be Dropped (GEOJSON)?
			endOnly: true,
			elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
		},
		onmove: function(e){
			
			mouseMove = document.addEventListener('mousemove',mousemovemethod);
			
			// Remove Class 'dropped' if Exists
			$('.draggable').removeClass('dropped');
			
			var pTarget = e.target,
			
			// Keep the Dragged Position in the data-x/data-y Attributes
			x = (parseFloat(pTarget.getAttribute('data-x')) || 0) + e.dx,
			y = (parseFloat(pTarget.getAttribute('data-y')) || 0) + e.dy;

			// Translate the Element
			pTarget.style.webkitTransform =
			pTarget.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

			// Update the Posiion Attributes
			pTarget.setAttribute('data-x', x);
			pTarget.setAttribute('data-y', y);
		},
		onend: function(e){
			console.log(e);
			
			//console.log(e.coordinate);
			
			//var lonlat = ol.proj.transform(e.coordinate,'EPSG:3857','EPSG:4326');
			
			//console.log(lonlat);
			
			//var lon = lonlat[0];
			//var lat = lonlat[1];
			
			//console.log('Dropped at Longitude: ' +...