Maps: Make it clear PointAnnotation is deprecated

Created on 22 May 2019 · 3Comments · Source: react-native-mapbox-gl/maps

So,

PointAnnotation is an old, deprecated API. Eventually it'll be removed from the library altogether I assume. In the meantime, I think we should consider removing it from the Readme, or at least putting a clear disclaimer that it's deprecated and buggy and won't be supported in issues.

When I started out with this module - back on the old repo - PointAnnotation seemed like a very valid option, and only after implementing & using it in my app and running into bugs did I read issues in which it was basically advised to move away from it. Moving to a SymbolLayer wasn't too hard but it was still a loss of time.

The Readme and documentation overall need an overhaul obviously, as I think everyone has said plenty of times, but I'd like to know how you guys feel about my proposition to visibly deprecate PointAnnotation.

wontfix

Source

atomheartother

👍3

Most helpful comment

Highlighting it's the selected point is pretty easy, here's how I do it:

I have a bunch of sites (points on the map), each with an uuid, and when I create my ShapeSource I pass a different image to the selected one:

function featuresFromSites(sites, activeSite) {
  const features = sites.map(site => {
    return {
      type: 'Feature',
      id: site.uuid,
      properties: {
        image: site.uuid === activeSite ? 'marker-active' : 'marker-inactive',
        uuid: site.uuid,
      },
      geometry: {
        type: 'Point',
        coordinates: [site.gps.lon, site.gps.lat],
      },
    };
  });
  return {
    type: 'FeatureCollection',
    features,
  };
}

To highlight the one the user presses, you can put an onPress handler on the shapeSource, which then lets you set which point has been touched (you can access feature properties through the callback).

I've never had to show a bubble above the point personally so I can't help you there, I don't know the proper way to do it if you want the overlay to "stick" to the map like pointannotation bubbles do.

atomheartother on 22 May 2019

👍3

All 3 comments

I'd say it's a very good idea to make it clear, especially given that I was about to start rewriting some stuff to replace the SymbolLayer by PointAnnotations. :fearful:

What I'm missing is a way to show a bubble over a selected symbol, or some way of highlighting that it's the "selected" point. How are you doing it?

alexiri on 22 May 2019

Highlighting it's the selected point is pretty easy, here's how I do it:

I have a bunch of sites (points on the map), each with an uuid, and when I create my ShapeSource I pass a different image to the selected one:

function featuresFromSites(sites, activeSite) {
  const features = sites.map(site => {
    return {
      type: 'Feature',
      id: site.uuid,
      properties: {
        image: site.uuid === activeSite ? 'marker-active' : 'marker-inactive',
        uuid: site.uuid,
      },
      geometry: {
        type: 'Point',
        coordinates: [site.gps.lon, site.gps.lat],
      },
    };
  });
  return {
    type: 'FeatureCollection',
    features,
  };
}

atomheartother on 22 May 2019

👍3

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.