Leaflet-Switch-Scale-Control

Leaflet switch scale control is used to select and display map scale from dropdown list. Depends on:

• Leaflet#1.0.1
• Semantic-UI#2.2.4

DEMO

API

Usage

map.addControl(new L.Control.SwitchScaleControl(options));

Options

Specified below values are default

    position: "bottomleft", // Leaflet control position.
    dropdownDirection: "upward", // Specifies direction of dropdown's openning.
    className: "map-control-scalebar", // Control's wrapper class.
    updateWhenIdle: false, // Control's wrapper class.
    ratio: true, // Flag: whether to display ratio prefix.
    ratioPrefix: "1:", // Ratio prefix text.
    ratioCustomItemText: "1: другой...", // Custom ratio text.
    customScaleTitle: "Задайте свой масштаб и нажмите Enter", // Custom scale title text.
    recalcOnPositionChange: false, // Flag: whether to recalc scale on map position change.
    recalcOnZoomChange: false, // Flag: whether to recalc scale on map zoom change.
    scales: [500, 1000, 2000, 5000, 10000, 25000, 50000, 100000, 200000, 500000, 1000000, 2500000, 5000000, 10000000], // Array of available to select scales
    roundScales: undefined, // Array of available to display rounded scales
    adjustScales: false, // Flag: whether to adjust custom scale to max of scales
    pixelsInMeterWidth: function,
    getMapWidthForLanInMeters: function

pixelsInMeterWidth: returns pixels per meter; needed if ratio: true.

    pixelsInMeterWidth: function () {
      var div = document.createElement("div");
      div.style.cssText = "position: absolute;  left: -100%;  top: -100%;  width: 100cm;";
      document.body.appendChild(div);
      var px = div.offsetWidth;
      document.body.removeChild(div);
      return px;
    }

getMapWidthForLanInMeters: returns width of map in meters on specified latitude.

    getMapWidthForLanInMeters: function (currentLan) {
      return 6378137 * 2 * Math.PI * Math.cos(currentLan * Math.PI / 180);
    }