Openlayers - Drag Features

by barbarina

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

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

/*#pmv {
  
    background-color: rgba(40,40,40,.8);
}*/


      
.testoPMV{
  font-family: 'Share Tech Mono', monospace;
  line-height: 12px; 
  font-size: 12px;
  color: orange;
  position: absolute;
}

.testoPMVCenter{
  font-family: 'Share Tech Mono', monospace;
  line-height: 12px; 
  color: orange;
  text-align: center;
}

.PMV3X20IMGIMG{
  background-color: black; border-style: solid; border-width: 3px; border-color: red;
                    padding: 5px; width:260px;
}

.PMV3X15IMG{
  background-color: black; border-style: solid; border-width: 3px; border-color: red;
                    padding: 5px; width:185px;
}

.PMV4X15{
  background-color: black; border-style: solid; border-width: 3px; border-color: green;
                    padding: 5px; width:140px;
}

.PMV3X20IMGIMGverde{
  background-color: black; border-style: solid; border-width: 3px; border-color: green;
                    padding: 5px; width:260px;
}

.linkDX{
   position: absolute;
    top: 50%;
    transform: translateY(-50%);
   
}

.imgFinta{
  background-color: black;
  width: 32px;
  height: 32px;
  display: inline-block;
  color: black;
}

.imgVera{
  background-color: black;
  background-image: url("https://s13.postimg.org/dnn00gtwz/image.gif");
  width: 32px;
  height: 32px;
  display: inline-block;
  color: black;
}

JavaScript

//coordinate di marker e div del pmv 
var coord1 = ol.proj.fromLonLat([11.35804,44.526630000000004]);

//esempio polyline tabella TBATH8
var polyline = [[44.524640000000005, 11.3605],[44.524660000000004, 11.36045],[44.52472, 11.36034],[44.524820000000005, 11.360180000000001],[44.52494, 11.35998],[44.52512, 11.359720000000001],[44.52534000000001, 11.35946],[44.5255, 11.35928],[44.52555, 11.35923],[44.525710000000004, 11.35908],[44.525850000000005, 11.358960000000002],[44.526, 11.358830000000001],[44.52611, 11.358730000000001],[44.5262, 11.358640000000001],[44.526360000000004, 11.358450000000001],[44.52646, 11.35832],[44.52653, 11.3582],[44.526630000000004, 11.35804],[44.526680000000006, 11.357940000000001],[44.52673, 11.357830000000002],[44.526790000000005, 11.35771],[44.52687, 11.35749],[44.52693, 11.357310000000002],[44.52696, 11.35716],[44.527, 11.35702],[44.52702, 11.356910000000001],[44.52705, 11.35674],[44.527080000000005, 11.3565],[44.527100000000004, 11.356330000000002],[44.52711, 11.356200000000001],[44.527120000000004, 11.356140000000002],[44.52713000000001, 11.356050000000002],[44.52716, 11.3558],[44.52718, 11.35561],[44.5272, 11.35552],[44.527240000000006, 11.355160000000001],[44.52727, 11.35499],[44.527300000000004, 11.354830000000002],[44.52734, 11.354610000000001],[44.52738, 11.354410000000001],[44.5275, 11.35402],[44.527660000000004, 11.353470000000002],[44.5277, 11.353340000000001],[44.527750000000005, 11.35316],[44.528090000000006, 11.352150000000002],[44.52817, 11.3519],[44.52828, 11.351510000000001],[44.5283, 11.35147],[44.52845000000001, 11.35102],[44.52857, 11.35064],[44.52861, 11.350510000000002]];
polyline.map(function(l) {
  return l.reverse();
});
var route = new ol.geom.LineString(polyline)
    .transform('EPSG:4326', 'EPSG:3857');


var styleRoute = new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 8,
      color: [0, 0, 200, 1]
    })
  });

var routeFeature = new ol.Feature({
  type: 'route',
  geometry: route
});
...