-
-
Save tjarratt/1138563 to your computer and use it in GitHub Desktop.
| <html> | |
| <head> | |
| <script src="./leaflet.js"></script> | |
| <script> | |
| window.onload = function() { | |
| var myCrs = L.Util.extend({}, L.CRS, { | |
| projection: L.Projection.LonLat, | |
| transformation: new L.Transformation(1, 0, 1, 0) | |
| }); | |
| var map = new L.Map('map', {crs: myCrs, attributionControl: false}); | |
| var mapView = new L.TileLayer('./map.png'); | |
| map.setView(new L.LatLng(0.5, 0.5), 0, true).addLayer(mapView); | |
| var bounds = new L.LatLngBounds(new L.LatLng(0, 0), new L.LatLng(1, 1)); | |
| var image_layer = new L.ImageOverlay("./overlay.png", bounds); | |
| map.addLayer(image_layer); | |
| }; | |
| </script> | |
| <link rel=stylesheet href="./leaflet.css"> | |
| </head> | |
| <body> | |
| <div id=map style="width: 500px; height: 500px;"></div> | |
| </body> | |
| </html> |
Hey, I created this gist to illustrate a bug with leaflet in IE8 that has since been fixed. If you want to see different zoom layers, you'll need to provide images for different zoom levels, the way they do in their examples (http://leaflet.cloudmade.com/examples/quick-start.html (look for where they create a TileLayer and then add that layer to their map)).
The simplest way to do this is to have some sort of server that hosts up tiles like TileMill or TileCache (http://tilecache.org/). We're using TileCache + Mapnik and it works really well.
Basically if you follow what I did in this gist, you're only providing leaflet with one image, so it's only going to have one image for each zoom layer. Leaflet will gladly communicate with some server to fetch tiles as needed when you zoom in or out, but you need to configure it for that.
The problem with this is that I see the same map in each zoom. That is because the image that I using is too tiny?