0

I am creating a map with *Leaflet" This detail, just created a map with Leaflet, made it circle-shaped I want to fully recognize the creators of this awesome tool and others creators of tiles ... I want the attribution to follow the circle shape.

Can somebody help me with my code shown below?

Div

***
<div id="carteJour"></div>

Style

          /* style et forme de ma carte*/
  #carteJour {
  margin-top: 10%;
  width: 700px; 
  height: 700px; 
  border-radius: 350px; 
  position: absolute; 
  z-index: 500;
  text-align: center;  
  left: 50%;
  top: 29%;
  transform: translate(-50%, -50%);
  border-style: dashed;
  border-radius: 50%;}

Tile Layer link

     L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
   attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
   subdomains: 'abcd',
   minZoom: 1,
   maxZoom: 23,
 }).addTo(mymap);        

Thanks lot for taking time.

Robert Lugg
  • 1,090
  • 2
  • 12
  • 40

1 Answers1

1

You can create a attribution control and then copy its container to the map div, so it can be centered.

var map = L.map('map',{
  attributionControl: false, //Disable the autogenerated attribution 
}).setView([52.06, 7.40], 10);

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

var attrControl = L.control.attribution(); //Create own attribution
attrControl.addTo(map);

//Copy the generated attribution into the map div, so it can be centered
var container = attrControl.getContainer();
map.getContainer().appendChild(container);
#map {
  width: 500px;
  height: 500px;
  position: absolute;
  z-index: 500;
  text-align: center;
  left: 50%;
  border-style: dashed;
  border-radius: 50%;
  margin-left: -250px; /* Half of the width */
}

.leaflet-control-attribution.leaflet-control{
  display: block;
  position: absolute;
  width: 100%;
  bottom: 20px;
  text-align: center;
}

.leaflet-bottom.leaflet-right > .leaflet-control-attribution.leaflet-control{
  display: none;
}

Example: https://jsfiddle.net/falkedesign/enq07ty5/

Falke Design
  • 10,635
  • 3
  • 15
  • 30