> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Attribution requirements

> What you need to display when your app uses Baato maps and data.

Baato builds on [OpenStreetMap](https://www.openstreetmap.org), and both Baato and the
OpenStreetMap community need crediting when you use the data. This is a condition of use on
every plan, including the free one.

## What has to be visible

<Columns cols={2}>
  <Card title="OpenStreetMap credit" icon="map" horizontal>
    `© OpenStreetMap contributors`, linked to
    [openstreetmap.org/copyright](https://www.openstreetmap.org/copyright).
  </Card>

  <Card title="Baato credit" icon="signature" horizontal>
    The Baato logo, or a text link back to [baato.io](https://baato.io).
  </Card>
</Columns>

Both must be legible on top of the map — typically as a small overlay in a bottom corner.
If your map is small enough that overlays do not fit, an attribution link immediately
adjacent to it is acceptable.

<Note>
  The Baato logo is available at
  [i.postimg.cc/k5DpLQKQ/baato-Logo.png](https://i.postimg.cc/k5DpLQKQ/baato-Logo.png).
</Note>

## Per-platform snippets

Most map SDKs render their own vendor branding, which you turn off — and then you own the
attribution. These snippets show both halves.

<Tabs>
  <Tab title="Web">
    ```html theme={null}
    <div id="map" style="position: absolute; inset: 0;">
      <div style="z-index: 10; padding: 0 5px; background-color: hsla(0,0%,100%,.5);
                  position: absolute; bottom: 0; right: 0;">
        ©
        <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">
          OpenStreetMap contributors
        </a>
      </div>
      <div style="z-index: 100; padding: 0 5px; background-color: hsla(0,0%,100%,.5);
                  position: absolute; bottom: 0; left: 0;">
        <a href="https://baato.io" target="_blank" rel="noopener">
          <img
            src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg"
            alt="Baato"
            width="80"
          />
        </a>
      </div>
    </div>
    ```
  </Tab>

  <Tab title="Android">
    Turn off the Mapbox branding, then add the Baato logo as a view over the map. Download
    the logo into `res/drawable` first.

    ```java theme={null}
    mapView.getMapAsync(mapboxMap -> {
        mapboxMap.getUiSettings().setAttributionEnabled(false);
        mapboxMap.getUiSettings().setLogoEnabled(false);

        final FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(250, 104);
        params.gravity = Gravity.BOTTOM | Gravity.LEFT;
        params.setMargins(12, 12, 12, 12);

        ImageView imageview = new ImageView(this);
        imageview.setImageResource(R.drawable.baato_logo);
        imageview.setLayoutParams(params);
        mapView.addView(imageview);
    });
    ```
  </Tab>

  <Tab title="Flutter">
    ```dart theme={null}
    Stack(
      children: [
        BaatoMap(
          logoViewMargins: Point(-50, -50), // hide the SDK's own logo
          initialPosition: BaatoCoordinate(latitude: 27.7172, longitude: 85.3240),
        ),
        Align(
          alignment: Alignment.bottomLeft,
          child: Container(
            color: Colors.white70,
            height: 35.0,
            child: Image.network("https://i.postimg.cc/k5DpLQKQ/baato-Logo.png"),
          ),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Container(
            color: Colors.white70,
            padding: EdgeInsets.only(bottom: 2.0, right: 2.0),
            child: Text("© OpenStreetMap contributors"),
          ),
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="React Native">
    ```javascript theme={null}
    <View style={{ flex: 1 }}>
      <MapLibreGL.MapView
        style={{ flex: 1 }}
        styleURL={styleURL}
        logoEnabled={false}
        attributionEnabled={false}
      />
      <View style={styles.attribution}>
        <Text style={styles.attributionText}>© OpenStreetMap contributors · Baato</Text>
      </View>
    </View>
    ```

    ```javascript theme={null}
    const styles = StyleSheet.create({
      attribution: {
        position: "absolute",
        bottom: 4,
        right: 4,
        paddingHorizontal: 6,
        backgroundColor: "rgba(255,255,255,0.6)",
      },
      attributionText: { fontSize: 10 },
    });
    ```
  </Tab>
</Tabs>

## Crediting search results

Where you surface Baato search or geocoding results outside the map itself — in a results
list, a picker, an address field — credit the source in text, linking to
[baato.io](https://baato.io):

```
Search by baato.io
```

For anything beyond this — white-labelling, removing attribution, redistribution — talk to
us at [support@baato.io](mailto:support@baato.io).