title: Leaflet custom coordinates on image
body: <p>I have an image which size is 8576x8576px, and I want to make the coordinates match 1:1. Also I want the coordinates 0,0 in the center of the image (now the center is -128,128). And I want to show the coordinates too.  I want to put a locate button for the user insert coordinates and then find them on the map.
  Something like this: <a href="http://xero-hurtworld.com/map_steam.php" rel="nofollow">http://xero-hurtworld.com/map_steam.php</a>
  (I am using the same image but bigger). The tile size I made its 268px.</p>
  
  <p>My code so far:</p>
  
  <p><a href="https://jsfiddle.net/ze62dte0/" rel="nofollow">https://jsfiddle.net/ze62dte0/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Map&lt;/title&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"/&gt;
      &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /&gt;
      &lt;!--[if lte IE 8]&gt;
      &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /&gt;
      &lt;![endif]--&gt;
      &lt;script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script&gt;
        function init() {
          var mapMinZoom = 0;
          var mapMaxZoom = 3;
          var map = L.map('map', {
            maxZoom: mapMaxZoom,
            minZoom: mapMinZoom,
            crs: L.CRS.Simple
          }).setView([0, 0], mapMaxZoom);
  
  
  
      window.latLngToPixels = function(latlng){
      return window.map.project([latlng.lat,latlng.lng], window.map.getMaxZoom());
      };
      window.pixelsToLatLng = function(x,y){
      return window.map.unproject([x,y], window.map.getMaxZoom());
      };
  
          var mapBounds = new L.LatLngBounds(
              map.unproject([0, 8576], mapMaxZoom),
              map.unproject([8576, 0], mapMaxZoom));
  
          map.fitBounds(mapBounds);
          L.tileLayer('{z}/{x}/{y}.jpg', {
            minZoom: mapMinZoom, maxZoom: mapMaxZoom,
            bounds: mapBounds,
            noWrap: true,
            tms: false
          }).addTo(map);
  
          L.marker([0, 0]).addTo(map).bindPopup("Zero");
  
          L.marker([-128, 128]).addTo(map).bindPopup("center");
  
          var popup = L.popup();
  
          &lt;!-- Click pop-up&gt;
          var popup = L.popup();
  
          function onMapClick(e) {
              popup
              .setLatLng(e.latlng)
              .setContent("You clicked in " + e.latlng.toString ())
              .openOn(map);
          }
  
          map.on('click', onMapClick);
  
        }
      &lt;/script&gt;
      &lt;style&gt;
        html, body, #map { width:100%; height:100%; margin:0; padding:0; }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body onload="init()"&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>