Possible to use my own (LARGE) map with Leaflet.js?

Question

I've been using Leaflet for a while, and recently came into possession a large (and I mean large) PNG image containing a satellite photo of a specific area (a couple km in radius). I'd love to be able to switch to that to compare it with the current map in Leaflet.js. How would I accomplish this?

I can easily find out which pixel position corresponds to a certain real-life GPS coordinate, and from that Leaflet.js should in theory be able to lay my large map image in the map, right? But how? That's the question.

        var bookmarks = L.layerGroup();

        var layer1 = L.tileLayer('<URL_GOING_TO_STREET_MAP>', { id: 'mapbox.one' }); // maxZoom: 18, 
        var layer2 = L.tileLayer('<URL_GOING_TO_SATELLITE_MAP>', { id: 'mapbox.two' });
        var layer3 = L.tileLayer('<URL_GOING_TO_STREET_AND_SATELLITE_COMBO_MAP>', { id: 'mapbox.three' });

        var theMap = L.map('map', {
            center: [ <CENSORED>, <CENSORED> ],
            zoom: 4,
            layers: [ layer3, bookmarks ]
        });

        var baseLayers = {
            "Standard": layer1,
            "Satellite": layer2,
            "Satellite + info combo": layer3
        };

        var overlays = {
            "Bookmarks": bookmarks
        };

        L.control.layers(baseLayers, overlays).addTo(theMap);

        fetch('./data/generated.geojson').then(function(response) { return response.json() }).then(function(actualData)
        {
            L.geoJSON(actualData).bindTooltip(function (layer)
            {
                return layer.feature.properties.name;
            }).openTooltip().addTo(bookmarks);
        });

Get the lat-long coordinates for the corners of the image, create a `L.ImageOverlay` from that. — IvanSanchez, Jan 29 '18 at 18:46
Possible duplicate of [Is Leaflet a good tool for non-map images?](https://stackoverflow.com/questions/13110763/is-leaflet-a-good-tool-for-non-map-images) — IvanSanchez, Jan 29 '18 at 18:47

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Determining the actual coordinates of your raster image (satellite photo), so that you can later on overlay it on common Tiles, is called georeferencing.

You have plenty online resources describing possible procedures, e.g. https://www.mapbox.com/help/georeferencing-imagery/.

You also have online tools that might suit your need: https://www.georeferencer.com/

The idea is to determine the coordinates of the corners of your raster image.

Once you have those coordinates, you can use Ivan's Leaflet.ImageOverlay.Rotated plugin to position (and possibly rotate and skew) your image:

Display rotated and skewed images in your LeafletJS maps.

This LeafletJS plugin adds a new class, L.ImageOverlay.Rotated, subclass of L.ImageOverlay. The main difference is that the position of L.ImageOverlay is defined by a L.LatLngBounds (the L.LatLngs of the top-left and bottom-right corners of the image), whereas L.ImageOverlay.Rotated is defined by three points (the L.LatLngs of the top-left, top-right and bottom-left corners of the image).

The image will be rotated and skewed (as the three corner points might not form a 90-degree angle).

Code sample taken from the plugin demo page:

var point1 = L.latLng(40.52256691873593, -3.7743186950683594),
    point2 = L.latLng(40.5210255066156, -3.7734764814376835),
    point3 = L.latLng(40.52180437272552, -3.7768453359603886);

L.imageOverlay.rotated("URL-to-image", point1, point2, point3, {
  attribution: "&copy; <a href='url'>SOURCE</a>"
}).addTo(map);

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 01 '18 at 09:55

ghybs

47,565
6
74
99

Well, I can find out the GPS coordinates of the corners of my image, so I don't have to upload the (very massive, copyright-protected, must-be-kept-private-anyway) image file to that service. However, the problem is actually figuring out how to implement this in Leaflet. – Feb 01 '18 at 11:40
I didn't mean to post that last comment. I pressed Enter to get a new line, but instead it published the comment. Anyway, I'm now going to add the actual source code I have to the question if you wish to help me, as I can tell I'm never going to figure this out on my own... – Feb 01 '18 at 11:41
Simply adapt the code sample from the plugin demo page. Reproduced here in the above updated answer for simplicity. – ghybs Feb 01 '18 at 11:53
I don't understand what those points mean. But either way, I get this error: TypeError: L.imageOverlay.rotated is not a function – Feb 01 '18 at 16:54
As said in the plugin description: "three points (the L.LatLngs of the top-left, top-right and bottom-left **corners** of the image)". Regarding the error you report, it sounds like you have not included the plugin script before trying to use it. Please open a different question should you need help in using it. – ghybs Feb 02 '18 at 02:56
Ah. It's a plug-in. Well, I eventually figured it out thanks to your help. Very cool. – Feb 02 '18 at 14:47
(Also, I would upvote you if only this silly site would let me.) – Feb 02 '18 at 14:56

Possible to use my own (LARGE) map with Leaflet.js?

1 Answers1