ljagis / leaflet-measure Goto Github PK
View Code? Open in Web Editor NEWCoordinate, linear, and area measure control for Leaflet maps
Home Page: http://ljagis.github.io/leaflet-measure/
License: MIT License
Coordinate, linear, and area measure control for Leaflet maps
Home Page: http://ljagis.github.io/leaflet-measure/
License: MIT License
I have added a dutch translation, see fork https://github.com/DatapuntAmsterdam/leaflet-measure
Is it possible to add this to your repository.
Thanx.
Hello. thanks for lib. is it possible add translation to lib and use own translating?
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.
how can fixed 3 decimals digits after comma with area measurements.
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..
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).
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
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.
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.
For example i have circles on my map, and I cant set.continue measure line inside it. Any way to solve this?
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({});
Tested with latest Firefox.
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.
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
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.
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 we move a mouse, there is a tooltip showing the measurement like distance or area.
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.
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
}
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?
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.
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
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
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
Since 2.0.3 the CSS file has references to missing images. It is working in version 2.0.2.
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
Is there any events like measure start or end ?
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?
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?
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.
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?
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?
Currently look of measure templates are hardcoded. There could be configuration parameters which allow to :
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;
}
Current measurements are presented as feet, miles, and acres. Add control options to use other units, like meters, kilometers, sq meters.
Is it possible not to add control, but to open measurement block manually?
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?
One of the dependencies of this package is causing a Webpack compile error which comes out simply by importing leaflet-measure.
Here is the PR for the fix: #83
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,
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.
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.
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
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?
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 .
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]
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
}
}
});
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
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
This project doesn't have a license, making reuse or redistribution complicated.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.