CODEWITHSUNDEEP
javascripthtmlleaflet
Mr.D
Mr.D

Reputation: 7873

Leaflet does not show local image as overlay

I'm trying to show my my image via leaflet. My HTML and Image files are located in same folder. My images size is 1920x1080

I searched from internet and I have written this code:

<div id="map"></div>
<script>
    var map = L.map('map', {
    maxZoom: 20,
    minZoom: 20,
    crs: L.CRS.Simple
    }).setView([0, 0], 20);

    var imageUrl = 'test.jpg';
    var southWest = map.unproject([1920, 0], map.getMaxZoom());
    var northEast = map.unproject([0, 1080], map.getMaxZoom());

    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

    var imageBounds = [[1920, 0], [0, 1080]];

    L.imageOverlay(imageUrl, imageBounds).addTo(map);
</script>

Map has style:

<style>
    #map { height: 480px; }
</style>

When I open my HTML file, leaflet shows nothing but grey background.

Did I miss something?

Upvotes: 4

Views: 1372

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

You do not need to unproject() the coordinates.

unproject turns map coordinates into screen pixel coordinates. You do not want to do that unless you are measuring screen pixels or positioning custom elements on the screen.

Without having a look at a live example, I can only guess that you're setting the map's bounds to an area outside the coverage of your image.

Upvotes: 2

Related Questions