Leaflet single picture

Question

I am currently doing an internship and they asked me to use a Parking map picture (.jpg) on Kibana bettermap. Bettermap is using Leaflet, and I found where I could change the picture link:

function e() {
                    b.css({
                        height : a.panel.height || a.row.height
                    }),
                    a.require(["./leaflet/plugins"], function () {
                        a.panelMeta.loading = !1,
                        d.Icon.Default.imagePath = "app/panels/bettermap/leaflet/images",
                        c.isUndefined(f) ? (f = d.map(a.$id, {
                                    scrollWheelZoom : !1,
                                    center : [40, -86],
                                    zoom : 10
                                }), d.tileLayer("**http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg**", {
                                attribution : "Data, imagery and map information provided by MapQuest, OpenStreetMap <http://www.openstreetmap.org/copyright> and contributors, ODbL",
                                maxZoom : 18,
                                minZoom : 2
                            }).addTo(f), g = new d.MarkerClusterGroup({
                                    maxClusterRadius : 30
                                })) : g.clearLayers();
                        var b = [];
                        c.each(a.data, function (a) {
                            b.push(c.isUndefined(a.tooltip) || "" === a.tooltip ? d.marker(a.coordinates) : d.marker(a.coordinates).bindLabel(c.isArray(a.tooltip) ? a.tooltip[0] : a.tooltip))
                        }),
                        g.addLayers(b),
                        g.addTo(f),
                        f.fitBounds(c.pluck(a.data, "coordinates"))
                    })
                }

The problem is that Leaflet is made so you have a lot of pictures making a Tile. What I would like to do is to simply use one picture, and when I change the path to my picture I am obviously getting a Tile of my only one picture.

Anyone got an idea on how I could simply use one local picture on Leaftlet ?

Thanks a lot in advance.

Answer 1

Use a L.ImageOverlay. You can check some of the Leaflet code examples to see how it works.