Is it possible to draw a line that curves around the road when only given Geo point and a length?
Using Mapbox GL.
example will be I have a train I want to draw on the rail.
train object will be
{ gps: {lat:xxxxx, long:xxxx }, length: 5}
I would like it to draw on the map so that it curves around the rail as a map layer
Related
I want to ask if you want to make GeoJSON geometry in react-leaflet in reactJS that is Polygon but no results come out, if you use only 2 points, such as element["geometry"]["x"], and element["geometry"][" y"], but if the Polygon is like this it is also almost like an example Point;
element["geometry"]["x"],
element["geometry"]["y"],
element["geometry"]["x"],
element["geometry"]["y"],
Do I need to add more parts of my coding so that Polygons can be read on maps?
And I read the link fromLink1 and Link2
I am attempting to use the PolyLabel library with GeoJSON data and the Google Maps API to generate appropriately placed labels for irregular polygons. The documentation says that the library accepts polygon coordinates in GeoJSON-like format.
The problem is that I cannot figure out what data to pass from the Google Maps API data layer to PolyLabel to get the best fit label position.
polygons.forEach(function (feature) {
var geo = feature.getGeometry();
var position = polylabel(???, 1.0);
var mapLabel = new MapLabel({
position: position,
text: feature.getProperty("LABEL"),
fontSize: 25,
fontColor: "red",
map: map
})
currentLabels.push(mapLabel);
});
I have tried multiple variations on passing in the feature, the geometry, the raw coordinates, and constructing polygons from the coordinates.
It is also worth noting that the GeoJSON data contains a mixture of Polygons and MultiPolygons.
Thank you.
definitely difficult to see, but you can find it here.
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/polylabel/index.d.ts
for each point in the polygon, you have [x, y].
Each polygon is then [[x,y]...], and polylabel takes array of polygons.
I need to create pushpins for the below input.
var Countries = ["Austria", "Brazil", "India", "Germany", "USA", "Malaysia"];
Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(Countries, geoDataRequestOptions, map,
(data) => {
var value = data.location;
if (data.results.length > 0 && data.results[0].Polygons !== null) {
var polygons = data.results[0].Polygons;
var dataBounds = Microsoft.Maps.LocationRect.fromShapes(data.results[0].Polygons);
var loc = new Microsoft.Maps.Location(dataBounds.center.latitude, dataBounds.center.longitude);
var pin = new Microsoft.Maps.Pushpin(loc, {
icon: svgIcon,
anchor: new Microsoft.Maps.Point(20 / 2, 20 / 2)
});
map.entities.push(pin);
locs.push(pin);
map.setView({ bounds: Microsoft.Maps.LocationRect.fromLocations(locs), padding: 80 });
}
});
}, 3000);
I am using GeoDataAPIManager to get the boundary polygons and get the center of the polygon to generate a pushpin. But when loading countries like Malaysia or USA, the pushpins are placed in the sea, as the getboundary() returns multiple polygons and getting the center of the polygon returns the center between the two boundaries which results in the pushpin placed in the sea.
Let me know if there is any alternate way to create the pushpin or to get the center of the polygon.
I already tried the spatial.Math module to get the center.
This is a common occurrence when working with polygons as their shape can be such that their center is not within the actually geometry. There are several different ways to do this.
Method 1: This method will fall back to the nearest point to the calculated center that's on the edge of the polygon.
Calculate centroid/center either using math library or rough center by using bounding box center.
Check to see if the point intersects the polygon, if not, calculate the closest point on the edge of the polygon (shortest distance), then use that point as your center.
Method 2: Focus just on the largest polygon.
If the geometry is a MultiPolygon, calculate the area and grab the polygon with the largest area. For the USA, this would give you the polygon for the mainland which is likely desired.
Try method 1, using just the largest polygon.
Method 3: Attempt to calculate a visual center using external library.
Convert the polygon to GeoJSON using the GeoJSON module in Bing Maps: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/geojsonwritetogeojson
Pass the geojson geometry into this library to calculate the visual center. https://github.com/mapbox/polylabel
I'm trying to figure out how to draw an interactive hex grid on top of Google Maps by using d3.js, but I can't seem to find the documentation necessary for this particular implementation.
Current demo that I'm working with
This is a combination of the ionic-starter-maps project with a d3.js geometry overlay demo mixed in (code for this video is here). I plan to utilize some hex grid information from this article.
The two heavy lifting (I think) functions are here:
function d3init() {
width = map.getDiv().offsetWidth;
height = map.getDiv().offsetHeight;
projection = d3.geo.equirectangular()
.translate([0,0])
.scale(57.29578)
.precision(.1)
context = new PolyLineContext();
path = d3.geo.path().projection(projection).context(context);
equator = {type: 'LineString', coordinates: [[-180,20],[-90,0], [0,-20], [90,0], [180,20] ] }
render();
}
function render() {
polyline.setOptions({
strokeColor: 'red',
strokeWeight: 2
});
context.setCurrent(polyline.getPath());
path(equator);
}
Most of the examples I find use the SVG method to draw shapes, but I would like to have lots of these hexes so it sounds like canvas might be better suited to the task.
How can I cover the map with a hex grid? What is the best method for adding geometry to the overlay, and should I be looking at equator = {type: 'LineString',... as the place to add more coordinates for the hex grid?
By using the Bezier curve polyline draw function provided by nicoabie I was able to draw a curved line from one point on the map to another. The problem is that this function does not take in to account the fact that when a point is past the maximum coordinate mark it is not necessarily on the other side of the map, since it wraps around.
For example, drawing a curved line from Seattle to Tokyo. A regular polyline would go across the Pacific ocean, but the the curved line draws east across the whole globe.
geodesic: true does not work in this case since the line must have a consistent curvature.
My question is: can a consistently curved line be drawn that takes in to account map wrapping?
Use the option third "nowrap" argument of the google.maps.LatLng class to force all the relevant points to have the same sign (set it to true, it defaults to false).
gmarkers[10].setPosition(new google.maps.LatLng(35.689488,139.69170)); // Tokyo
gmarkers[0].setPosition(new google.maps.LatLng(47.60621,(360-122.332071),true)); // Seattle
boundsCenter.setPosition(new google.maps.LatLng(36.096756,(360-178.986565),true)); // control point 1
gmarkers[6].setPosition(new google.maps.LatLng(48.511996,180)); // control point 2
var curvedLine = new GmapsCubicBezier(gmarkers[0].getPosition().lat(), gmarkers[0].getPosition().lng(), boundsCenter.getPosition().lat(), boundsCenter.getPosition().lng(), gmarkers[6].getPosition().lat(), gmarkers[6].getPosition().lng(), gmarkers[10].getPosition().lat(), gmarkers[10].getPosition().lng(), 0.01, map);
working fiddle