Google Maps API v3 - Snap to polyline edges - javascript

Does anybody knows how to make a Marker or a Polyline snap into the coordinates of a existing Polyline?
I'm looking for something like the behavior in the googlemaps engine lite: https://mapsengine.google.com
If you select a Polyline or Marker there and try to edit another polyline coordinate (using ctrl or shift) it will snap into the marker or the polyline coordinates

There is, as far as I know, no easy way to do it. Polylines only have the locations (latLng objects) that you initially pass them and that is it.
So, with this in mind, you can take two approaches:
Instead of a Polyline, you can draw a Polygon.
Change your Polyline to include more points.
Polygon
With this approach, you would have to draw a very thin polygon, thin enough to look like a line.
Wit this approach you can easily check if the marker is inside the polygon by using the containsLocation() method, and if not, set its new position to inside the Polygon.
The drawback is that your Polygon needs to be very, very thin, and you need to set a width for the line. If the width is too big, the dragging will look inaccurate, and if it is too small you may miss it.
Polyline
With this approach, you would have to add multiple points to the polyline, and then move the marker to one of those points every time it went out.
This way there is no need to create a width to calculate the line, but you need to calculate dozens if not hundreds of extra points automatically, and then add them to the Polyline.
Both solutions would work, and both have pros and cons. In the end, it pretty much goes around the which poison do you prefer old saying.
Extra
Theory aside, I did find a good example for the Polylines strategy (kudos to #geocodezip for the comment and #BradBarrow for the response).

Related

Plotting a presumably canvas based custom map with JS

I'd appreciate some help with working out how I'm going to do this. I have a file from which I need to load a list of geographical coordinates (with lines, points, labels etc) and plot my own map with it. As I've said, each point corresponds to a geographical coordinate, but note that these are not overlaid on top of an existing world map, they are the map themselves if this makes sense.
I figured a canvas with some maths to work out which pixel a geographical coordinate should lie at, but this raises the question of how could I make it possible to zoom/pan this map?
Hope this makes sense. For reference, it'll look something like the following:

Problem while modifying MultiPolyline drawn over dateline in Openlayers

I am working on an application in OpenLayers which allows users to draw polylines and modify them.
For sake of presentation when the user draws across the dateline, I have split the polyline into two halves and added it to map as a MultiPolyline (MultiLineString) in OpenLayers.
The problem is when the user tries to modify the point on the dateline, the line can be observed as split on the map to the user.
Which should not happen. When a user tries to modify the point on the dateline, it should be seen as a complete line not split at any instance.
To see the problem draw a polyline across the dateline and try to modify the dateline point (180° longitude). Here is a link to my code dateline modify problem
I was thinking about adding a vertex from the point being modified to the point on the dateline, is there a way to do that?
Also, I have observed that not all the polylines on my map are modifiable. I don't know why.
Please suggest me if I should refactor my code with a different approach.

Create a polygon around each point in geojson from geojson

Creating a map similar to the one found here:
https://www.plantmaps.com/interactive-california-2012-usda-plant-zone-hardiness-map.php
Have all the data needed.
Create polygons around each one without distance inbetween. No overlapping or similar.
Drawing it all by hand on geojson.io, seems impossible.
I want to create polygons around each [point] and make sure there is no distance between them.
What you're describing here is a tessellation. Depending on your data, you might opt for a regular tessellation (i.e. creating a grid of squares or hexagons, paying a modicum of attention to the units of your coordinate system) or the well-known-among-GIS-people Voronoi tessellation. Note that a Voronoi tessellation created over a regular grid of points will result in a regular grid of polygons.
There are plenty of tools for Voronoi tessellations. For javascript and GeoJSON, my tool of choice would be turf.js's voronoi module.
Here are some things to consider:
creating polygon from a point is simple enough. For example you use the point as the center of a regular polygon and devide 2PI by the number of sides and step through the points to create the polygon. But, what is the radius? That depends on the projection you are using. I happen to use OpenLayers and really like this map control. It's default projection it EPSG:3857. So, the coordinates are already in meters - so easy. But if your points are in long/lat then you have to do some math. it may be easier to transform to a different projection temporarily. An opensource library that is really nice for gis calculations if you need one is Turf.
You mentioned also about having non-overlapping polygons? Well, in this case you will have a lot of gaps if you use regular polygons. To have non-overlapping polygons with, as you put it no distance between them is an interesting constraint. Now you are dealing with different shaped polygons. And an algorithm for handling that is pretty intense. I know that MapInfo GIS has a feature for adjusting polygons to be non-overlapping. But, in a JavaScript environment with GeoJSON, you are probably talking about server side logic for this.
That map you are looking at looks like it is using Leaflet with svg overlays.

How to draw polygons sharing exact same edges (borders) using Leaflet Draw

Using geojson.io page I want to draw some districts/countries.
I'm drawing each district separately as there is no multipolygons in Leaflet Draw. However when I'm drawing the borders even with maximum zoom - the borders will never be exactly the same. Coordinates will differ to some extend which is natural. Hence when I am downloading the data in topojson , the data are not valid to display meshes between different districts
How to achieve the goal to have the borders always with the same coordinates?
For example it could be achieved by having the markers visible during drawing and just picking up the one I'm interested in(on a same border) by mouse click - the same way the shape is finished.
I have downloaded the source code, read it (it is nice), searched through docs and thinking how to adjust it for my goal but I'm lost :/
Leaflet.Snap did the trick.
I was afraid that snapping will be not exact for the borders but it is :)

Selecting the unused area of a polygon as a new polygon in Google Maps API v.3

I'm trying to calculate and select the remaining area of a polygon when another polygon is placed inside it. I have an initial outer polygon. I then add a smaller polygon inside it which is up against the edge, sharing one or more sides with the outer polygon. I'm trying to get a new polygon path for the remaining unused area of the outer polygon.
As the 2 polygons share a boundary I'm looking to get a single polygon path for the new polygon rather than a complex polygon made up of an outer path and a hole/island.
Google Maps API Geometry library does have a method for detecting if a point is near the edge of a polygon - google.maps.geometry.poly.isLocationOnEdge(). I think that this is the way forward. I can get these points and push them into new arrays or use their indices. I just can't figure out how to use them to get to the remaining area.
Any help would be welcome whether it's Google Maps specific or just more general geometry theory.

Categories