How can I change my documentlet.draw sheets from imperial to metric?
I am creating a brochure map that allows users to draw a custom selection using the circle tool. The source code tells me that I can change the tooltip notification into a metric, but I don't know how.
Radius: 1239 feet
I would like to change it to:
Radius: 377 m
Visual link:
The Leaflet.draw function called to display the radius:
// Leaflet.draw.js
readableDistance: function(t, e, i, o) {
var n, s;
switch (s = "string" == typeof e ? e : i ? "feet" : o ? "nauticalMile" : e ? "metric" : "yards") {
case "metric":
n = t > 1e3 ? (t / 1e3).toFixed(2) + " km" : Math.ceil(t) + " m";
break;
case "feet":
t *= 3.28083, n = Math.ceil(t) + " ft";
break;
case "nauticalMile":
t *= .53996, n = (t / 1e3).toFixed(2) + " nm";
break;
case "yards":
default:
t *= 1.09361, n = t > 1760 ? (t / 1760).toFixed(2) + " miles" : Math.ceil(t) + " yd"
}
return n
}
My own Map.js (this is how I am currently initializing the map):
// Map.js
function initMap() {
const drawControl = new L.Control.Draw({
draw: {
marker : false,
polygon : true,
polyline: {
metric: true
},
rectangle: true,
circle : {
metric: true
}
},
edit: false
});
const map = L.map('map').setView([CONFIG.MAP.LATITUDE, CONFIG.MAP.LONGITUDE], CONFIG.MAP.ZOOMLEVEL)
.on('popupopen', e => {
$(e.popup._source._icon).attr('src', CONFIG.IMG.ELEC_ACTIVE);
})
.on('popupclose', e => {
$(e.popup._source._icon).attr('src', CONFIG.IMG.ELEC_INACTIVE);
});
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
accessToken: CONFIG.MAP.ACCESSTOKEN
}).addTo(map);
map.addControl(drawControl);
const icon = L.icon({
iconUrl : CONFIG.IMG.ELEC_INACTIVE,
popupAnchor: [125, 25],
iconSize : [14, 18]
});
const markers = L.markerClusterGroup({
maxClusterRadius(zoom) {
return (zoom <= 14) ? 80 : 1; // radius in pixels
}
});
for (let i = 0; i < 150; i++) {
// Remove everything except the CONFIG variables, Math.random() serves as testing display.
const marker = L.marker([(Math.random() * 0.05) - 0.03 + CONFIG.MAP.LATITUDE, (Math.random() * 0.05) - 0.03 + CONFIG.MAP.LONGITUDE], {
icon,
closeButton: false
}).addTo(map).bindPopup('<p class="c-popup__content"><a class="c-popup__link" href="#">Add pole to selection</a><span class="c-popup__address">Marnixstraat 246, 1016 TL, Amsterdam<span></p>', {
'className': 'c-popup'
})
.on('click', () => {
$('.c-popup').css('width', 'auto');
});
markers.addLayer(marker);
}
map.addLayer(markers);
}
Side note: I am aware of this question: Draw Draw plugin: How to hide / show drawing tools by layer type dynamically
But this correct answer doesn't quite answer the problem I'm running into, furthermore, I would rather not write a new function to re-initialize my controls.
source to share
It looks like the API documentation is not exactly the same as the original code (version v0.4.9
).
1) The docs are not explicit, but the parameters circle
have the same shape as the parameters polyline
, but they do not directly extend them. That is, pointing metric
to polyline
does not ensure its execution for circle
. => You also need to point the option metric
to circle
. (same for polygon
and rectangle
I think)
2) Although the option metric
accepts a boolean value, it must either be a string "metric"
or be used in conjunction with the option feet: false
for it to take effect.
var drawControl = new L.Control.Draw({
draw: {
circle : {
metric: 'metric'
}
}
});
Or:
var drawControl = new L.Control.Draw({
draw: {
circle : {
metric: true,
feet: false
}
}
});
Demo: http://playground-leaflet.rhcloud.com/qur/1/edit?html,output
Note: Known issue, see Leaflet.draw issue # 690 . The suggested workaround is exactly what is described above.
source to share