1

I am trying to create a worldmap on my website along with help of the leaflet js library. I have created a custom image of the world using my preferred colors for land and mountain ranges: enter image description here

My leaflet map is currently looking like this: enter image description here

Can anyone help me in the right direction as to how to get this worldmap texture inside my leaflet map? It doesnt have to be accurate or exact, as long as the map is filled with my custom texture.

Jurgen Welschen
  • 871
  • 1
  • 13
  • 21

1 Answers1

1

A possible solution could be simply to show image texture on map with imageoverlay function and playing with opacity attribute.

Image texture must use alfa channel to match water on map.

Regards.

A fast approach:

    <div id="mapid" style="width: 600px; height: 400px;"></div>

<script>
  var mymap = L.map('mapid').setView([20.0, -60.0], 1.2);

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


  var imageUrl ='https://i.stack.imgur.com/khgzZ.png',
    imageBounds = [[80.0, -350.0], [-40.0, 400.0]];
L.imageOverlay(imageUrl, imageBounds, {opacity: 0.2}).addTo(mymap);

</script>
JoSerra
  • 361
  • 2
  • 9