Map-3857

by aidankirrane

HTML

<!DOCTYPE html>
<html >
<head>
    <title>EPSG 3857 map</title>
    <link href="http://dl.dropbox.com/u/8283278/Leaflet4326/Leaflet/leaflet.css" rel="stylesheet" />
    <script src="http://dl.dropbox.com/u/8283278/Leaflet4326/Leaflet/leaflet-src.js"></script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

CSS

html, body, #map {
    padding: 0;
    margin: 0;
    height: 100%;
}

JavaScript

var map;
var krakow = new L.LatLng(50.056, 19.937);
var bounds = [[49.99449830610663, 19.8028564453125], [51.09942578687828, 21.150398254394528]];
var outlineLayer = L.rectangle(bounds, { color: "#ff0000", weight: 1 });
var mapOptions = {
    center: krakow,
    zoom:7,
    tms: true,
    crs: L.CRS.EPSG3857
};
var cartaLayer = null;
var cloudLayer = null;
var krakowLayer = null;

$(function () {
    mapSetup();
    addLayers();
    map.on('click', function (e) {
        alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng);
    });
    cloudLayer.addTo(map);
    krakowLayer.addTo(map);
    outlineLayer.addTo(map);
});

function mapSetup() {
    map = new L.Map('map', mapOptions);
    cartaLayer = new L.TileLayer("http://labs.metacarta.com/wms-c/Basic.py/1.0.0/basic/{z}/{x}/{y}.png", { tms: true });
    cloudLayer = new L.TileLayer("http://{s}.tile.cloudmade.com/9c844409f5b845ae93ac38388077f90a/997/256/{z}/{x}/{y}.png", { tms: false });
    krakowLayer = new L.TileLayer("http://dl.dropbox.com/u/8283278/Leaflet4326/tiles3857/{z}-{x}-{y}.png", { tms: false, opacity: 1.0 });
}

function addLayers() {
    var baseLayers = {
        "CloudMade": cloudLayer,
        "MetaCarta": cartaLayer
    };
    var overlays = {
        "Krakow Tiles": krakowLayer,
        "Krakow Outline": outlineLayer
    };
    L.control.layers(baseLayers, overlays).addTo(map);
}