Code Monkey home page Code Monkey logo

Comments (7)

timburgess avatar timburgess commented on July 21, 2024

+1

from leaflet-measure.

hernangomez avatar hernangomez commented on July 21, 2024

on line 5011, replace with :

var measure = function (latlngs) {
  var last = _.last(latlngs);
  var path = geocrunch.path(_.map(latlngs, function (latlng) {
    return [latlng.lng, latlng.lat];
  }));
  return {
    lastCoord: {
      dd: {
        x: last.lng,
        y: last.lat
      },
      dms: {
        x: ddToDms(last.lng, 'E', 'W'),
        y: ddToDms(last.lat, 'N', 'S')
      }
    },
    length: {
      feet: path.distance({
        units: 'feet'
      }),
      miles: path.distance({
        units: 'miles'
      }),
      meters: path.distance({
        units: 'meters'
      }),
      kilometers: path.distance({
        units: 'kilometers'
      })
    },
    area: {
      acres: path.area({
        units: 'acres'
      }),
      sqmeters: path.area({
        units: 'sqmeters'
      })      
    }
  };
};

from leaflet-measure.

answerquest avatar answerquest commented on July 21, 2024

+1! Thanks @hernangomez .. but I guess some more changes in the file would be required? I suspect it's at the lines:
var controlTemplate = _.template(.....
var resultsTemplate = _.template("<div ....
var linePopupTemplate = _.template("<h3>Lin...
var areaPopupTemplate = _.template("<h3>A...

from leaflet-measure.

answerquest avatar answerquest commented on July 21, 2024

Done! I changed miles to km, feet to meters, while keeping area in acres, since that's what the common system is here in India. Request to the developer to please introduce a variable at the top of the script, separately for distance and for area. So setting it this way or that should make the desired changes. Or maybe an option in the front-end?

Changed these lines, from 5108 (after incorporating @hernangomez 's edits):

var controlTemplate = _.template("<a class=\"<%= model.className %>-toggle js-toggle\" href=\"#\" title=\"Measure distances and areas\">Measure</a>\n<div class=\"<%= model.className %>-interaction js-interaction\">\n  <div class=\"js-startprompt startprompt\">\n    <h3>Measure Distances and Areas</h3>\n    <ul class=\"tasks\">\n      <a href=\"#\" class=\"js-start start\">Create a new measurement</a>\n    </ul>\n  </div>\n  <div class=\"js-measuringprompt\">\n    <h3>Measure Distances and Areas</h3>\n    <p class=\"js-starthelp\">Start creating a measurement by adding points to the map</h3>\n    <div class=\"js-results results\"></div>\n    <ul class=\"js-measuretasks tasks\">\n      <li><a href=\"#\" class=\"js-cancel cancel\">Cancel</a></li>\n      <li><a href=\"#\" class=\"js-finish finish\">Finish Measurement</a></li>\n    </ul>\n  </div>\n</div>");
var resultsTemplate = _.template("<div class=\"group\">\n<p class=\"lastpoint heading\">Last Point</p>\n<p><%= model.lastCoord.dms.y %> <span class=\"coorddivider\">/</span> <%= model.lastCoord.dms.x %></p>\n<p><%= humanize.numberFormat(model.lastCoord.dd.y, 6) %> <span class=\"coorddivider\">/</span> <%= humanize.numberFormat(model.lastCoord.dd.x, 6) %></p>\n</div>\n<% if (model.pointCount > 1) { %>\n<div class=\"group\">\n<p><span class=\"heading\">Path Distance</span> <%= humanize.numberFormat(model.length.meters, 0) %> Meters (<%= humanize.numberFormat(model.length.kilometers, 2) %> Kilometers)</p>\n</div>\n<% } %>\n<% if (model.pointCount > 2) { %>\n<div class=\"group\">\n<p><span class=\"heading\">Area</span> <%= humanize.numberFormat(model.area.acres, 2) %> Acres</p>\n</div>\n<% } %>");
var pointPopupTemplate = _.template("<h3>Point Location</h3>\n<p><%= model.lastCoord.dms.y %> <span class=\"coorddivider\">/</span> <%= model.lastCoord.dms.x %></p>\n<p><%= humanize.numberFormat(model.lastCoord.dd.y, 6) %> <span class=\"coorddivider\">/</span> <%= humanize.numberFormat(model.lastCoord.dd.x, 6) %></p>\n<ul class=\"tasks\">\n  <li><a href=\"#\" class=\"js-zoomto zoomto\">Center on this Location</a></li>\n  <li><a href=\"#\" class=\"js-deletemarkup deletemarkup\">Delete</a></li>\n</ul>");
var linePopupTemplate = _.template("<h3>Linear Measurement</h3>\n<p><%= humanize.numberFormat(model.length.meters, 0) %> Meters</p>\n<p><%= humanize.numberFormat(model.length.kilometers, 2) %> Kilometers</p>\n<ul class=\"tasks\">\n  <li><a href=\"#\" class=\"js-zoomto zoomto\">Center on this Line</a></li>\n  <li><a href=\"#\" class=\"js-deletemarkup deletemarkup\">Delete</a></li>\n</ul>");
var areaPopupTemplate = _.template("<h3>Area Measurement</h3>\n<p><%= humanize.numberFormat(model.area.acres, 2) %> Acres</p>\n<p><%= humanize.numberFormat(model.length.meters, 0) %> meters (<%= humanize.numberFormat(model.length.kilometers, 2) %> Kilometers) Perimeter</p>\n<ul class=\"tasks\">\n  <li><a href=\"#\" class=\"js-zoomto zoomto\">Center on this Area</a></li>\n  <li><a href=\"#\" class=\"js-deletemarkup deletemarkup\">Delete</a></li>\n</ul>");

Here's a Diff to highlight the changes: https://www.diffchecker.com/bjcb9gnv

from leaflet-measure.

answerquest avatar answerquest commented on July 21, 2024

I've forked and put my version here: 1b4776a
Not making a pull request, since I'm just changing this to suit my requirements which would not be suitable for the original project.

Rather, we should be able to pass our choice of units as a control option. And it helps to have a secondary unit to specify that'll appear in brackets, as happens now for length. I don't know how to code that into the script, but here's a probable example of how I'd pass it:

var measureControl = L.control.measure({
position: 'bottomright', 
activeColor: '#0004FC', 
completedColor: '#0004FC'
lengthUnit: 'meters',
lengthUnit2: 'kilometers',
areaUnit: 'acres'
areaUnit2: 'hectares'
});
measureControl.addTo(map);

from leaflet-measure.

jojorb avatar jojorb commented on July 21, 2024

that will be very welcome to be able to have this options above, thanks

from leaflet-measure.

brandoncopeland avatar brandoncopeland commented on July 21, 2024

Sorry it took a while on this. Unit options added with commit a1592eb.

You can now pass primaryLengthUnit, secondaryLengthUnit, primaryAreaUnit, secondaryAreaUnit options. The secondary units are optional. If omitted, only values in the primary units will be displayed.

Supported values for length are feet, meters, miles, and kilometers. Defaults are feet and miles

Supported values for area are acres, hectares, sqmeters, and sqmiles. Defaults are acres and no secondary.

from leaflet-measure.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.