Mappedin SDK question about removing lines

Mappedin SDK for React Native
,
1

Hi There,

I was wondering if there is a way to remove these lines in the SDK?

image
image1920×919 166 KB

Thank you!

2

Hey @johnv !

To remove the lines in the outdoor map as indicated in your image, you will need to interact with the outdoor map’s layers and styles. The SDK uses MapLibre GL JS to render the outdoor vector tiles which can be customized.

  1. Access the MapLibre Instance

    First, you need to get access to the underlying maplibregl.Map object. This object provides the methods needed to inspect and manipulate the map’s style and layers.

    mapView.Outdoor.map

  2. Identify the Layer Name

    // Get the maplibre instance
    const maplibreMap = mapView.Outdoor.map;

    // Get a list of all layers in the current style
    const layers = maplibreMap.getStyle().layers;

    // Log the layers to the console to inspect them
    console.log(layers);

    By examining the layers array, you can look for a layer that seems to correspond to the lines you want to remove. The name might be related to roads, paths, boundaries, or transport, such as road-path, transportation, or similar.

  3. Hide the Layer

    // Get the maplibre instance
    const maplibreMap = mapView.Outdoor.map;

    // Hide the specific layer by setting its visibility to ‘none’
    maplibreMap.setLayoutProperty(‘layer-name-to-hide’, ‘visibility’, ‘none’);

  4. Alternatively, you can use a custom outdoor stylesheet

    Choose a Base Style: Mappedin provides several styles like Default, Honeycrisp, and Night Blue. You can use the JSON file of one of these styles as a starting point.

    Default Style URL: https://tiles-cdn.mappedin.com/styles/mappedin/style.json

    Edit the Style: Download the style JSON file. In this file, you can find the layer that renders the lines and remove its definition entirely

    Host the Custom Style: Host your modified style JSON file on a server or locally in your app

    Apply the Custom Style: When initializing the map, pass the URL to your custom style in the TShow3DMapOptions

    const mapView = await show3dMap(container, options, {
    outdoorView: {
    style: “URL_TO_YOUR_CUSTOM_STYLE.json”
    }
    });

Hope that helps!

You can reference our Outdoor Map Guide

1 Like
3

Hi Kim,

Thank you for this! I will give it a try.

Best,

John V