0

I'm using a custom marker with Mapbox-gl for web, and at the same time, I expect to rotate the cursor to follow the line created with the latitude and longitude.

map

 this.mapa = new mapboxgl.Map({
      container: this.divmapa.nativeElement,
      style: this.colorStyle,
      center: this.geoCenter,
      zoom: 4,
    });

    this.mapa.addControl(new mapboxgl.FullscreenControl());
    this.mapa.addControl(new mapboxgl.NavigationControl({
      showCompass: false
    }));

    this.mapa.on('load', () => {

      this.mapa.addSource('route', {
        'type': 'geojson',
        'data': {
          'type': 'Feature',
          'properties': {},
          'geometry': {
            'type': 'LineString',
            'coordinates': this.geoData
          }
        }
      });

      this.mapa.addLayer({
        'id': 'route',
        'type': 'line',
        'source': 'route',
        'layout': {
          'line-join': 'round',
          'line-cap': 'round'
        },
        'paint': {
          'line-color': '#888',
          'line-width': 1
        }
      });

    });

    const popup = new mapboxgl.Popup({ offset: 25 }).setText(
      'Prueba del barco verde Cargologik.'
    );

    const dLon = (38.6987 - 38.3181);
    const dLat = -141.82 + 140.693;
    const angle = 180+(Math.atan2(dLon, dLat) * 180 / Math.PI);
    const rotateString = `rotate(${angle}deg)`;

    const tamano = 75;
    const customMarker: HTMLElement = document.createElement('div');
    customMarker.id = 'marker'
    customMarker.style.backgroundImage = `url(${this.greenShip})`;
    customMarker.style.width = `${ tamano }px`
    customMarker.style.height = `${ tamano }px`
    customMarker.style.backgroundSize = '100%';
    customMarker.style.cursor = 'pointer'

    new mapboxgl.Marker({element: customMarker})
        .setLngLat(this.geoCenter)
        .setPopup(popup)
        .addTo(this.mapa);

    customMarker.style.transform = customMarker.style.transform + rotateString;

I had used rotation adding like this

new mapboxgl.Marker({element: customMarker, rotation: angle})
        .setLngLat(this.geoCenter)
        .setPopup(popup)
        .addTo(this.mapa);

rotate

I expect to rotate the custom marker with the path line to be drawn.

1 Answer 1

1

It sounds like you will be updating the location of the marker over time, and also want to change the rotation based on the angle of the line below.

I assume you asked this because you don't have discrete data for the marker angle at different timestamps and want to calculate it based on the Marker's position along the line.

To calculate bearing using turf.bearing(), you need two points. Assuming you know the distance the marker has traveled along the line, you can subtract some distance to get an earlier point, add some distance to get a later point, and then calculate the bearing between them. This example shows how you might use turf.along() and turf.bearing()

const upstreamPoint = turf.along(myLineString, distanceAlongLine - 10) // 10 kilometers "up" the line
const downstreamPoint = turf.along(myLineString, distanceAlongLine + 10) // 10 km "down" the line

const bearing = turf.bearing(upstreamPoint, downstreamPoint)

Marker.setBearing(bearing)

If you don't already know the distance the marker has traveled along the line, you can use turf.slice() to cut the line at the location of the point, then use turf.length() to calculate the length of the remaining line segment.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.