zhenyanghua / measuretool-googlemaps-v3 Goto Github PK
View Code? Open in Web Editor NEWA mobile friendly measure tool for Google Maps JS API v3.
Home Page: https://zhenyanghua.github.io/MeasureTool-GoogleMaps-V3/
License: Apache License 2.0
A mobile friendly measure tool for Google Maps JS API v3.
Home Page: https://zhenyanghua.github.io/MeasureTool-GoogleMaps-V3/
License: Apache License 2.0
I have a question, how can i open info window like google map normal when i use this API ? When i use your API, the mouse always hover and can't open info window anywhere, like bus stop, shop,..
Hello again.
I found a bug in IE11 : when you measure some length, then try to slide the map to the east (seeing more west) ; the more you slide, the more the east side of the map disappears.
I made you a plnkr with support for IE11 : https://plnkr.co/PtjERAwbFRU5B1g2RsAY
I had to use some Object.assign()
polyfill :
if (typeof Object.assign != 'function') {
Object.assign = function(target) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
target = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source != null) {
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return target;
};
}
(sorry for the big copypaste of Measuretool.js, the <script src="">
inclusion did not seem to work in plnkr)
Im not sure if this is an issue or the intended use.
The measure_end listener is only trigged when you clear measurements. I expected it to trigger when you complete a drawing area.
Currently when you finish drawing an area on the map the calculated area is written on the map. At this same point I need to trigger it to populate a text input with the calculated area?
is this an issue? if so is it possible to add another listener? there is obviously a trigger which writes the calculated area on the map.
Hi,
¿How can I change the color of the rectangle and the background?
Thanks.
I notice that measureTool.start(initialPoints)
method is asynchronous, which means that If I write code like this:
// say, there are 10 points in array `initialPoints`, with total length 1000m
measureTool.start(initialPoints);
console.log(measureTool.length); // 0
I will not get what I want.
Can you make start()
return a promise ?
like this:
measureTool.start(initialPoints).then ((tool)=>{ console.log(tool.length) })
Hi, great tool -- thanks for sharing!
Unfortunately, on multi-touch devices you don't have a way to right-click. Maybe it would make sense to add some kind of substitute?
See https://stackoverflow.com/a/30895557 and https://api.jquerymobile.com/taphold/
As the title says. package.json
's main
parameter value is a file name that does not exist, which can break integration in frameworks or build tools (it does in Angular + Webpack). Could you change the value or add a symlink from lib/MeasureTool.min.js
?
Thanks for your cool plugin.
currently, measure_change
event is triggered three times when the unit
is changed, this should not happen.
Hi, im used your tool in my project, but i have a conflict in right click event (show a menu). I have an event in the map and create my custom menu. My suggest is in your tool options, enable and disable that event.
Ex: measureTool = new MeasureTool(mapRef, {
tooltip: false,
dropdownMenu: false
});
And thankyou of this project.
After instantiating MeasureTool, markers and shapes misbehave.
Examples:
mouseover
and mouseout
events are not fired.In attachment is sample code that reproduces the issue.
index.html
in browser.s
to add rectangle.t
to add marker.t
to add marker.main.js
file in editor and change first line to const USE_MEASURE_TOOL = false;
Tested in Firefox 57 and Chrome 62.
Hi.
I've added a NAUTICAL type locally, that extends the IMPERIAL and METRIC types, so that nautical miles can be used measurement units.
I need this to be able to use your tool. Can I create a branch to push this to for you to pull? Or is it something you could add quickly. It's just a few lines of code.
Thanks, Steve.
I can't seem to figure out how to do it. Can you change the unit after the instance has been initialized? I want to add a toggle in my UI for switching the units on the fly.
Hi,
Is it possible to display area in "Acre" unit?
I need dbl click to start again after disabled measure tool.
<button onclick="measureTool.start()">start</button>
<button onclick="measureTool.end()">end</button>
How i fix this?
wiring setters for the rest options (may need a more sophisticated way to delegate through the helper, may need to decouple from the helper, the current way I am using helper will increase the maintenance as more options get into play e.g. localization..).
1-) To start measuring, right click the map and choose “Measure distance”.
MeasureTool.min.js:1 Uncaught TypeError: Cannot read property 'fromLatLngToContainerPixel' of undefined
at Hg. (MeasureTool.min.js:1)
at Object.trigger (js?key=AIzaSyBTdH3AFSWLD3SrgbNqTGoRsg3U6W0qAAg&libraries=geometry&callback=initMap:118)
at fy (map.js:31)
at cy (map.js:29)
at Object.jb (map.js:28)
at Nn..m.Ka (common.js:177)
at In..m.Ka (common.js:176)
at HTMLDocument.D._.Un.Oa (common.js:76)
When a polygon is drawn, I'd like to have its content of a certain color, instead of transparent.
Is this something doable?
I can duplicate this at http://zhenyanghua.github.io/google-maps/measure-tool/
Any way to work around?
When you pass in an array of points when starting measurement, it would be great to have an option to prevent changing the last point of the route.
I initializate the component with 2 points, start and end of route. It would be great if the user could add new points by clicking on the segments, to adjust to route to streets or whatever, but prevent the map's click to mantain the end of route.
measure_change: segments are in the result;
measure_end: segments are not in the result.
Hi there, it seems something is wrong with the demo. It worked last week, but now right-clicking appears to do nothing.
Thanks!
If the default "zoom control" is set to hidden (zoomControl: false) on map, it will show up right away after pressing the first point again to close the area (i.e. after the "Total Distance" message).
Hi ! In MeasureTool, the cursor goes back to 'dragging' style. In our app, the style 'default' is relevant for its precision (you see exactly where you click). Hence I suggest to add that as an option. I made a commit :
Would you accept it in a PR ?
Multilanguage support or possibilities to translate expressions to custom language would be great!
I am using it in a project which language is German or French.
Hi,
It's can use it in vue project?
I have a project base on vue. and use vue-google-maps. i have no idea how to use it.
The best option is to specify zIndex of the entire ruler when defining, like this:
measureTool = new MeasureTool(map, {
//contextMenu: false,
showSegmentLength: true,
tooltip: false,
unit: MeasureTool.UnitTypeId.METRIC,
zIndex: 100,
});
Hi,
How to customize the distance text color and make it by default bold in all measurement. is there any settings available.?
thanks
nishar
let measureTool = new MeasureTool(..);
// user draw ...
measureTool.getPoints(); // return [{lat: 10, lng: 10}, {lat: 20, lng : 20} ...];
There are 3 reasons for this:
Using this method I don't have to get the MeasureResult
only when user trigger events (measure_start
, measure_end
, measure_change
).
Even though I've got the MeasureResult
, using MeasureResult
I have to parse the start_location
and end_location
of every segments
to get the points. And If I simply push them (start_location
and end_location
) into an array, I would have to do the deduplication work (as every two adjacent segments will have at least one same point ), which is kind of annoying.
The new feature in v0.3.0 allow user to pass an array of points to start()
, like
`measureTool.start([{lat: 47.94796, lng: -116.70797}, {lat: 47.95028, lng: -116.69907}])`
Originally posted by @profileCaren in #31 (comment)
It makes sense to show the small units instead of decimal format when < a full unit. Or at least provide an option to do so.
Say, I have an array of segments like below, how can I draw it to the map ?
let segments = [{lat: 1, lng: 1}, {lat: 10, lng: 10}, {lat: 7, lng: 7}, {lat: 1, lng:1}];
When the MeasureTool is instantiated, click events on markers added through angular-google-maps stop working. It works some times though, but then reload the same page and it's not working again. Shapes are not affected, also are not added through angular-google-maps. I don't know if it's an issue with angular-google-maps or MeasureTool.
Maybe there's a way to disable functionalities and keep the basic needed ones to see if the problem is avoided this way? I just need to be able to start the tool through my own menu (no context menu needed) and click to get the distances between the successive points then stop the tool altogether with my own menu again, so no need to drag or click point to remove.
Thank you.
I'm seeing an issue where if you draw a line and then zoom in and out a bit (using the zoom buttons- mouse wheel doesn't seem to do it) the line can get duplicated. It takes quite a bit of zooming in and out to do this, but if you rapidly zoom in and out it will duplicate.
I see this in Chrome 66.0.3359.170 (Official Build) (64-bit) on Windows. Also in Opera 52.0.2871.99 and Firefox 59.0.2.
This seems related, but was fixed in a newer version of Chrome, while I am still seeing this issue in Chrome 66.
When I drag the "white circle" then the +- zoom control of the map disappear. You can reproduce this problem with your demo.
Need an alternative to bulk set options.
As the title suggests, it would be perfect if the first and the last point are connected.
if we use this library, draggable: true properties from map.data.setStyle not working.
Refactor start and stop measuring methods to public methods so that users can bind widget tasks to their own UI.
Extract the current context menu as a default option for users to use without a UI.
Is there a way of listening for the end method to start another event?
Basically when the area is calculated I need it to insert that numerical value in a text box.
getters for the available options.
This can be reproduced on the example page:
I tried setting the z-index
on .measure-tool-context-menu
to a high value but that doesn't seem to solve the issue.
Currently only the length, lengthText, area and areaText are added to the measure-result. It would be very useful if the measure-result could be expanded with the number of points (pointsCount) and optionally an array of all points (points).
It would be awesome to be able to convert miles squared to acres
My map using many marker and polygon. When I start measure tool I can not start or click on polygon or marker.
I can not publish my app.
this is my map option
var myOptions = {
zoom:zoom,
minZoom: wpgmza_max_zoom,
maxZoom: wpgmza_min_zoom,
center: latLng,
draggable: wpgmza_settings_map_draggable,
disableDoubleClickZoom: wpgmza_settings_map_clickzoom,
scrollwheel: wpgmza_settings_map_scroll,
zoomControl: wpgmza_settings_map_zoom,
panControl: wpgmza_settings_map_pan,
mapTypeControl: wpgmza_settings_map_type,
streetViewControl: wpgmza_settings_map_streetview,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
};
this is callback
measureTool = new MeasureTool(this.map, {
unit: MeasureTool.UnitTypeId.METRIC,
contextMenu: false,
});
measureTool.addListener('measure_change',(e)=>{
var typeMea = jQuery('#measure_tool_type').val();
var result = e.result;
console.log(result);
if(typeMea == 'distance' && result.length > 0){
jQuery('.current-measurement').empty();
jQuery('.current-measurement').append('<p>'+result.lengthText+'</p>');
}
if(typeMea == 'area' && result.area > 0){
jQuery('.current-measurement').empty();
var areaConver = result.area*0.000247105;
jQuery('.current-measurement').append('<p>'+result.areaText+'</p><p>'+areaConver.toFixed(2)+' acre</p>');
}
});
Please help #me.
Also, I can't add a measurement line after clearing a previous measurement line. I assume these are probably two manifestations of the same bug.
I noticed that after installing the package the webAPP slows down at startup.
Analyzing the behavior through the tools provided by the browser I noticed that 3 BLOB files are created. They are 3 CSS files (adding up the CSS classes are about 10). The problem is that it takes 5 to 7 seconds to process these files. Is it possible to disable the creation of these 3 BLOB files ?
how ca i integrate this great tool with angularjs?
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.