title: How to set specific scale for leaflet.js
body: <p>I am trying to create a solution using leaflet.js to display plans and drawings rather then maps. The basic functionality it all set, but it would be great to a scale to the display.</p>
  
  <p>I looked at this solution on github - <a href="https://github.com/nerik/leaflet-graphicscale" rel="nofollow">https://github.com/nerik/leaflet-graphicscale</a> - and it works great. But my question is, how can I adjust the scale to my actual map. Like how do the dimensions of the plan relate to the scale.</p>
  
  <p>Here is an example of how I currently implement the map:</p>
  
  <pre><code>&lt;div class="col-lg-9"&gt;
      &lt;div id="img1" class="leafletContainer" style=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var imgWidth = 17732;
  var imgHeight = 13632;
  
  // create Map
  var map = L.map('img1', {
      maxZoom: 8,
      crs: L.CRS.Simple
  }).setView(new L.LatLng(0,0), 0);
  
  var minimap1 = new Object();
  var minimap_loaded = false;
  
  var southWest = map.unproject([0, imgHeight], map.getMaxZoom());
  var northEast = map.unproject([imgWidth, 0], map.getMaxZoom());
  var bounds = new L.LatLngBounds(southWest, northEast);
  
  var image1 = {
      url :   'zoomifyTiles/hercules2/',
      width  : imgWidth,
      height : imgHeight
  }
  
  L.tileLayer.zoomify(image1.url, {
      width: image1.width,
      height: image1.height,
      tolerance: 0.7,             // initial zoom level
  }).addTo(map);
  
  var graphicScale = L.control.graphicScale({
      fill: 'fill',
      showSubunits: true,
      minUnitWidth: 30,
      maxUnitsWidth: 240,
      labelPlacement: 'auto'
  }).addTo(map);
  
  // Create Minimap
  image1mini = L.tileLayer.zoomify(image1.url, {
      width: image1.width,
      height: image1.height,
      tolerance: 0.8,
      attribution: image1.credit
  });
  
  // load the mini map if it already isn't loaded
  if(minimap_loaded == true) {
      minimap1.changeLayer(image1mini);
  } else {
      minimap1 = new L.Control.MiniMap(image1mini, {zoomLevelOffset: -5, toggleDisplay: true}).addTo(map);
  }
  &lt;/script&gt;
  </code></pre>