Reputation: 21

Leaflet library doesn't work for adding image on the map

I added an image in the map. and now I want to add another image.

I want to add the another image slide on the first image.

I slide the second image 300x300 on the first image and added.

But the next image doesn't appear. why?

    <!DOCTYPE html>

<head>
    <title>Offline Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="styles/leaflet.css">
    <link rel="stylesheet" href="styles/leaflet-search.css">
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/leaflet-src-0.7.7.js"></script>
    <script src="scripts/leaflet-search.js"></script>
</head>

<body>

    <div id="map"></div>
    <span id="prout"></span>
    <span id="prout"></span>
    <script>

        var map = new L.Map('map', {
            zoom: 17,
            doubleClickZoom: false,
            center: new L.latLng([27.0827, 112.7804]),
            //maxBounds: [[48.780,2.200],[48.825,2.256]]
        });

        L.tileLayer('img/mapTiles/{z}/{x}/{y}.jpg', {
            maxZoom: 19
        }).addTo(map);


        var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
        topleft_LatLng = [27.08350, 112.78080];
        bottomright_LatLng = [27.08000, 112.78510];
        imageBounds1 = [topleft_LatLng, bottomright_LatLng];
        image1 = L.imageOverlay(imageUrl, imageBounds1);
        image1.addTo(map);
        //L.imageOverlay(imageUrl, imageBounds).bringToFront();

        /////////////////////////////////////////////////////////////////////////////////////////////////////
        var centerLatLng = map.getCenter(); // get map center [lat, lon]
        
        // pixel koordinatları
        var point_C = map.latLngToContainerPoint(centerLatLng); //[pointC.x, pointC.y] etc

        var point_X = [point_C.x + 1, point_C.y]; // add one pixel to x
        var point_Y = [point_C.x, point_C.y + 1]; // add one pixel to y
        
        var latLng_C = map.containerPointToLatLng(point_C); //[lat, lon] etc.
        var latLng_X = map.containerPointToLatLng(point_X); //[27.08350, 112.78080] etc.
        var latLng_Y = map.containerPointToLatLng(point_Y); //[27.08350, 112.78080] etc.

        var latLng_1_X = latLng_X - latLng_C;
        var latLng_1_Y = latLng_Y - latLng_C;

       /////////////////////////////////////////////////////////////////////////////////////////////////////

        var imageUrl = 'C:/etna.jpg';
        imageBounds = [topleft_LatLng + (latLng_1_X * 300), bottomright_LatLng + (latLng_1_Y * 300)];
        image = L.imageOverlay(imageUrl, imageBounds);
        image.addTo(map);
        image.bringToFront();


    </script>

</body>

</html>

What did I do wrong? I'm trying to fix it.

this is what I see

https://i.postimg.cc/sx6hTxnL/1.png

Upvotes: 2