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]: Strange Artifacts when rendering a RasterLayer and zooming in #3705

Open
glappsi opened this issue Nov 29, 2024 · 0 comments
Open

[Bug]: Strange Artifacts when rendering a RasterLayer and zooming in #3705

glappsi opened this issue Nov 29, 2024 · 0 comments
Labels
bug 🪲 Something isn't working

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 = '<OUR_TILESERVER>';

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 }) => (
           <RasterSource
            key={name}
            id={name}
            tileSize={256}
            tileUrlTemplates={[
              `${TILESERVER}/${name}/{z}/{x}/{y}.png"`
            ]}
          >
            <RasterLayer
              id={name}
              sourceID={name}
              style={{
                visibility: 'visible',
                rasterOpacity: 14
              }}
            />
          </RasterSource>
        ))}
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

The map gets displayed correctly and the layers render. On higher zoom levels everything looks fine, but there is a threshold when strange artifacts, semi transparent black rectangles, start to appear (s. screenshots attached). When I zoom in more and more it gets worse and worse. Its also not the same behavior for all RasterLayers, I have some layers only representing schools, which are green polygons, that do not have this problem. Only the layers with those larger, red circles are affected. The bigger the circles, the bigger the artifacts.
We use the same layers in our web application using leaflet.js, which renders just fine, so I guess it is an Mapbox issue.

IMG_CAF73A9E4467-2
IMG_CAF73A9E4467-1

Expected behavior

Those semi transparent, black rectangles should not be there.

Notes / preliminary analysis

No response

Additional links and references

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🪲 Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant