How to use Leaflet to create a map out of an image

Question

OK, I have found an example of exactly what I think I require. I cannot work out how to set it up for my image and I'm not sure if this is the best approach to achieve my goal.

Intended Result :

http://maps.mixedbredie.net/leaflet/image.html

Example Code:

var map = L.map('map', {maxZoom: 17}).setView([51.495, -0.075], 14);
        /* Instead of a tile layer, use a bitmap image */
        var imageUrl = 'data/TM_pano.jpg';
        var imageBounds = [[51.490, -0.122], [51.510, -0.028]];
        L.imageOverlay(imageUrl, imageBounds).addTo(map);
        L.marker([51.495, -0.075]).addTo(map)
            .bindPopup("This is Table Mountain.");
        var popup = L.popup();
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
        }
        map.on('click', onMapClick);
        map.setMaxBounds(imageBounds);

Questions:

1.) How to choose the longitude/latitude, image bounds?

• i.e. .setView([51.495, -0.075], 14)
• var imageBounds = [[51.490, -0.122], [51.510, -0.028]];

2.) Should zoom 0 show my whole image? What are reasonable limits?

3.) Can I use real coordinates with this approach? i.e. Mapping a water pipe underground but using a custom .jpg of that pipe schematic? Then I could put markers on the pipe for certain long/lats.

Answer 1

See http://omarriott.com/aux/leaflet-js-non-geographical-imagery/ for question 1 and 2 For the third one, you could georeference (or warp) the image, and then display it onto a map, setting the transparency for example. The georeferencing could be done with Qgis or a tool like Mapwarper https://github.com/timwaters/mapwarper

(old question, but I think an answer could be useful)