ljagis / leaflet-measure Goto Github PK

Hi There,
This is a great tool and is exactly what I'm looking for but unfortunately I can't get it to work! It works fine when I add it to a map with just some generic baselayers but I have an image map service that is brought in using l.esri.imageMapService and then rendered using a raster function.

My image layer is in WGS 1984 Web Mercator Auxillary Sphere. Any advice would be greatly appreciated.

Thanks

Hello. thanks for lib. is it possible add translation to lib and use own translating?

The demo does not work.

TypeError: d is undefined
d.Control.Measure=d.Control.extend({_className:"leaflet-control-measure",options...
leaflet....min.js (Zeile 3, Spalte 1)

TypeError: L is undefined
var map = L.map('map', {
/leaflet-measure/ (Zeile 51, Spalte 9)

Maybe a result of the JS Minification...

Hi,

i translated leaflet-measure into several languages (hu,sl,sk,ro,cz) and would like to share them with you.
I don't fully comprehend how the localization structure works so I'll just post it here hoping someone with more understanding can integrate it.

hu = {
'measure': 'Mérés',
'measureDistancesAndAreas': 'Távolság- és területmérések',
'createNewMeasurement': 'Egy új mérés elvégzése',
'startCreating': 'Végezzen mérést pontok elhelyezésével a térképen.',
'finishMeasurement': 'Mérés befejezése',
'lastPoint': 'Utolsó pont',
'area': 'Terület',
'perimeter': 'Szegély',
'pointLocation': 'Pont helyzete',
'areaMeasurement': 'Mért terület',
'linearMeasurement': 'Mért távolság',
'pathDistance': 'Kijelölt vonal távolsága',
'centerOnArea': 'Közelítés erre a területre',
'centerOnLine': 'Közelítés erre a vonalra',
'centerOnLocation': 'A település közepére igazítani',
'cancel': 'Mégse',
'delete': 'Törlés',
'acres': 'Holnap',
'feet': 'Láb',
'kilometers': 'Kilométer',
'hectares': 'Hektár',
'meters': 'Méter',
'miles': 'Mérföld',
'sqfeet': 'Négyzetláb Feet',
'sqmeters': 'Négyzetméter',
'sqmiles': 'Fedvények',
'decPoint': ',',
'thousandsSep': ' '
};

[others to follow]

Hi, great work.
There is a "p" tag which closes with "/h3" tag in control template.
https://github.com/ljagis/leaflet-measure/blob/master/src/leaflet-measure-template.html#L11

Tried out this plug-in with Leaflet 1.0.0-beta.2 (99a48a5), but one only gets a dot, it does not create polylines or polygons nor does it report lat/lon.

This might be related to:

Leaflet/Leaflet.draw#455
Leaflet/Leaflet#4018

Windows 7 OS, Chrome Version 46.0.2490.86 m

After clicking on finish measurement and the layer created , if a new measurement is created and a point is placed inside the created feature, it shows the information window instead of adding a new point. The same happens if external layers are added to the map.

A way to handle that is to get the measure start event , then catch layer click and simulate a map click :

map.fireEvent('click', {
  latlng: latlngPoint,
  layerPoint: map.latLngToLayerPoint(latlngPoint),
  containerPoint: map.latLngToContainerPoint(latlngPoint)
});

I tried that on handling click on my layers and it works .

leaflet-measure.js includes:

var L = require('leaflet');

https://github.com/ljagis/leaflet-measure/blob/master/src/leaflet-measure.js#L4

For most use cases Leaflet will already be loaded, which means Leaflet is loaded twice and overrides the already loaded version (which causes problems in my case).

Hello every body!
I think the mouse cursor on map isn't proper when the measurement control is active.
So I tried to change it:

.layer-measuredrag {
  cursor: crosshair !important;
}

But it doesn't work! Any idea?

This should be optional, but enabled by default. While measurement is active, do not allow clicks on any other map layers (markers, polygons, etc..).

Currently, this can be handled by the user by adding some implementation in the measurestart, measureend events. Add this as standard feature.

Is there any events like measure start or end ?

When we move a mouse, there is a tooltip showing the measurement like distance or area.

I tried to import leaflet-measure as a module in Angular2 but apparently it is not possible:

import * as C from 'leaflet-measure' I have also tried import * as C from 'leaflet-measure/dist/leaflet-measure.min.js'

        var mapOptions = {
            center: L.latLng(0, 0),
            zoom: 3
        };

        var measureControl = C.Control.Measure(mapOptions)
        measureControl.addTo(this.myMap);

Any suggestion on how to accomplish this?

Currently the map shows things like

1017° 00' 00" S / 14° 30' 00" W
-1,017.000000 / -14.500000

For one on my map the N/S and E/W are switched over (I think that's the behaviour for any TRS map?), i.e. those coordinates would be 1017 W / 14.5 S. Next part is that we don't even have a degree / minutes / seconds based system, so it really should just show it as 14.5 S / 1017(.0) W. Would be nice if the display of coordinates could be made available as a function that can be passed into the measure constructor to override default behaviour.

If using a canvas renderer for leaflet, the measurement tool is somewhat broken. The control points dont show up and there is an error stating layer._path is undefined. Is there some way to support the canvas renderer or trick the map into using svg renderer for measurement drawing?

Link to plunker

Hi, is there any way to get the result values? As far as I examine the "measurefinish" event, it is just used for warning the user. By the way I don't want to get the values from DOM search, after popup appears.

Regards

I have added a dutch translation, see fork https://github.com/DatapuntAmsterdam/leaflet-measure
Is it possible to add this to your repository.
Thanx.

I have lots of MapMarkers with bound popups (click) that give details about that sensor reading. Users love the leaflet-measure tool. But the issue is that they cannot take measurements of distances between map markers due to the conflict of what .click() does.

Any suggestions?

I think sqkilometers should be supported by default (as sqmiles is supported).

It's a tiny implementation:

sqkilometers : {
    factor: 0.000001,
    display: 'Km. cuadrados', // This should be i18n files
    decimals: 2
}

npm install leaflet-measure
var L = require('leaflet');
require('leaflet-measure');

Complains of fs..
Error:
webpackMissingModule @ leaflet-measure.js:14
(anonymous function) @ leaflet-measure.js:14
(anonymous function) @ leaflet-measure.js:407
(anonymous function) @ bundle.js:5325
webpack_require @ bundle.js:30
(anonymous function) @ Map.jsx:31
(anonymous function) @ bundle.js:5127
webpack_require @ bundle.js:30
(anonymous function) @ TraitMap.jsx:29
(anonymous function) @ bundle.js:5115
webpack_require @ bundle.js:30
(anonymous function) @ TraitMapContainer.jsx:33
(anonymous function) @ bundle.js:3681
webpack_require @ bundle.js:30
(anonymous function) @ MainContentContainer.jsx:25
(anonymous function) @ bundle.js:3675
webpack_require @ bundle.js:30
(anonymous function) @ AppContainer.jsx:35
(anonymous function) @ bundle.js:3441
webpack_require @ bundle.js:30
(anonymous function) @ app.js:45
(anonymous function) @ bundle.js:57
webpack_require @ bundle.js:30
(anonymous function) @ bundle.js:50
(anonymous function) @ bundle.js:53
webpackUniversalModuleDefinition @ bundle.js:7
(anonymous function) @ bundle.js:10

Is it possible not to add control, but to open measurement block manually?

I could not find any documentation regarding this feature. If this feature is not yet included, it would be really great if this option was added. leaflet.draw.js has this functionality, that is, minus the measurements.

One of the dependencies of this package is causing a Webpack compile error which comes out simply by importing leaflet-measure.

Screenshot:

Here is the PR for the fix: #83

Steps to recreate:

Create a new app:

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

works.

Install leaflet and leaflet-measure:

npm i --save leaflet leaflet-measure

Import into my-app/src/App.js:

import 'leaflet'
import 'leaflet-measure'

See this error in the console:

leaflet-measure.js:15Uncaught TypeError: fs.readFileSync is not a function
    at Object.<anonymous> (leaflet-measure.js:15)
    at Object.<anonymous> (leaflet-measure.js:457)
    at __webpack_require__ (bootstrap 056f279…:555)
    at fn (bootstrap 056f279…:86)
    at Object.<anonymous> (App.js:6)
    at __webpack_require__ (bootstrap 056f279…:555)
    at fn (bootstrap 056f279…:86)
    at Object.<anonymous> (index.js:3)
    at __webpack_require__ (bootstrap 056f279…:555)
    at fn (bootstrap 056f279…:86)
(anonymous) @ leaflet-measure.js:15
(anonymous) @ leaflet-measure.js:457
__webpack_require__ @ bootstrap 056f279…:555
fn @ bootstrap 056f279…:86
(anonymous) @ App.js:6
__webpack_require__ @ bootstrap 056f279…:555
fn @ bootstrap 056f279…:86
(anonymous) @ index.js:3
__webpack_require__ @ bootstrap 056f279…:555
fn @ bootstrap 056f279…:86
(anonymous) @ bootstrap 056f279…:578
__webpack_require__ @ bootstrap 056f279…:555
(anonymous) @ bootstrap 056f279…:578
(anonymous) @ bootstrap 056f279…:578

May be related to #30 and #67

Tested with latest Firefox.

leaflet-measure.min.js is relatively large. Work to reduce this size. An easy start is to decide if some of the little used dependencies (like color) are worth the overhead.

A very very minor aesthetic point. It seems that all the other plug-ins that I have that show an icon, are 26px x 26px. So this one sticks out. I tried this code and it seems to work. What do you think about standardizing the size?

    .leaflet-control-measure .leaflet-control-measure-toggle, .leaflet-control-measure .leaflet-control-measure-toggle:hover {
        display: block;
        width: 26px;
        height: 26px;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-image: url(images/rulers.png);
        border-radius: 5px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }

Hello.

I am use on map click handle for show popup identify features.

If measure created on click handle hide measure popup...

How to find measure object by coords and disable identify features popup?

Hi,
At present, the measure control is added to Map. I dont want the control get added to my map. Instead i had a html toolbar and on click of a button inside that, the measure control event should activate.

Leaflet.PM (drawing tool plugin) gave the option to assign the events to custom buttons. Is it possible with your plugin. Please help.

For example i have circles on my map, and I cant set.continue measure line inside it. Any way to solve this?

When using leaflet-measure plugin with current version of Leaflet - 1.03

Below error occurs when double-clicking on one point. Prevents popup for point location from showing.

Uncaught TypeError: resultFeature.getBounds is not a function
line 7361 leaflet-measure.js

The current expectation is styling of map graphics is done via CSS. This works when 1. paths are rendered as SVG and 2. there is browser SVG CSS styling support. This leaves too many cases for issues.

Better option.. Still support CSS styling if this is the preferred customization method, but apply default styles to features directly and add additional control options to better support style customization.

Additional control options: I don't want to add detailed pathOptions for every map feature produced by the control. That would suck. We can add 2 new options: 1. activeColor and 2. completedColor. These will be used to set colors on all paths. Other style details like line widths, opacity, marker size, etc... will only be available through CSS. If that level of styling is necessary, just fork and do something different.

That's a great plugin! There is one thing I would very much like that it supports: custom templates. What about putting the templates into options so we can use our own templates? I think this should be pretty easy, isn't it?

L.Control.Measure = L.Control.extend({
  _className: 'leaflet-control-measure',
  options: {
    position: 'topright',
    primaryLengthUnit: 'feet',

    resultsTemplate = _.template("....")
}
...

and then in code

  _updateResults: function () {
    var calced = calc.measure(this._latlngs);

    // instead of : this.$results.innerHTML = resultsTemplate({})
    this.$results.innerHTML = this.options.resultsTemplate({});

Hi, is there a way to delete the last point of measurement, in case of user commit an error in measurement. Is there some implementation for this functionality ?

Regards.

I would love to add this into the single control panel I currently have with zoom and fullscreen buttons.

Is there an option to combine or does it have to sit standalone?

Is there a way to integrate the plugin with angular leaflet directive ?

I tried to use the custom controls like this :

var measureControl = new L.Control.Measure({
        position: 'left'
    });

angular.extend($scope, {
     controls : {
          custom : [measureControl]
     }
 })


<leaflet center="center" controls="controls" layers="layers"></leaflet>

But it doesn't work.

I try to install leaflet-measure with yarn install command, i've got an error and install failed, "Cannot read property 'toUpperCase' of undefined" but npm install is fine ...
Test with all version, when i remove leaflet-measure from package.json, yarn install done with success..

Very odd issue with new version. I am using Chrome v51. The first measurement I try to make, The First click (no lat/lon) Second No lat/lon, third, then I get a three point measurement. (using latest beta of Leaflet).

But then if I cancel or accept the measurement, and start making new measurements, I get correct operation from the very first point (first: lat/long, second click: a line measurement, etc.)

             measureControl = new L.Control.Measure({
                 position: 'topleft',
                 captureZIndex: 10000,
                 primaryLengthUnit: 'meters',
                 secondaryLengthUnit: 'cm',
                 primaryAreaUnit: 'sqmeters',
                 secondaryAreaUnit: 'sqm',
                 units: {
                     cm: {
                         factor: 100,
                         display: 'cm',
                         decimals: 2
                     },
                     sqm: {
                         factor: 1,
                         display: 'sqm',
                         decimals: 4
                     }
                 }
             });

Are there any plans to support custom calculators for distances? E.g. in my setup I have a flat map and a change of 1.0 in either direction represents exactly 1 meter. Now I could probably just create a custom unit myMeters with a really small "factor" value but I suppose it might be neat to have it more generalised.

When I try to include leaflet-measure as a dependency and build with webpack I get this error:

ERROR in .../leaflet-measure/dist/leaflet-measure.js
Module build failed: SyntaxError: Invalid number (4006:32)

4006 | fs.mkdirSync(this.directory, 0755);

It seems like this is non-standard way of writing an octal number - it should be:

fs.mkdirSync(this.directory, 0o755);

See options defaults here:
https://nodejs.org/api/fs.html#fs_fs_createwritestream_path_options

how can fixed 3 decimals digits after comma with area measurements.

When adding and removing the control, in-progress drawings on the map are removed, but the measurement geometries (the result of a completed geometry) do not get removed.

Although this may be intended, the "Delete" button for those geometries doesn't work if the control isn't enabled. The popup shows when you click the geometry, but clicking the "Delete" button shows an error in the console.

Hi there,

just added the measure control to my map (after trying it on your demo and now I really want it ;) ). The control itself works fine: It enlarges when hovering, I can start measurements and cancel / "finish" them. But after starting a measurement clicking on the map does not add any points.

Stripped my stuff from the code so it's now basically just a Leaflet map instance with the control added, still not working. You can have a look at it here: http://illy.bz/tmp/measure-test/ (or download that test on http://illy.bz/tmp/measure-test.7z ).

Any idea what's going wrong with my map?

Kind regards,
Chris

Current measurements are presented as feet, miles, and acres. Add control options to use other units, like meters, kilometers, sq meters.

Love the plugin! However, I'm building a map using mapbox extensions (e.g. L.mapbox.map), and my code hiccups if I try to add leaflet-measure. Change L.mapbox.map to L.map, and measure works (though on my maps, a lot of other stuff breaks). Any chance of supporting mapbox?

This project doesn't have a license, making reuse or redistribution complicated.

Currently look of measure templates are hardcoded. There could be configuration parameters which allow to :

• specify custom templates
• custom translation messages

Hi,
Appreciate it if you could allow setting of leaflet-measure options from map options during map initialization.

In leaflet-measure.js from line 7480:

L.Map.mergeOptions({
  measureControl: false,
  measureControlOptions: null
});

L.Map.addInitHook(function () {
  if (this.options.measureControl) {
    this.measureControl = (new L.Control.Measure(this.options.measureControlOptions)).addTo(this);
  }
});

Edit:
Then we can do this:

var myMap = L.map('mapElementId', {
  measureControl: true,
  measureControlOptions: options
});

Much appreciated if we can have this feature.
Thank you.

Since 2.0.3 the CSS file has references to missing images. It is working in version 2.0.2.