Openlayers - Drag Features

by nerdess

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/6.5.0/index.js"></script>
<div id="map" class="map"></div>

CSS

html, body, #map { width:100%; height:100%; margin:0; }
#map {
    position: absolute;
    z-index: 5;
}

JavaScript

import * as ol from 'ol';

var coord1 = [-5707673.76, -3499420.81];
var coord2 = [-6707673.76, -3499420.81];

/*var lineStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({ color: '#ffcc33', width: 3 })
});*/
var styleMarker = new ol.style.Style({
  image: new ol.style.Icon({
    scale: .7, anchor: [0.5, 1],
    src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker.png'
  })
});

var marker1 = new ol.geom.Point(coord1);
var featureMarker1 = new ol.Feature(marker1);
//var marker2 = new ol.geom.Point(coord2);
//var featureMarker2 = new ol.Feature(marker2);

var line = new ol.geom.LineString([coord1, coord2]);
var lineFeature = new ol.Feature(line);

/*const circleFeature = new ol.Feature({
                geometry: ol.geom.Polygon.circular(coord1, 1000)
              });*/


var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
  	features: [featureMarker1]
  }),
  style: [styleMarker]
});

var map = new ol.Map({
	target: 'map',
  layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vector],
  view: new ol.View({ center: coord1, zoom: 5 })
});