Change Leaflet attribution control position

user_4418481 0
Viewed 3431

I am using in my app a WebView to display a Leaflet map.

Inside the HTML file I have the following credits and links:

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=xxxxx', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap);

This looks like this:

enter image description here

Is there a way to place the attribution control at the top left corner for example instead of the bottom right corner?

leaflet
2 Answers

Of course you can control everything on the map;)

let map = L.map('map', {
  attributionControl: false
}).setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


L.control.attribution({
  position: 'topright'
}).addTo(map);
body {
  height: 100%;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">

<div id="map"></div>

user_104243850

I changed the position using

// HTML

<div #map></div>

// Declaring in typescript

@ViewChild('map', { static: false }) mapElement: ElementRef;

// Calling method

 loadMyMap() {
    this.map = L.map(this.mapElement.nativeElement,{
      
    }).setView([0, 0], 10);
    L.tileLayer('link for tiles', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);
 
    this.map.attributionControl.setPosition('topright');
  }

This also avoids the text 'powered By'

user_76764350
Related