I need a ruler on leaflet map along X,Y axis but leaflet API does not support it and there is no plugin available. There is a jquery ruler that servers my needs. Is it possible to add jquery ruler on leaflet map ?
Here is the example :
http://ruler.hilliuse.com/
The ruler must adjust to the zoom level of leaflet map also. Please suggest.
If you can calculate the corners of the map after every zoom, then just reset the start point of the ruler ;). May be you have to write some logic for getting corners coordinates.
Haven't taken a deep look into the code of either, but here's the trade off:
leaflet's scale-control will already be hooked up to leaflet zoom events. Should be possible to duplicate the x-axis and rotate it 90º as a y-axis. However, keep in mind that leaflet scale-control is meant to measure distance on a spherical surface (i.e. the earth), not a flat xy plane.
the jquery ruler plugin should be easier to hack, internally, b/c it is not supposed to measure spherical distance. You'll have to update it's values on zoom, though. Check out the leaflet zoomend event. Use it like this:
map.on('zoomend', function(event){
updateRuler(...);
});
leaflet event docs