A Leaflet.js plugin to perform measurements when using a simple CRS (coordinate system).
This is a fork of https://github.com/gokertanrisever/leaflet-ruler that I edited to work easily with L.CRS.Simple, when using non-standard maps like drawn maps or game maps.
Add the dependencies to your map:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/conengmo/Leaflet.SimpleCRSMeasurement/leaflet-ruler.css">
<script src="https://cdn.jsdelivr.net/gh/conengmo/Leaflet.SimpleCRSMeasurement/leaflet-ruler.js"></script>
Load the control:
L.control.ruler().addTo(map);
let options: {
position: 'topright', // Leaflet control position option
circleMarker: { // Leaflet circle marker options for points used in this plugin
color: 'red',
radius: 2
},
lineStyle: { // Leaflet polyline options for lines used in this plugin
color: 'red',
dashArray: '1,6'
},
// to get a meaningful distance you will have to provide a conversion factor:
scale: 1.0,
// custom function to return the distance as a string
formatter: function(distance) {
return distance.toFixed(1);
},
}
L.control.ruler(options).addTo(map);