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.
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 have a LeafletJS map with a GeoJSON layer that contains multiple polygons. If a user enters a latitude/longitude coordinate that falls within the GeoJSON layer, the script should retrieve the feature that contains that point and log some information about it to the console.
I can't simply use Leaflet's built-in event handling because the latitude and longitude coordinates are generated by a separate input field, not by direct interaction with the map. So my question is not a duplicate of this.
I'm looking for something similar to getFeatureContainingLatLng() in the example below:
var map = L.map('map');
var geojson = L.geoJson(myGeojson);
geojson.addTo(map);
$.on('address input changed event', function(lat, lng) {
var myFeature = geojson.getFeatureContainingLatLng(lat, lng);
console.log(myFeature.properties);
});
The plugins Leaflet.CheapLayerAt or Leaflet-pip should help. Both approaches will solve your problem, albeit they have different advantages and disadvantages specially in terms of algorithmic complexity.
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?
When using JS ArcGis API, is it possible to create a point in ArcGis from lat and long like this
var testPoint = new Point(-98, 38);
or this
var testPoint = new Point(-98, 38, new SpatialReference({ wkid: 4326 }));
and convert it to a different SR so that its x and y are changed automatically? E.g. to wkid 102000/3857?
CONTEXT: (Maybe you can find a workaround)
I'm using heatmap.js to draw heatmapLayers on ArcGis maps. I found some examples and the way this API ingests data is using a variable data on the following format:
var data = [
{
attributes: {},
geometry: {
spatialReference: { wkid: ****},
type: "point",
x: -40,
y: 50
}
},
{another point....}
];
The API itself does some parsing over data variable and then uses this method
screenGeometry = esri.geometry.toScreenGeometry(this._map.extent, this._map.width, this._map.height, parsedData.data[xParsed][yParsed].dataPoint);
to transform the parsed point (parsedData.data[xParsed][yParsed].dataPoint) before finally drawing heatmap.
The main problem is that no matter what wkid I pass to the point (**** in the code before), it interprets it as wkid: 102000, that's why I wanted to do coordinate conversion myself beforehand.
I guess it should be esri.geometry.toScreenGeometry task to actually do that conversion, but, as I said, it ignores the wkid.
Thanks before hand,
esri.geometry.toScreenGeometry is not what you're looking for - that converts the supplied geometry into screen coordinates (ie. pixels), which you would presumably use if you were trying to do custom overlays on the map, or control HTML elements overlapping the map itself.
The function you want is esri.geometry.webMercatorUtils.geographicToWebMercator, which takes in a geometry in lat/long and returns it in 102100 (or 3857) specifically so it can be added to a standard ESRI JS map. From the docco:
require([
"esri/geometry/webMercatorUtils", ...
], function(webMercatorUtils, ... ) {
var geom = webMercatorUtils.geographicToWebMercator(candidate.location);
...
});
(Amusingly, this is the opposite to most coordinate system questions on SO, where people ask "why doesn't my point appear on the map" when they feed in lat/long coordinates. Kudos for working out why it doesn't appear. :) )
What I'm trying to do is draw a circle on google maps and retrieve the latitude/longitude/radius to store in a database, alternatively a geometry object would also be fine.
Using the standard code from https://developers.google.com/maps/documentation/javascript/examples/drawing-tools i created the map and drawing toolbox. What i can't seem to do is get the lat/long/radius from the map using javascript, surely this must be possible.
Any ideas?
Thanks
Note - my code is identical to the google example, i figured it was better to link to it rather than copying ~60+ lines of html into a post.
Thanks
Ref: https://developers.google.com/maps/documentation/javascript/drawing
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
var radius = circle.getRadius(),
center = circle.getCenter();
});
Edit: getCenter()