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

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>
<script src="https://cdn.rawgit.com/boundlessgeo/ol-mapbox-style/v3.0.1/dist/olms.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();
  var styleJson = 'https://maps.tilehosting.com/c/7adeded9-932b-4c28-919a-3e911e76bad6/styles/basic/style.json?key=OJis8vsrAUXRO6j7VadM';
  olms.apply(map, styleJson);

//var center = ol.proj.transform(['0,0'], 'EPSG:4326', 'EPSG:3857');

var tileLayer = new ol.layer.Tile({
	source: new ol.source.XYZ({
  	url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  })
});

var view = new ol.View({
	center: [0,0],
	projection: ol.proj.get('EPSG:3857'),
	zoom: 3,
	minZoom: 3,
	maxZoom: 20
})

var map = new ol.Map({
	interactions: ol.interaction.defaults({
		
	}).extend([
    new ol.interaction.DoubleClickZoom(),
    new ol.interaction.DragAndDrop(),
    new ol.interaction.DragPan(),
    new ol.interaction.DragRotate(),
    new ol.interaction.DragRotateAndZoom(),
    new ol.interaction.DragZoom(),
    new ol.interaction.MouseWheelZoom(),
    new ol.interaction.Pointer(),
    new ol.interaction.Select()
	]),
	controls: ol.control.defaults({
    attribution: false,
    attributionOptions: ({ collapsible: false }),
    rotate: true,
    zoom: true
	}).extend([
    new ol.control.FullScreen(),
    new ol.control.MousePosition({
      coordinateFormat: ol.coordinate.createStringXY(4),
      projection: 'EPSG:3857'
    }),
    new ol.control.OverviewMap({ collapsed: true }),
    new ol.control.ScaleLine(),
    new ol.control.Rotate()
	]),
	overlay: [],
  layers: [tileLayer,loadedPegmanLayer,pegmanLayer],
	//layers: [tileLayer],
	target: 'map',
	loadTilesWhileAnimating: true,
	view: view
});

/* Add Pegman */
function pegmanAdd(){
	if(pegmanLayer.getSource().getFeatures().length < 1){
		console.log('Added Pegman');
		
		// Add Class to Body
		if(!$('body').hasClass('splitscreen')){
			$('body').addClass('splitscreen');
			
			// Update Map...