I have a bunch of markers stored in a mysql database in a table with these attributes id,longitude,latitude.
With an ajax query I get these rows and print to console and they're exactly equal to the ones in the db.
When I create my features with openlayers, with the longitude and latitude retrieved from the db and stored in javascript variables, I don't understand why the markers are placed to another place (they're supposed to be in Italy and they are under Africa).
The interesting thing is that if I manually insert the coordinates while creating the features they show in the right place.
Browsing the internet and trying to debug my code I found some clues.
First, it may be cause of how I store longitude and latitude in the db. I saw there's someone who says DECIMAL(10,8) for latitude and DECIMAL(11,8) for longitude but all of my coordinates are similar to lon: 9.728068 and lat: 44.106414 so i decided to use DECIMAL(7,6) for longitude and DECIMAL(8,6) for latitude.
Second, if I try to console.log the data retrieved from the db I get the right coordinates e.g. 9.728068 and 44.106414 but if I get the coordinates from the features after I created them I get different values.
For the manually inserted coordinates, I get the exact same values, but for the other one no.
Here's a snippet of my code. It's a for loop that in this case will cicle 2 times
var lon = r[i]["Sensor_longitude"]; //getting longitude from success response
var lat = r[i]["Sensor_latitude"]; //getting latitude from success response
console.log(lon); //first time 9.728068, second time 9.728368
console.log(lat); //first and second time 44.106414
//using retrieved coordinates to create the feature
var areaFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lon,lat], 'EPSG:4326', 'EPSG:3857')),
name: sniffer_name
});
//trying to put manually the coordinates
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([9.728068,44.106414], 'EPSG:4326', 'EPSG:3857')),
name: sniffer_name
});
console.log(ol.proj.transform(areaFeature.getGeometry().getCoordinates(),'EPSG:3857','EPSG:4326'));
console.log(ol.proj.transform(iconFeature.getGeometry().getCoordinates(),'EPSG:3857','EPSG:4326'));
I have 2 entries in my db which have
lon:9.728068, lat:44.106414
lon:9.728368 ,lat:44.106414
so I will make 4 markers (areaFeature and iconFeature for each entry). areaFeature has the coordinates retrieved from db and iconFeature has coordinates inserted manually.
I expected the first half of logs to be 9.728068, 44.106414 and the second one to be 9.728368, 44.106414 but instead I get this:
9.728068 //correct
44.106414 //correct
[9.728068, -45.893585099999996] //[correct,wrong]
[9.728068, 44.106414] //[correct,correct]
9.728368 //correct
44.106414 //correct
[9.728367999999998, -45.893585099999996] //[wrong,wrong]
[9.728068, 44.106414] //[correct,correct]
As you can see latitude is nearly correct (don't know why it adds so many digits after the point) but it is negative and longitude in the first case is correct but in the second one it has other digits in addition.
Related
I am making a react native app which includes a map and want to place markers at the centres of different countries. However to create each marker you must provide a set of coordinates so I need a function to which I can pass a country name and it returns the coordinates for somewhere in that country (either of its centre or its capital would be good).
getCoords = (country_name) => {
return coords {
latitude: lat_of_country_centre
longitude: long_of_country_centre
}
}
Does anyone know of a function or api that does this?
You would want to use a geocoding API like OpenCageData to convert a country name into a country.
For example, using OpenCageData, the request https://api.opencagedata.com/geocode/v1/json?key=YOUR_KEY&q=Germany would return a JSON object which contains various information about that location name.
In this case, the coordinates would be located at the path in the JSON object results[0].annotations.DMS, which contains lat and lng, latitude and longitude coordinates in degrees, minutes, and seconds (e.g.) 51° 5' 0.31056'' N for latitude and 10° 25' 24.40884'' E for longitude.
Experimentation with this API or others like it may help you find data that is the best for your specific application.
I would take a look at the Google Maps API. That’ll give you a good starting point.
you can take data from google i.e lat and long coords.
and load to your spreadsheet and write a simple program and load this into the array.
I'm working on a dynamic map API which you can set as you like to. After a person puts in the name of his place I can get the viewport latitude and longitude. First of all, I get 2 values and second they are are both off according to the real coordinates. I see the result back to my own map API as well.
After much confusing I started to compare the 2 and divide them. This still gives a wrong integer.
With this I get the values which are coupled to the name that has been given.
google.maps.event.addDomListener(searchBox, 'places_changed', function(event) {
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location);
for(key in places) {
if(places.hasOwnProperty(key)) {
var value = places[key];
var geoLong = value.geometry.viewport.b.b;
var geoLat = value.geometry.viewport.f.f;
Example:
Empire State builiding: Real coordinates: 40.748817, -73.985428.
My results: latitude: 40.746983 and 40.749681 : longitude -73.983858 and -73.986556.
This is from geometry.viewport.b.(b or f) and geometry.viewport.f.(b or f) That's how I retrieved the information.
Possible solution:
After much try and error of getting the right results, I stumbled onto this.
google.maps.event.addListener(map, 'click', function(event){
console.log( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() );
});
While this is giving the right value back I can't call it like I did with the other 2. It keeps saying that latLng is undefined and that is true because it doesn't work with the objects/array which is given by places.
Question: How come that the viewport is giving a different value then the real coordinates?
If I understand correctly, your intention is to get the position of the place from Google database.
I would suggest following the official API reference documentation and avoid using things like viewport.b.b or viewport.f.f in your code. Note that once Google updates the version of the API these undocumented properties might change their names.
If you check the documentation you will see that getPlaces() method of search box returns an Array<PlaceResult> result.
https://developers.google.com/maps/documentation/javascript/reference#SearchBox
So, var value in your code has type PlaceResult that is documented here:
https://developers.google.com/maps/documentation/javascript/reference#PlaceResult
The geometry property of place result has a PlaceGeometry type that is documented here:
https://developers.google.com/maps/documentation/javascript/reference#PlaceGeometry
That means that in order to get position of the place you should execute the following code
var value = places[key];
var geoLong = value.geometry.location.lng();
var geoLat = value.geometry.location.lat();
I hope this helps!
When trying to define coordinates on my map, I get a different result depending if I hardcode the lon/lat or if they are coming from the database.
document.title = eventName;
document.getElementById("titleEventName").innerHTML = ol.proj.fromLonLat([5.942060,50.751453]);
document.getElementById("tempEventName").innerHTML = ol.proj.fromLonLat([eventCenterMapLongitude, eventCenterMapLatitude]);
document.getElementById("tempEventName2").innerHTML = "eventCenterMapLongitude = " + eventCenterMapLongitude + ", eventCenterMapLatitude = " + eventCenterMapLatitude;
document.getElementById("tempEventName3").innerHTML = ol.proj.transform([661467.0934630792,-4757336.459308266], 'EPSG:3857', 'EPSG:4326');
In the first line, I just display the coordinates by setting them manually. In the second line, I retrieve them from variables set out of the database. In the third line, I show the values of those variables (which are the same as the hardcoded ones). In the 4th line, I re-convert back to lat/lon, and I see that the longitude is ok, but the latitude is 90° lower than the initial latitude.
Here is the output on my screen:
661467.0934630792,6577445.839458974
661467.0934630792,-4757336.459308266
eventCenterMapLongitude = 5.942060, eventCenterMapLatitude = 50.751453
5.942060000000001,-39.24854609999999
What is wrong here? Why do I get -4757336.459308266 in the second line instead of 6577445.839458974?
It looks like you are using different coordinate systems.
See Openlayers 3 center map and http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html
I am trying to use a customers ArcGIS system to render a map on a page using the ArcGIS Javascript API.
To define a map in examples it displays:
map = new Map("map",{
basemap: "topo",
center: [-117.19,34.05], // lon, lat
zoom: 13
});
however this is showing fixed co-ordinates.
I want to be able to hit the RESTAPI in the customers internal system with a land id and return and plot the co-ordinates.
Currently I am retrieving a Degree Minute Second latitude and longitude from the land but wondering if there is a simpler way then having to get these values as a string, split them into degrees minutes seconds and then making a calculation to get their X,Y values to plot into this function to define a map.
Essentially I am just trying to load a map in a location specified by the land id and then after load map layers on top, all through the the local systems RestAPI and the Javascript API.
Thanks,
This is all about spatial reference(i.e 102100, 4326 etc) of the map.
Whatever you will add above snippet code this will add a map with basemap (topology) and center of the map will be co-ordinates which you have provided.
if you want to add a point to map and it has different format of geometry then you can use project geometry operation to convert.
require([
"esri/tasks/ProjectParameters", ...
], function(ProjectParameters, ... ) {
var params = new ProjectParameters();
params.geometries = [point];
params.outSR = outSR;
params.transformation = transformation;
gsvc.project(params);
...
});
For Reference: https://developers.arcgis.com/javascript/jsapi/geometryservice-amd.html#project
Convert Degree minute second to decimal/Lat long:
function ConvertDegreeAngleToDecimal(degrees, minutes, seconds )
{
//Decimal degrees =
// whole number of degrees,
// plus minutes divided by 60,
// plus seconds divided by 3600
return degrees + (minutes/60) + (seconds/3600);
}
Hope this will help you.
Let me know if you need more clarifications!
I know how to get map of a place whose latitude and longitude are given, but i don't now how to get map of area between two cities.
Kindly help.
One possible solution, you need LatLng of towns, for example center point:
var bounds = new google.maps.LatLngBounds();
bounds.extend(latLngOfFirstTown);
bounds.extend(latLngOfSecondTown);
map.fitBounds(bounds);