Agregada medición de longitud de vectores

Resources/public/ext/L.Polyline.measuredDistance.js

@@ -0,0 +1,49 @@
+/*
+ * Extends L.Polyline to retrieve measured distance.
+ *
+ * https://github.com/danimt/Leaflet.PolylineMeasuredDistance
+ */
+
+L.Polyline.prototype.measuredDistance = function (options) {
+  // Default options
+  this.defaults = {
+    metric: true
+  };
+  // Extend options
+  this.options = L.extend(this.defaults, options);
+
+  var distance = 0,  coords = null, coordsArray = this._latlngs;
+
+  for (i = 0; i < coordsArray.length - 1; i++) {
+    coords = coordsArray[i];
+    distance += coords.distanceTo(coordsArray[i + 1]);
+  }
+
+  // Return formatted distance
+  return L.PolylineUtil.readableDistance(distance, this.options.metric);
+};
+
+L.PolylineUtil = {
+  readableDistance: function (distance, isMetric) {
+    var distanceStr;
+
+    if (isMetric) {
+      // show metres when distance is < 1km, then show km
+      if (distance > 1000) {
+        distanceStr = (distance  / 1000).toFixed(2) + ' km';
+      } else {
+        distanceStr = Math.ceil(distance) + ' m';
+      }
+    } else {
+      distance *= 1.09361;
+
+      if (distance > 1760) {
+        distanceStr = (distance / 1760).toFixed(2) + ' miles';
+      } else {
+        distanceStr = Math.ceil(distance) + ' yd';
+      }
+    }
+
+    return distanceStr;
+  }
+};

Resources/views/Leaflet/resources.html.twig

@@ -33,6 +33,7 @@
 <script type="text/javascript" src="{{ asset('bundles/leaflet/edit/handler/Edit.Circle.js') }}" ></script>
 <script type="text/javascript" src="{{ asset('bundles/leaflet/edit/handler/Edit.Rectangle.js') }}" ></script>
 <script type="text/javascript" src="{{ asset('bundles/leaflet/edit/handler/Edit.Marker.js') }}" ></script>
+<script type="text/javascript" src="{{ asset('bundles/leaflet/ext/L.Polyline.measuredDistance.js')}}"></script>
 
 <style type="text/css">
 div.leaflet-control-layers-overlays label div span, div.leaflet-control-layers-base label div span {
@@ -46,7 +47,7 @@ div.leaflet-control-layers-overlays label div input {
 
 
 
-<script type="text/javascript"> 
+<script type="text/javascript">
 var blueIcon = new L.Icon({
 	iconUrl: "{{ asset('bundles/leaflet/icons/leaflet_color_markers')}}/img/marker-icon-blue.png",
 	iconSize: [25, 41],
@@ -176,4 +177,4 @@ var miniSquareOrangeIcon = new L.Icon({
 	iconSize: [12, 12]
 });
 
-</script>
+</script>