Why is Polygon's geoJSON geometry unreadable? - javascript

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

Related

Using PolyLabel with GeoJSON data and Google Maps

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.

Mapbox adding a long object that lines up with the road

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

Want to merge group of tracts with esri using javascript

I am using Esri web with javascript to create a heat map of tracts.
There are groups of tracts that represent one area so I want to merge and remove the bounders between them.
How can I do this?
This is How I draw the tracts:
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Census_Tract_Areas_analysis_trim/FeatureServer/0",
outFields: ["*"],
renderer: renderer,
definitionExpression: "FIPS IN (" + fips + ")"
});
Well, It seems clear that your want to create one large polygon out of too many small polygons(group of tracts).
Follow below steps to achieve this-
don't add feature layer on the map
Create an empty map with basemap and add a graphics layer on it.
query the group of tracts from the layer using esri query task and store the geometry in an array.
use esri gemetryEngine union method and pass the array to it.
union will return a big ploygon without the inner boundaries of 'group of tracts'.
create an esri graphics with new polygon symbol and union polygon geometry.
Add that graphics to the previously added graphics layer.
Feel free to shoot your further queries.
Hoping this will help you :)

ArcGIS JS - Use square extent of a polygon to create a square polygon?

I have a polygon that is dynamically created at the end of a sub-routine in my JS. I know I can get the xmin, xmax, etc out of this but I am not sure how to create a square polygon and what attributes to pull this extent info from. I tried the following one-liner:
map.graphics.add(new Graphic(unionPoly.getExtent(), symbol));
where unionPoly is the polygon I am trying to create the square polygon from. I do not get any errors and the "symbol" variable is used by another polygon that is being drawn clearly, using that defined symbology.
N/M, this did in fact work! Line of code was placed in the wrong area.

Displaying Antarctica using GeoJSON in heremaps

I'm trying to render Antarctica geojson shape on a map using the HERE maps api.
The geojson is found here: https://github.com/johan/world.geo.json/blob/master/countries/ATA.geo.json
You can see github renders it nicely.
Using the same geojson on geojson.io also renders it nicely.
But somehow it seems to render the 'inverse' of Antarctica when using it in HERE maps.
It colors everything except antarctica.
see: http://imagebin.ca/v/1dZIn5vsEuFx
(I've tried making an expample using jsfiddle, but it's not able to load external json. And the HERE maps api doesn't allow you to load geoJSON from a string)
Is there an issue with the geoJSON? Is there an issue with the HERE maps api?
The API doesn't quite understand what to do with the open polygon. Because the polygon is basically just a line around the globe the API doesn't know if you shape closes over the north pole or the south pole. By default it assumes that open polygons close over the north pole. You can change this by using this flag (setNorthPoleCovering):
http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-polygon.html#h-map-polygon__setnorthpolecovering
However, actually getting to that point in the code where this can be done is a bit complicated:
// When you instantiate the geojson.Reader you can specify a function that
// receives all objects the reader parsed. It is called when objects are
// being rendered on the map. At that point we can look into the object and
// check whether it is Antarctica
var reader = new H.data.geojson.Reader('...ATA.geo.json', {
style: function(obj) {
if (obj.getData().properties.name === "Antarctica") {
//AHA! We found Antarctica!
// Since this is a multi-polygon we have a group here which contains
// all polygons. We apply the north-pole-covering flag to each of the
// polygons
obj.forEach(function(polygon) {
polygon.setNorthPoleCovering(false);
});
}
}
});
reader.parse();
map.addLayer(reader.getLayer());
Depending on what you want to accomplish in terms of dynamic behavior, if you are just looking to display or share a map with cards and other metadata about a country with some basic styling -- HERE XYZ can be used to render GeoJSON on a HERE map.
If you want to do it with JavaScript rather than an embedded iframe, the other answer may be what you are looking for.
There is an there an issue with the GeoJSON, and other mapping APIs would have the same problem. It needs to be closed at the 180th meridian, so
[178.277212,-84.472518],[180,-84.71338],[-179.942499,-84.721443]
becomes
[178.277212,-84.472518],[180,-84.71338],[180,-90],[-180,-90],[-180,-84.71338],[-179.942499,-84.721443]

Categories

Resources