Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Artifacts appearing when zooming in on a RasterLayer #3706

Closed
glappsi opened this issue Nov 29, 2024 · 1 comment
Closed

[Bug]: Artifacts appearing when zooming in on a RasterLayer #3706

glappsi opened this issue Nov 29, 2024 · 1 comment

Comments

@glappsi
Copy link

glappsi commented Nov 29, 2024

Mapbox Implementation

Mapbox

Mapbox Version

10.19.1

React Native Version

0.74.5

Platform

iOS

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
  RasterSource,
  RasterLayer
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

const TILESERVER = '<CUSTOM_TILES>';

const TileLayer = ({
  name
}) => {
  return (
    <RasterSource
      id={name}
      tileSize={256}
      tileUrlTemplates={[
        `${TILESERVER}/${name}/{z}/{x}/{y}.png"`
      ]}
    >
      <RasterLayer
        id={name}
        sourceID={name}
        style={{
          visibility: 'visible'
        }}
      />
    </RasterSource>
  );
};

class BugReportExample extends React.Component {
  render() {
  const layers = [{name: 'consume_with_pedestrian_zones'}];
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        {layers.map(({ name }) => (
          <TileLayer
            key={name}
            name={name}
          />
        ))}
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

When zooming in with my custom RasterLayer being rendered, after a certain threshold, artifacts start to appear (s. screenshots). It only affects certain of my custom layer (big, red circles), others (green, smaller polygons) are not affected. It gets worse the bigger the circles get. For smaller circles it starts between zoom 15 and 16, for larger ones between 14 and 15. The larger the zoom the bigger the artifacts.
I also built this feature for a web application using leaflet.js, where this issue does not appear, so I figured it must be MapBox related.

IMG_CAF73A9E4467-1
IMG_CAF73A9E4467-2

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

@glappsi glappsi added the bug 🪲 Something isn't working label Nov 29, 2024
Copy link

Lint failed 😭

Please fix the errors in your code example - More info.:

error: 'name' is missing in props validation (react/prop-types) at example.jsx:23:3:
  21 | 
  22 | const TileLayer = ({
> 23 |   name
     |   ^
  24 | }) => {
  25 |   return (
  26 |     <RasterSource


1 error found.```

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant