1

I have a map with multiple points I want to draw arrows that point to these locations from the border of the map. The arrow should dynamically update its position on the screen when to users pan or zoom the map. How can one draw an arrow on a map that point to location?

danyhiol
  • 594
  • 2
  • 7
  • 26

1 Answers1

1

You can draw regular lines to the points and apply arrow style to them as shown in this example.

You just need to place the arrow at the end coordinate instead of applying it on each segment.

var styleFunction = function (feature) {
    var geometry = feature.getGeometry();
    var styles = [
          // Linestring
          new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            })
        })
        ];

    var coordinates = geometry.getCoordinates();
    var length = coordinates.length;

    // Last two coordinates for calculating rotation
    var end = coordinates[length - 1];
    var start = coordinates[length - 2];

    var dx = end[0] - start[0];
    var dy = end[1] - start[1];
    var rotation = Math.atan2(dy, dx);

    // Arrow
    styles.push(new ol.style.Style({
        geometry: new ol.geom.Point(end),
        image: new ol.style.Icon({
            src: 'https://openlayers.org/en/v4.6.5/examples/data/arrow.png',
            anchor: [0.75, 0.5],
            rotateWithView: true,
            rotation: -rotation
        })
    }));

    return styles;
};
pavankguduru
  • 315
  • 1
  • 13
  • Thanks for your solution @pavankguduru . But I want the arrow to dynamically change its position when zooming and panning the map. – danyhiol Jun 20 '18 at 16:44
  • Can you explain what you meant by this `the arrow to dynamically change its position`? – pavankguduru Jun 21 '18 at 05:16
  • I trying to implement something like [this](http://www.patrickbaudisch.com/projects/halo/demo/halo.html), using OpenLayers. – danyhiol Jun 21 '18 at 14:57