Local Image as Maps

Tony Pullen

unread,

Aug 16, 2012, 12:07:10 PM8/16/12

to leafl...@googlegroups.com

Hello,

Please forgive my ignorance! I am new to map servers, GIS, and all that.
All I want to do is display a zoomable jpg with useful overlay markers (and associated popups)
Something like an anotated image of a skeelton, or complicated wiring diagram,.
I though Leaflet would be the best solution for this.
The image will be local and "flat." (Like a game map.)
I have read number of posts about how to configure Leflet to handle flat images but I am hopelessly confused.
Please can soemone post help or a simple example of a local (i.e. not on the web) non-map image being loaded and displayed with at least one marker? (Or review my html and point out my rookie mistake(s)!)

Thanks in advance.

All I get is a grey area on the page with the zoom controls ain the upper left corner, and "Powered by Leflet" in the lower ight corner. No map is showing and neither does the "You clicked on ..." popup work.

Here's my HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Tony's Interactive Map</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="leaflet.css" />
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

</head>
<body>
    <div id="map" style="height: 171px"></div>

    <script src="leaflet.js"></script>

    <script>

        var mapURL = './map1.jpg';

        var map = new L.Map('map', {
            //worldCopyJump: false,
            //crs: L.CRS.Simple,
            //projection: L.Projection.LonLat
        });

        L.tileLayer(mapURL, {
            continuousWorld: true,
            maxZoom: 18
        }).addTo(map);

        var marker = L.marker([51.5, -0.09]).addTo(map)
            .bindPopup("<b>Hello world!</b><br />I am a popup.");

        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);
    </script>
</body>
</html>

OberstK

unread,

Sep 18, 2012, 10:13:00 AM9/18/12

to leafl...@googlegroups.com

Did you get any further with your problem? I want to use Leaflet for the exact same purpose and cant get it working.

My image is always used as a zoomed tile put together mutliple times. It doesnt even behold its size when zoomed in. It just resizes...

Perhaps somebody has an working example for an fixed image navigated with leaflet.

Thanks in advance for any help.

Paulo Vieira

unread,

Sep 18, 2012, 3:20:28 PM9/18/12

to leafl...@googlegroups.com

On Thu, Aug 16, 2012 at 5:07 PM, Tony Pullen <tonyj....@gmail.com> wrote:

Please can soemone post help or a simple example of a local (i.e. not on the web) non-map image being loaded and displayed with at least one marker?

Here is a simple example of the usage of L.ImageOverlay:

http://cmaf.ptmat.fc.ul.pt/~pvieira/leaflet_examples/quick-start-example_imageOverlay.html

Take a look at the javascript and compare with the first example in the tutorials. It's nearly the same. I just removed the TileOverlay and added an ImageOverlay instead. The image of the kittens is in the web, but you can use any file in your computer.

Azrudi Mustapha

unread,

Sep 18, 2012, 6:43:46 PM9/18/12

to leafl...@googlegroups.com

Hi Paolo

Thank you for your example. However, I have tried that with a native android browser and the background image disappears each time you touch the map.

It does seem to work fine with a desktop IE9 however.

Can you confirm that it is working with which mobile browser?

Thank you

Benjamin Kurczyk

unread,

Sep 18, 2012, 7:18:47 PM9/18/12

to leafl...@googlegroups.com

Thanks a lot for this example! Sometimes its just easier as you think:)

Tony Pullen

unread,

Sep 19, 2012, 5:40:49 AM9/19/12

to leafl...@googlegroups.com

Thanks! I was wondering if I'd been so dumb that people were ignoring me.

Another quaetion - how do you get the image to display in ot's correct proportion?
Another question - how do you stop the user from scrolling the map so the image is no longer visisble: can I set th scroll boundaries to the image size?

Thanks again!

Paulo Vieira

unread,

Sep 19, 2012, 6:49:27 AM9/19/12

to leafl...@googlegroups.com

On Tue, Sep 18, 2012 at 11:43 PM, Azrudi Mustapha <azrudi....@gmail.com> wrote:

Thank you for your example. However, I have tried that with a native android browser and the background image disappears each time you touch the map.
It does seem to work fine with a desktop IE9 however.

Can you confirm that it is working with which mobile browser?

Yes, it's working perfectly for me. I tested with a tablet running android 4.0.3. It should work on earlier versions of android, but with some limitations (no touch zoom, for example).

Azrudi Mustapha

unread,

Sep 21, 2012, 6:25:49 AM9/21/12

to leafl...@googlegroups.com

I'm also interested in these answers.

For example, I have an image the size of 900x1700

So lets say top left is (0,0) and bottom right is (900x1700).

When I display this image, it looks so small. Which zoom number should I set it to, to get it to display the image at the original size?

And I want to set a marker at point 200,100. But when I do that with

L.marker([200,100]).addTo(map)
.bindPopup("Doma").openPopup();

It appears way off of where it's supposed to be.

For reference, I have set these:

var map = L.map('map').setView([0.000, 0.000], 10);

var imageBounds = [[0, 0], [900, 1700]];

Alex Guillioud

unread,

Oct 13, 2012, 3:37:53 PM10/13/12

to leafl...@googlegroups.com

Same for me, i want to make something like this : http://fr.wowhead.com/map

Chirag Rakholiya

unread,

Jan 7, 2014, 11:51:05 PM1/7/14

to leafl...@googlegroups.com, tonyj....@gmail.com

hello,

Nice work,it's worth it.

how can i set opacity of image for making image transparent?

Clint .Poli

unread,

Jun 30, 2014, 12:29:38 AM6/30/14

to leafl...@googlegroups.com

Thanks for the example Paulo, I was wondering if it's possible to add a link to another page in the message popup?

Reply all

Reply to author

Forward