Closest position of feature

Copy

var map;

document.addEventListener('cercalia-ready', initMap);

function initMap() {

var map = new cercalia.Map({
    target: 'map',
    controls: []
  });

//Linestring
  var wkt = 'LINESTRING(2.1387898768073272 41.39520603528783,2.140110400274983 41.39671448276599,2.1405146421528367 41.396924174465994,2.140649389445455 41.397208271810996,2.141403974284115 41.39770882123173,2.14099074925342 41.39805379222028,2.1422843232625524 41.398425817689485,2.1428502618915473 41.39867608816152,2.146515388250755 41.40094200634792,2.147665231814428 41.401158448099295,2.148168288373535 41.400752619219645,2.150512891265087 41.39919691819304,2.150782385850323 41.39892635766256,2.1513573076321593 41.398128197485846,2.151896296802631 41.39760059465908,2.1580138238874853 41.401462818083246,2.1581575543329445 41.40140870796884,2.159163667451158 41.400576759245496,2.1603314773205136 41.40143576303177,2.1602775784034662 41.40148987312344)';
  var feature = new cercalia.Feature({
    wkt: wkt
  });

var marker = new cercalia.Marker({
    position: new cercalia.LonLat(2.1387898768073272, 41.39520603528783)
  });
  map.addFeature(feature);
  map.addMarker(marker);
  map.centerToFeatures(feature);

var olMap = map.getMap();
  var projectionCode = map.getProjectionCode();
  olMap.on('pointermove', function(event) {
    var mousePosition = new cercalia.LonLat(event.coordinate[0], event.coordinate[1], projectionCode);
    var closestPosition = feature.getClosestCoordinate(mousePosition);
    marker.setPosition(closestPosition);
  });

}

<!DOCTYPE html>
<html>
  <head>
    <title>Closest position of feature</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var map;
      
      document.addEventListener('cercalia-ready', initMap);
      
      function initMap() {
      
        var map = new cercalia.Map({
          target: 'map',
          controls: []
        });
      
        //Linestring
        var wkt = 'LINESTRING(2.1387898768073272 41.39520603528783,2.140110400274983 41.39671448276599,2.1405146421528367 41.396924174465994,2.140649389445455 41.397208271810996,2.141403974284115 41.39770882123173,2.14099074925342 41.39805379222028,2.1422843232625524 41.398425817689485,2.1428502618915473 41.39867608816152,2.146515388250755 41.40094200634792,2.147665231814428 41.401158448099295,2.148168288373535 41.400752619219645,2.150512891265087 41.39919691819304,2.150782385850323 41.39892635766256,2.1513573076321593 41.398128197485846,2.151896296802631 41.39760059465908,2.1580138238874853 41.401462818083246,2.1581575543329445 41.40140870796884,2.159163667451158 41.400576759245496,2.1603314773205136 41.40143576303177,2.1602775784034662 41.40148987312344)';
        var feature = new cercalia.Feature({
          wkt: wkt
        });
      
        var marker = new cercalia.Marker({
          position: new cercalia.LonLat(2.1387898768073272, 41.39520603528783)
        });
        map.addFeature(feature);
        map.addMarker(marker);
        map.centerToFeatures(feature);
      
        var olMap = map.getMap();
        var projectionCode = map.getProjectionCode();
        olMap.on('pointermove', function(event) {
          var mousePosition = new cercalia.LonLat(event.coordinate[0], event.coordinate[1], projectionCode);
          var closestPosition = feature.getClosestCoordinate(mousePosition);
          marker.setPosition(closestPosition);
        });
      
      }
    </script>
  </body>
</html>