I'm trying to convert lon,lat values to X,Y coordinates to update the geometry on a feature. Currently, what I have, I believe should work, but doesn't:
var t = esri.geometry.geographicToWebMercator(new esri.geometry.Point(lon,lat),
new esri.SpatialReference({ wkid: 32616 }));
console.log(t);
This returns:
Object {
type: "point",
x: 3864579.687523207,
y: -22608299.977863092,
spatialReference: { wkid: 102100 }
}
// the numbers for x,y should be something close to: 529000, 3842179
Even though I'm specifying the spatialReference to as { wkid: 32616 }, it's returning with { wkid: 32616 }.
How do I go about correctly converting lon,lat to x,y with a different spatialReference than the default 102100?
use the Geometry Service or create your own service for this operation..
ArcGis Javascript api does not have any solution for such issues
Try using the Geometry Service to reproject the geometry into the new Spatial Reference.
https://developers.arcgis.com/javascript/jsapi/geometryservice-amd.html#project
Related
I am trying to invert the toner layer here, and maybe add a color tint to it as well as you can see here on Map Stack : http://mapstack.stamen.com/edit.html#toner[invert=1,tint=$1e88e5#100]/11/37.7547/-122.3513
Although, I'm not sure how would I use that url as a parameter since I don't see it reflect on the map instance.
The API in OpenLayers has no information on how to manipulate the Stamen map.
The Code
<TileLayer
id="nightmode"
title="Night Mode"
source={
new Stamen({
layer: 'toner',
params: {
layers: "",
format: "image/png",
tiled: true
}
})
}
/>
In OpenLayers 6 similar to the grayscale OSM in this example https://openlayers.org/en/main/examples/semi-transparent-layer.html you could specify a className for the layer and use an invert css filter https://codesandbox.io/s/gifted-newton-mk9th?file=/main.js
An alternative would be to use a globalCompositeOperation similar to https://codesandbox.io/s/globalcompositeoperation-fktwf
I'm using google-map-react (not react-google-maps), and is able to insert polygons by calling a function polygonDraw within my main Component (not using drawingManager). My function polygonDraw can be seen below.
I can immediately delete the newest polygon by adding polygon.setMap(null) inside my polygonDraw function.
But here is the problem:
I can't delete previously added polygons or all polygons. My need is to be able to delete all polygons and do this without dependency on event handlers (like a click event on a polygon).
I tried different approaches, but had no successful implementation, including:
I'm not able to construct a Polygon component that render new google.maps.Polygon({.etc.}) objects (based on state/props).
As I'm able to insert polygons with my polygonDraw function my current thinking for strategy is:
To establish a reference for each added polygon. I tried implementing React references, including Callback refs and using React.createRef. But no success. My polygonDraw is inside the main component, but outside the render. I can't figure out if it's possible to establish and store a reference to each added polygon, so reference.setMap(null) can be called for each. And if it is possible I don't know how to establish the reference (code inside constructor?, code inside polygonDraw?, code inside render including GoogleMapReact?)
Any help/advice is appreciated :-)
polygonDraw = () => {
let polygonCoords = [{lat: this.state.lat, lng: this.state.lng}, {.etc.}, {.etc.}]
const polygon = new google.maps.Polygon({
paths: [polygonCoords],
fillColor: 'rgb(255, 215, 0)',
});
polygon.setMap(this.state.map.map);
}
render() {
return (
<GoogleMapReact
.etc.
></GoogleMapReact>
)}
I don't know if it cuts down to performance issues, but what about saving the polygons into an array.
// You have to create a store (eventually in the state?)
const polygons = [];
polygonDraw = () => {
let polygonCoords = [{lat: this.state.lat, lng: this.state.lng}, {.etc.}, {.etc.}]
const polygon = new google.maps.Polygon({
paths: [polygonCoords],
fillColor: 'rgb(255, 215, 0)',
});
polygon.setMap(this.state.map.map);
// Then use this to save it to the polygons
polygons.push(polygon);
// OR this if you want
polygons.push({identifyer: "foo", polygon});
}
Afterwards you can just filter through the polygons array and delete the polygons you need.
I don't know if this solution will work, but you can give it a try :)
Some three locations are connected in a triangle shape in Open Layer Map. I am trying to get all the three locations (latitude and longitude) with the help of OpenLayers and React JS. But unfortunately, I am able to get the Latitude and Longitude of visible view and not the marked layers.
When I used the below code, it is not fetching the expected long and lat and it is resulting the visible map long and lat.
var glbox = map.getView().calculateExtent(map.getSize());
var box = proj.transformExtent(glbox,'EPSG:3857','EPSG:4326');
console.log("Latitude and longitude :",box);
So, I have tried with the below options as well and it is not resulting the expected long and lat.
console.log("Long and Lat :",map.getFeaturesAtPixel()); //--> null
console.log("Long and Lat :",map.getLayers());
console.log("Long and Lat :",map.getFeaturesAtPixel()); //--> null
How can I get the latitude and longitude of the all three locations that are shown in the image?
It will never work the way you are currently doing things.
What do I mean? I mean that going through map.getFeaturesAtPixel is one way that can work but you didn't read the API docs. You need at least to provide pixel (x, y screen coordinates) to the function.
You can get pixel using the following
map.on('click', evt => {
console.log(evt.pixel);
})
I've done a simple demo to illustrate. Go to http://openlayers.org/en/latest/examples/gpx.html and paste the following code in the browser debugger console. Click on point(s) and observe the behavior in the console.
map.on('click', evt => {
var features = map.getFeaturesAtPixel(evt.pixel);
if (features) {
// Get name (but it depends of your data attributes)
console.log(features
.filter(feature => feature.getGeometry().getType() == 'Point')
.map(feature => feature.get('name')));
// Get the features, filter to only get Point, then get geometry
// and coordinates, change projection to lon lat
console.log(features
.filter(feature => feature.getGeometry().getType() == 'Point')
.map(feature => `Longitude, latitude: ${ol.proj.toLonLat(feature.getGeometry().getCoordinates()).join(', ')}`));
}
})
Edit due to feedback.
To get the points from a LineString, just do
var featuresLinestringPointsCoordinates = vector.getSource().getFeatures()
.map(feature => {
return feature
.getGeometry()
.clone()
.transform('EPSG:3857','EPSG:4326')
.getCoordinates();
});
console.log(featuresLinestringPointsCoordinates);
// More readable and we only get the first linestring
console.table(featuresLinestringPointsCoordinates[0])
Tested on the official snap demo after drawing a LineString
I would like to add vertical lines to graph as markers for interesting events.
The only way i can see to add multiple lines is to define multiple controller.verticalLine annotations like
controller.verticalLine({
xAnchor: "2007-09-23"
});
controller.verticalLine({
xAnchor: "2008-10-23"
});
Is it possible to do this nicer like
controller.verticalLine([{
xAnchor: "2007-09-23"
},
{
xAnchor: "2007-10-23"
},
{
xAnchor: "2007-11-23"
}]);
or better, pass it a data set using mapAs, where each value in the mapping would be a xAnchor value ?
var mapping = dataTable.mapAs({"value": 4});
controller.verticalLine(mapping);
Thanks
You can define the lines from the dataset with the custom field and get them from data with the get() method:
https://api.anychart.com/latest/anychart.data.Mapping#get
mapping.get(i, "anchor"),
Like is shown here: https://jsfiddle.net/osub60ck/
I have a problem with WMS overlays in OpenLayers. Basically I just want to add data from a WMS server as an overlay and not as a base layer. This appears to be a very simple problem but I am unable to find a solution. If I set singleTile to true, the overlays appears over the whole map but you cannot zoom in. If it is set to false, only one tile is displayed at every zoom level. If I set it as a base layer, it works just fine but I really want the overlay solution so I can make it transparent and see the map behind it.
Demonstration of the problem, with a different dataset but the issue is the same:
http://jsfiddle.net/adbnC/2/
I think it might be related to some coordinate system issues but I am no expert so any help is appreciated.
Thanks a lot!
Here is the relevant section of the code that does not work as expected:
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000",
"http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false,
// Setting single tile to true will kind of work but than one
// cannot zoom in any more.
singleTile: false
}
);
I can't quite get what exactly is wrong here, but I think it has something to do with messed up reference systems. Here is a workaround:
Modified Jsfiddle.net
I changed the map projection to spherical mercator and now it seems to work fine for me:
var mapOptions = {
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m"
};
map = new OpenLayers.Map('map', mapOptions);
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000", "http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false
});
map.addLayer(osm);
map.addLayer(pop_layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
Let me know if that helped!