When drawing an editable Polygon on a map using Google's V3 API, is there some event I could register for that tells me when one of the polygon's points (only made visible by the editable flag) is clicked? I want to be able to enable a user to draw a polygon, using right clicks, and "complete" the polygon by clicking on the first point plotted. I begin by creating a Polygon of one point, and add each successive point with each right-click. I use the mousemove event to create two "completion" lines, two fainter lines (two Polylines) from the last point plotted to the current mouse position on the map, and from the current mouse position on the map to the first ("anchor") point. When I click on that first point, I'd like to be able to "finish" the Polygon, by taking away these completion lines, inferring the intent of the user now to either edit the points already drawn with the handles the editable Polygon provides, or save the Polygon's coordinates to my application.
Is there a way to do this? (As I've written this, I've thought of one solution: create a small circle, invisible, around the first ("anchor") point, and detect when that invisible circle is clicked. But I wanted to see if there was something built-in in the API that I could use.)
Are you trying to roll your own polygon editor? I would suggest using the drawing library instead:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools
Also see events section:
http://code.google.com/apis/maps/documentation/javascript/reference.html#DrawingManager
Related
I've been searching for hours for a tutorial on how to re-create the map/chart functionality displayed on this page.
When you hover your cursor over the histogram chart at different points (which shows elevation) it moves a pin/cursor on the google map to indicate what point on the map the elevation relates to.
Hard to explain but easier if you click on the link and see for yourself.
https://www.greaterhobarttrails.com.au/track/north-south-track/
map & chart
Any guidance is appreciated.
Thank you for your time.
John.
Below are just some guiding points, how to approach this task(probably not the best solution, but should work).
As the first requirement in your path array each point should have three properties - latitude, longitude, elevation.
To build the chart you need to use some of the chart libraries - it should support the mouseover event (here are some examples for chart libraries - https://www.sitepoint.com/15-best-javascript-charting-libraries/). Y-axis is elevation, X-axis can be distance from the beginning of the path(distance should be calculated for each point beforehand).
As the third step you need to show your path on the map - to do that you can use google maps api (https://developers.google.com/maps/).
In the end you need to connect chart and map, you need to subscribe for mouseover event from the chart. When handling that, you're interested in which path point is currently hovered by user. Afterwards you can take coordinates from it and add a marker on the map based on these coordinates.
I can point you to the right direction with some helping methods from my own plugin pathAnimator:
You need to attach a mousemove event on the bottom element (in your specific example) so you can get the x percentage (from 0 to 100).
using the above value, use pathAnimatorm or any of it's methods, to position your marker element on the path of the map at the right point.
you can use pointAt method for that, check the demo at the link above and you'll understand how it's done.
I have implemented the following example from the Openlayers 3 library where you can measure lines and areas.
http://openlayers.org/en/latest/examples/measure.html
Specifically for areas, to complete the shape you can either double click at the last vertex you want to draw, or single click back at the start of the shape when the cursor snaps to the original point.
I have an issue whereby many users are taking their cursor back to the original point and it is snapping, but they are double clicking thinking therefore completing the original shape and inadvertently starting a new one.
How am I able to code this example so that if a double click occurs at the original point, then the shape is completed but a new shape not started?
Thanks
You can set property snapTolerance into 1, it should help:
new ol.interaction.Draw( {
snapTolerance: 1,
...
You still can finish shape with single click, but you have to click exactly in the first point.
I set snapTolerance for myself some time before and people are happy now :).
Whenever I move the view on my leaflet map, polylines whose centers are no longer in view are removed. I have a polyline with a large stroke size (~500px) that is not visible even when part of it should be. This same problem can also be observed when dragging the map, polylines are not redrawn until the drag ends. Example shown below.
I have tried adding a listener for the leaflet remove event but that is not triggering. I also tried overriding the onRemove method for the polyline but that did not work. For now to get around this I have made the map bigger than the screen, but that causes some slowdown.
I assume it is a performance feature to remove non-visible polylines from the map. Does anyone know if that this can be disabled?
yes, as you said the polylines, geoJSON will only redraw after receiving the "dragend" event, so we must redraw even during the drag and we can easily make it happen by writing the following code
map.on('drag', () => {
map.fitBounds(map.getBounds());
});
even L.Path.CLIP_PADDING didn't work for me. but forcefully setting the bounds worked for me.
also, see the demo here.
I needed to set L.Path.CLIP_PADDING.
Found by looking through closed issues on the github repo. https://github.com/Leaflet/Leaflet/issues/2814.
Also in the docs: http://leafletjs.com/reference.html#path-clip_padding
"How much to extend the clip area around the map view (relative to its size, e.g. 0.5 is half the screen in each direction). Smaller values mean that you will see clipped ends of paths while you're dragging the map, and bigger values decrease drawing performance."
I'm trying to return multiple features from two layers from a user click (one feature on each layer)?
I'm using openLayers 2.12. I have 2 vector layers containing polygons, and a container layer containing both.
When clicking where both layers contain a feature, only the layer2 feature is returned.
How do I also get the feature at layer1 of the same position?
Is there away to get a feature from a specific layer at a viewport position?
Explanation: the SelectFeature-Control uses the layers getFeatureFromEvent()method to find one feature for a click, hover, touch etc. event. If SelectFeature controls more than one layer, it glues the layers to a virtual single layer, therefore you get at max one feature in this case, too.
Your 1st question: if you want to select more than one feature, you can use the SelectFeature's selectBox(OpenLayers.Bounds) method: if you create a small Bounds from your position and call selectBox(), all features from all layers controlled by your SC intersecting your bounds get selected.
Your 2nd question: you may make up an OpenLayer.Event from your viewport position and call the getFeatureFromEvent() for the specific layer. This will of course return only one feature, even if a lot features are overlapping at your position.
Hope that helps a little.
I have an interactive map of country in my canvas. User can move and zoom it.
This map consists of different regions of that country.
The next thing I want to do is when user hovers specific region of country on map (each region is made by functions: beginPath,moveTo, lineTo, closePath, fill, stroke), this region gets highlighted and then when user clicks on that region, some popup appear.
What is the way of implementing this?
Thanks to GameAlchemist and markE comments (also thanks to markE link http://dougx.net/map/usmap.html)
I've come to solution: each time mousemove event fires, I draw each region. But I neither stroke nor fill it. So after each closePath method I use IsPointInPath() method to check if mouse hovers this region and from that point I can highlight it or do whatever I need.
The key thing there (thanks to https://shifteleven.com/demo/canvas-hit-detection/) that I don't fill and stroke regions - the thing that takes computer resources. I just draw hidden path and check if mouse hovers this path - region. Follow the link above and it provide it with example of up to 100000 planets drawn on canvas. You may notice that it takes some time to draw these planets and how fast it determines which planet is clicked.