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>
<div id="pmv" class="panel-body" style="padding: 0 15px 0 0;">
    <div class="row">
        <div class="col-sm-12" style="display:inline-flex;">
    <div class="PMV3X20IMGIMG">
                  <span class="pull-left" style="margin-right: 10px; margin-left:4px;">
                  <span class="imgFinta">a</span>
                  <img src="https://s13.postimg.org/opwocfvb7/B_UP.gif" style="width: 32px; padding:0px;"  />
                  </span>
                  <span class="testoPMV">
                    <div>SE PIOVE RIDUCI LA</div>
                    <div>VELOCITA' ! ANCHE</div>
                    <div>SU ASFALTO DRENANTE</div>
                  </span>
                  </div>      
        </div>
        </div></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.151112093326024, 43.83322764306724]);
var coord2 = [coord1[0]+200, coord1[1]+200];

//stili
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'
  })
});  
 

//marker del pmv
var marker = new ol.geom.Point(coord1);
var featureMarker = new ol.Feature({
	geometry: marker,
  type: 'Point',
  properties: {pmvAperto: false}});

//div con il contenuto del pmv
var pmvEle = document.getElementById('pmv');
var pmv = new ol.Overlay({
  //position: coord2,
  positioning: 'center-center',
  element: pmvEle,
  stopEvent: false,
  dragging: false
});
var featurePmv = new ol.Feature(pmv);

//linea che collega marker a contenuto
var line = new ol.geom.LineString(coord1, coord2);
var lineFeature = new ol.Feature(line);


//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,...