Brochure ajoutant une image de fond personnalisée à une carte du monde

Question

J'essaie de créer une carte du monde sur mon site Web avec l'aide de la bibliothèque de la brochure js. J'ai créé une image personnalisée du monde en utilisant mes couleurs préférées pour les plages de la terre et la montagne:

Ma carte de brochure est actuellement à la recherche comme celui-ci:

Quelqu'un peut me aider dans la bonne direction quant à la façon obtenir cette texture de carte du monde dans ma carte de brochure? Il ne doit pas être précis ou exact, tant que la carte est remplie avec ma texture personnalisée.

Answer 1

Une solution possible pourrait être simplement de montrer la texture de l'image sur la carte avec la fonction imageoverlay et de jouer avec l'attribut d'opacité.

La texture de l'image doit utiliser le canal alfa pour faire correspondre l'eau sur la carte.

Cordialement.

Une approche rapide:

<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>