Create a polygon around each point in geojson from geojson - javascript

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.

Related

Generating a continuous interpolated surface from point data with Mapbox GL JS

I'm relatively new to Mapbox and its GL JS Library, but so far have been really impressed at its capabilities.
I'm currently working with a dataset of approximately 100,000 points and am trying to devise a way of quickly generating/visualising a continuous interpolated surface within the convex hull of the dataset I have (essentially trying to generate something that's as fast/responsive as the heatmap function, but looking to interpolate from the point data values rather than spatial density).
The documentation for the heatmap functionality discusses this exact scenario:
Among maps you'll find on the web, there are two common categories of
heatmaps: those that encourage the user to explore dense point data,
and those that interpolate discrete values over a continuous surface,
creating a smooth gradient between those points. The latter is less
common and most often used in scientific publications or when a
phenomenon is distributed over an area in a predictable way. For
example, your town may only have a few weather stations, but your
favorite weather app displays a smooth gradient of temperatures across
the entire area of your town. For your local weather service, it is
reasonable to assume that, if two adjacent stations report different
temperatures, the temperature between them will transition gradually
from one to the next.
But then proceeds to explain this is less common and there's no documentation/example provided for this type of application.
At this stage I've tried converting the points to voronoi cell polygons and colour coding by data value (a nearest neighbour approach to visualising), but the render seems to struggle with 100,000 points at lower zoom levels (0 through 8). Does anyone know if it's possible to create a fast-rendering surface interpolation from point values? Any examples would be fantastic.
The Mapbox Delaunator library is a very fast JavaScript library for Delaunay triangulation of 2D points. d3-delaunay and d3-geo-voronoi are both based off of this library. You could use these libraries and then display the results on your map via a custom style layer.
Looks like what you are trying to do is some sort of Spatial Interpolation.
Here is a summary of popular methods typically used for this purpose.
https://michaelminn.net/tutorials/r-spatial-interpolation/

Plot geometry of longitude and latitude coordinates using javascript

I have longitude and latitude coordinates which represent different types of geometry shapes (point, multi-point, polygon, multi-polygon and line string etc) that are stored in MongoDB. I'd like plot them (say each shape as a layer) using JavaScript. Map is not needed as a background although these coordinates represent building etc in the real world. I understand there are calculations as such are involved to convert coordinates to x and y on graph/canvas but not sure where to begin tbh. I'm very new to GIS and JavaScript so go easy on me please. I know this question sounds a bit vague but bottom line is I have coordinates that represent real world elements and want to plot them without a map background. I'd appreciate advises and suggestions. Many thanks.
The easiest way to do it is to use a Javascript mapping library such as OpenLayers or Leaflet. You could also do it with D3, although should you want to make your map more full-featured later, it will be much easier with a library that was designed for that type of thing.
If you are storing your data in Mongo as GeoJSON (GeoJSON website), you can add it to OpenLayers as a GeoJSON layer.
Disclaimer- My opinions might be slightly biased because I used to work for Boundless

How to find the length of all roads inside a polygon in google map?

I am trying to develop a web application that uses 'Google Map' (JavaScript API).
The user should be able to draw a polygon on the map, and then the system calculates the length of all roads on that polygon.
I can draw the polygon on the map, but I don't know how to calculate the length of roads that are inside the polygons.
How can I do this?
I am using 'ASP.Net MVC' and I am able to send the polygons data to the server if it is easier to calculate it in C#.
If you are calculating the length of the sides of the polygon, that is much easier, as the sides are straight lines from one corner to another. You will need to declare a point of origin, (0,0), then find where each of the corners end, then calculate the length of that single side of the polygon using the distance formula, (that square root formula from middle school that we all loved so much): http://www.mathwarehouse.com/algebra/distance_formula/index.php
If instead, you are trying to calculate the length of the individual roads that fall within the polygon. This would be much more tricky, as there are not very many roads that are perfectly straight lines. You'll need to use the arch length formula: http://tutorial.math.lamar.edu/Classes/CalcII/ArcLength.aspx
Both formulas are easy to use, but the difficult part is setting up the equations for each of the lines. The curved lines will be much more difficult as you will need to somehow graph the roads using equations. Which depending on how Google Map's API works, you may have to get creative with you mathematical logic.
I would be interested in coding this with you. Do you have a GitHub repository?

Leaflet get sub-polyline with specific start and end point

I want to get a "sub-Polyline" of a given polyline that is determined by a certain start and end point (in meters).
For example I have a polyline that is 500 meters (build using 30 coordinates (not seperated in same spaces)) and I want to color the line between meter 200 and 300 in a different color. Is it possible using Leaflet functions?
Take a look at the LineStringSelect plugin here: https://github.com/w8r/L.Control.LineStringSelect
With the demo (click in 2 different locations on the polyline):
https://w8r.github.io/L.Control.LineStringSelect
So basically you are asking "If I have a polyline and a distance value, what is the point along the polyline with the desired length-distance to the line's starting point"?
This algorithm has been covered a multitude of times, e.g.:
http://www.postgis.org/docs/ST_Line_Interpolate_Point.html, http://www.postgis.org/docs/ST_Line_Substring.html
http://turfjs.org/docs/#along
https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim
The algorithm is always the same: divide the polyline/linestring into segments, measure length of each segment, locate the point, apply direct interpolation in the segment that the point is in.
Keep in mind that geometry in a 2D cartesian plane is different than geometry in the surface of a geoid, particularly when it comes to measuring distances. Do a bit of research on GeographicLib and its methods for manipulating geodesic lines.
To your question «Is it possible using Leaflet functions?», the answer is «no, Leaflet does not implement this algorithm». The easiest way for you should be to read the source code of the mentioned Leaflet plugins in the answers, or use the along() method from the Turf library.

Detecting "concave hull" on map image

I'm developing the open-source JavaScript plugin for Waze -- well-known free GPS navigator -- specifically for online editor. The idea of this userscript is to make it possible to quickly select large uniform colored map areas to convert them to landmarks.
So far I've successfully implemented the tool you would call "Magic Wand" in graphic editors like Photoshop: user clicks somewhere on the map (say, on the lake or forest) and script selects whole area covered by same color and creates a polygon for landmark.
Everything works great except that I am using convex hull algorithm to obtain the... well... convex hull :) That is: the polygon connecting the most outer points of the found points cloud.
But as everyone understand only few landmarks have a convex shape while most of real world objects have a polyline shape with concave areas. On the picture above you can see that the area has few sharp edges and a farmfield in the right bottom corner covered by convex hull -- that's wrong.
I was Googling for suitable algorithm and digging through math papers but still have no luck finding one. The most popular question about concave hulls here on Stackoverflow refers to Alpha-shapes along with Delaunay triangles. Though I don't understand how to use it in case: all points are connected to each other forming a continuous polyline thus it seems that I cannot find suitable alpha-radius as even circle with radius equal to 1 pixel with be alpha-exposed.
Any ideas how to archive the goal of building a concave hull will be much appreciated! May be I am moving in a wrong direction and need to look at bitmap vectorization algorithms?
Alpha shapes is defined by finding the delaunay triangulation of a set of points and then delete edges that exceed alpha. You need the delaunay triangulation but not the circles. It's also works with lines. To calculate the shape with JS you can use TopoJSON or try this answer:Calculate bounding polygon of alpha shape from the Delaunay triangulation. You can also try my php package http://concavehull.codeplex.com/.
You can read how to implement concave hull algorithm in this paper. The basic idea is to build the convex hull and flex (concave) edges inward.
There is JavaScript implementation of this algorithm: hull.js.

Categories