Using World Files (jgw, pgw) in Leaflet

Question

I have a list of image files along with their corresponding world files in jgw, pgw format etc. how can I use the world files to get the real world coordinates of these images so I can generate them on my world map on leaflet?

I have looked into the leaflet plug-ins but can’t determine which ones could help with world file conversion.

Gdal.org is a good place to start looking for conversation software — Ian Turton, Nov 07 '22 at 14:29
May you add more data to you question? in which geodetic datum or projection are your image and world files? is it a Tileserverexport, or are they just some corresponding might even overlapping Images? — Moos' Samuel Silver, Mar 16 '23 at 10:21

Moos' Samuel Silver · Answer 1 · 2023-03-16T14:30:58.473

I do not know a direct solution or plugin to load the images in, but i can provide you with a minimal samplecode:

HTML: <div id="leafletMap" class="leafletMap"></div>

Javascript:

    import * as Leaflet from 'leaflet';
     class exampleMap
      //create the map element we want to work with:
      leafletMap: Leaflet.Map = Leaflet.map('leafletMap', {});
      
      //store our urls for readability:
      let pathToYourJPG = "your/URL/to/Image/test.png";
      let pathToYourJGW = "your/URL/to/WorldFile/test.jgw";
      
      // call the function which does the "magic"
      leafletCreatorFunction(pathToYourJPG, pathToYourJGW); 
    
      getMeta = async (url) => {
        const img = new Image();
        img.src = url;
        await img.decode();
        return img
      };
    
      /** Function which loads a Georefered Image in to leaflet by it's urls only.
      *   Works js async and can of corse be used in a loop.
      *   pathToYourJPG: an url of image file (e.g. png/jpg...)
      *   pathToYourJGW: an url of the corresponding worldfile (The Georeferences)
      */
      leafletCreatorFunction(pathToYourJPG , pathToYourJGW) {
        //Fetching Image and TextData
        Promise.all([
          fetch(pathToYourJGW).then(r => r.text()),
          this.getMeta(pathToYourJPG)
        ]).then(([jgwText, img]) => {
    
          //Calculate the Bounding Box
          let splitted = jgwText.split("\n")
          let widthOf1PixelInCRSUnits = Number(splitted[0])
          let heightOf1PixelInCRSUnits = Number(splitted[3])
          let centerXCoordinateOfUpperLeftPixel = Number(splitted[4])
          let centerYCoordinateOfUpperLeftPixel = Number(splitted[5])
          let westBound = centerXCoordinateOfUpperLeftPixel - (widthOf1PixelInCRSUnits / 2)
          let northBound = centerYCoordinateOfUpperLeftPixel - (heightOf1PixelInCRSUnits / 2)
          let eastBound = westBound + ((img.naturalWidth) * widthOf1PixelInCRSUnits)
          let southBound = northBound + ((img.naturalHeight) * heightOf1PixelInCRSUnits)
          let westSouthBoundCoordinatesInWSG84= Leaflet.CRS.EPSG3857.unproject(Leaflet.point(westBound, southBound)) //important: use the correct CRS here!
          let eastNorthBoundCoordinatesInWSG84= Leaflet.CRS.EPSG3857.unproject(Leaflet.point(eastBound, northBound))
    
          //add now the imageOverlay to your map:
          let myJpgJgwOverlay = Leaflet.imageOverlay(pathToYourJPG,
            Leaflet.latLngBounds(westSouthBoundCoordinatesInWSG84, eastNorthBoundCoordinatesInWSG84), {
              opacity: 1,
              alt: "TestImage",
              zIndex: 10,
              interactive: false
            }).addTo(this.leafletMap);
          console.log("i'm happy to answer you question")
        });
      }
    }

Q&A's which was used to create this minimal example or give a way deeper explonation:

Using World Files (jgw, pgw) in Leaflet

1 Answers1