I'm here because I'm trying to create a GTA V map with Leafletjs API. In deed, I've got my tiles that are ready. But the aim is to put markers on the map by using GTA V in-game coordinates. To achieve it, I need to convert the coordinates to LatLong but after many researches, I can't find a solution.
Example :
Thanks in advance.
Your coordinates are coming from different map projections. The Leaflet ones are most probably standard WGS 84 (SRID 4326). GTA V coordinates are obviously based on a different projection.
Coordinates can be transformed from one projection to anothers. But you need to know, which projection your coordinates are coming from, to do the math.
Here is an online converter provided with some common projections, and i tried your coordinates, but had no luck in coming close with these projections.
I tried this:
var latlng = new L.latLng(-43.1731, 6.6906);
var point = L.Projection.Mercator.project(latlng);
console.log(point);
// o.Point {x: 744794.1851014761, y: -5309112.129212381}
It is not close to your GTA V coordinates, but I'm not sure it were just for example.
You can use L.latlng function
http://leafletjs.com/reference.html#latlng
Related
Currently I am trying to understand a Codpen where this guy has JSON data being fed into a Javascript app that plots coordinates using x and y.
Instead of using longitude and latitude to plot for example Hong Kong, he uses these coordinates.
{"x": 768,"y": 342,"name": "", "country":"Hong Kong"}
I want to be able to put in x and y a longitude and latitude value, but I can not figure out how to multiply or divide, a simple solution to go with his code. I am new to Javascript, but am trying to understand how to plot coordinates more efficiently on this specific project.
Is there a simple equation I could use to be able to plot more easily on this pen.
Thanks.
https://codepen.io/Flamov/pen/MozgXb
The example is basically using the Mercator Projection to convert radius, lat, long into euclidean x, y, z coordinates, as mentioned on lines 860+ of the JSFiddle you provided, and is using this S.O. answer as reference. Since radius is constant throughout the globe, you don't need to repeat that value for each point, it's just hard-coded into the example.
Mercator is a bit confusing because the scale stretches towards infinity as you approach the poles. As an easier alternative, you could use Vector3.setFromSphericalCoords(rad, lat, long) as outlined in the docs and it sets x, y, z for you. The main difference is that this approach doesn't cause distortion near the poles. It takes lat, long in radians:
lat ranges from [0, Pi] (north pole to south pole)
long ranges from [0, 2*Pi] (around the equator)
In OpenLayers I use the ol.source.XYZ.
So I use a own URL with the Variables {x} {y} {z} and {a-z}. I want to render some pics with another Webserver.
But I don't understand what the Variables x y and z does tell me..
I need Coordinates in lat and lon. for example: 10.1234567 and 9.1234567. Google cant tell me, whether I can convert this? Or should I just use another OpenLayers solution?
OpenLayers give me the following values for example:
x=3, y=262144, z=19
These coordinates are tile coordinates. x and y are the column and row in the tile grid, and y is the zoom level. If you need to know latitude and longitude of the tile corners, you can use
var extent = source.getTileGrid().getTileCoordExtent([z, x, y]);
This will give you the extent in the view projection. To convert to geographic coordinates, use
ol.proj.transformExtent(extent, map.getView().getProjection, 'EPSG:4326');
I have a standard leaflet map showing a tile layer. Now leaflet only lets you use panTo method using LatLng for example,
map.panTo(new L.LatLng(40.17, -98.12));
How will I use above panTo method if my coordinates are in EPSG:3857 for example (3679364.68,-9096106.74) ?
This is quite simple to to in Openlayers as once you define a map projection everything works in that projection. But Leaflet always works on latlng on the outside.
Any simple way to accomplish this using leaflet library?
Thanks!
Leaflet lets you use panTo method by unproject 3857 point. If you don't want to use proj4js library it also achieve in leaflet.
var point = new L.Point(3679364.68,-9096106.74); // Lon/Lat
var earthRadius = 6378137;
var latlng = L.Projection.SphericalMercator.unproject(point.divideBy(earthRadius));
map.panTo(new L.LatLng(latlng.lat, latlng.lng));
I can get it working if I use proj4js library to transform the coordinates by doing this:
var source = new Proj4js.Proj('EPSG:3857');
var dest = new Proj4js.Proj('EPSG:4326');
var p = new Proj4js.Point(-9096106.74,3679364.68); //this takes x,y
Proj4js.transform(source, dest, p);
this.map.setView(new L.LatLng(p.y, p.x),zoom);
But this is still not an ideal solution as it taxes me a Megabyte for for including the library. I am still looking for a leaflet solution. Knowing that internally leaflet already uses EPSG:3857 to fetch tiles, this shouldn't be this difficult.
Update
To do this purely in Leaflet, look at #ARsl's answer. Only reason I still accept this as my answer because, still feel uncomfortable doing the projection calculations like that (not that they are wrong), and just for that reason I don't accept this answer. Plus proj4js as added advantages of supporting many more datums.
I also haven't found any built-in method to convert EPSG:3857 coordinates to LatLng.
LeafLet crs class L.CRS.EPSG3857 has only project method which converts L.LatLng to L.Point in EPSG:3857 coordinates.
https://github.com/Leaflet/Leaflet/blob/master/src/geo/crs/CRS.EPSG3857.js
But it is quite easy to extend it with unproject method:
L.CRS.EPSG3857.unproject = function (point) { // Point -> LatLng
var earthRadius = 6378137;
projectionPoint = L.point(point).divideBy(earthRadius);
return this.projection.unproject(projectionPoint);
};
Then you can use it with panTo method:
map.panTo(map.options.crs.unproject([1372720.6476878107, 5690559.995203462]));
or:
map.panTo(L.CRS.EPSG3857.unproject([1372720.6476878107, 5690559.995203462]));
I am getting line latitude & longitude as
LINESTRING(1491215.4689647 6893983.2031826,1494163.0718675 6894785.7919795)
after seeing this solution.
how to get points return from OpenLayers.Control.DrawFeature
Now what I want to do is that I want to display start point & end point on my web page.
So how can I extract latitude & longitude from here so that I can show it in my page.
If your linestring is already in OpenLayers, there is no reason to convert it to WKT. Linestring geometry contains array of Points. You can access components of geometry in several ways, for example:
drawControls[key].events.register('featureadded', drawControls[key], function(f) {
// First point
var firstPointGeom = f.feature.geometry.components[0].clone();
// Last point
var secondPointGeom = f.feature.geometry.components[f.feature.geometry.components.length - 1].clone();
// Now you got geometries, let's create features from them...
var firstPointFeat = new OpenLayers.Feature.Vector(firstPointGeom);
var secondPointGeom = new OpenLayers.Feature.Vector(secondPointGeom);
yourVectorLayer.addFeatures([firstPointFeat, secondPointGeom]);
});
Pay attention - this works with LineStrings. Probably it's not necessary to go into detail about clone(), it's up to particular use case, whether you need it, or you can use just var firstPointGeom = f.feature.geometry.components[0];
Thats WKT format, you're looking at. You'll potentially need to reproject those coordinates to the target projection if they are not in the same projection. After than, you should be able ot ask openlayers for the points of any given geometry using the base geometry functionaily. Get the point array from the linestring instance and iterate over it. Make sure you know the right coordinate order for your projection / data model.
Hope that helps!
I want to zoom to a particular house in the google mapS, but when I provide its bounds and lattitude and longitude, it does not show images as well as the particular house. Can anyone provide the solution for this?
Solution would be probably to transporm coordinates first. Unfortunately when You pass coordinates to OpanLayers.LonLat(lon,lat) it is supposed to be WGS:84, while OpenLayer.Bounds() needs coordinates given in EPSG:900913.
You should then use Proj4js.transform and pass transformed coordintes in EPSG:900913
You can transform it like this one:
var map = new OpenLayers.Map('map');
var location.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:900913"));