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!
Related
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.
I use great Leaflet plugins for geocoding such as https://github.com/smeijer/L.GeoSearch
While these are perfect for showing address locations on the map when found, I would also like to be able to use the coordinates from the result to other functions that I have included in my map (e.g. I've written one which finds nearby points from a data layer based on the locationfound event fired from Leaflet's inbuilt locate function).
I know the answer (probably) lies in accessing the events from the geosearch plugin, but that's a bit beyond my skills at the moment. Any help would be very welcome.
The L.GeoSearch plugin fires it's events on your map instance. You'll need to listen for the geosearch_foundlocations event. The object that's returned when the event is fired holds a Locations property which contains an array with L.GeoSearch.Result objects. Each object has four properties; Label, X, Y and bounds
Example in code:
map.on('geosearch/showlocation', function (e) {
e.Locations.forEach(function (Location) {
// Location.Label = full address
// Location.X = longitude
// Location.Y = latitude
// Location.bounds = boundaries
});
});
I have a list of cities with coords that I'm using with crossfilter library. I would like to filter a group of city in a defined longitude range. Do to that I use dimension.filterRange([min, max]) as described in wiki.
But it doesn't work. I've replied problem in JSFiddle here: http://jsfiddle.net/wc8ba/256/
// raw_data contains list of citis with lat/lng info
var data = crossfilter(raw_data);
var lngDimension = data.dimension(function(d){return d.longitude;});
lngDimension.filterRange([0.37931289062498763, 11.805094140624988]);
// printFIlter is a useful function to show dimension data
printFilter(lngDimension);
In JSFiddle, you can see that "Sassari" city that has longitude = 8.56030000000 it is not included in filtered dimension with lng min = 0.37931289062498763 and max = 11.805094140624988
I would like to know why.
TIA
Danilo Di Moia
It's not returning the right values as your longitude values are strings, not numbers.
If you use var lngDimension = data.dimension(function(d){return parseInt(d.longitude);}); it should work correctly.
I'm new to ESRI's JavaSCript API and am very impressed by its ease of use and speed. As part of a interactive data portal I have users enter latitude and longitude as decimal degrees as part of a spatial query to return State, County and FIPs. That part works just fine, but as an added feature I want to draw a dot graphic on an existing map showing the entered coordinates location (DONE) then Center and Zoom to said point at some reasonable scale.
The centerAndZoom method is the logical choice here, but it doesn't seem to be working. My sense is that the Map needs to be refreshed but I can't seem to figure this one out.
I'm sure I'm missing something fundamental here; Thanks in advance for your time!
function DrawPointAndZoom() {
// Get currently entered lat/long.
var lat = $('#SiteLatitude').attr('value');
var long = $('#SiteLongitude').attr('value');
var latLongPoint = new esri.geometry.Point(long, lat, new esri.SpatialReference({ wkid: 4326 }));
//Draw point
var symbol = new esri.symbol.SimpleMarkerSymbol().setSize(8).setColor(new dojo.Color([255, 0, 0]));
var graphic = new esri.Graphic(latLongPoint, symbol);
var infoTemplate1 = new esri.InfoTemplate();
infoTemplate1.setTitle("point1");
infoTemplate1.setContent("test point 1");
graphic.setInfoTemplate(infoTemplate1);
map.graphics.add(graphic);
map.centerAndZoom(latLongPoint, 15);
}
95% of the time, anything that doesn't work with a Point in the JS API is due to the spatialreference being wrong. :)
Check that your map's SR (map.spatialreference.wkid) is the same as the point's (4326, as you've defined it here.) You may need to use everyone's favourite function, geographicToWebMercator if the map is using one of its usual Web Mercator coordinate systems.
Edited with details from Tony's comment/answer:
var webMercPoint = esri.geometry.geographicToWebMercator(latLongPoint)
{Missing code here}
map.centerAndZoom(webMercPoint, 15);
Yes! thanks for taking the time to respond. I went down that hole yesterday and tried it with a webMercatorPoint... and viola it worked!
var webMercPoint = esri.geometry.geographicToWebMercator(latLongPoint)
{Missing code here}
map.centerAndZoom(webMercPoint, 15);
Much Appreciated!
I'm new to javascript and to programming itself, I'm trying to add markers in google maps api and load it's coords from mysql, I have everything done but now I got stuck into something, is it possible to create a number of variables based on the number of coords I have ? here is what I have:
function get_values(numero, array)
{
var i;
for(i=0;i<numero;i++)
{
//var i ( HERE: i want it to set variables based on i )= new google.maps.Marker({
position: array[2],
//map: map,
//title:"Hello World!"
});
}
}
It appears what you need to use is an array. This will allow you to store as many coordinates as you want and you'll be able to access them by index (number). For example, if you have 10 coordinates, they could be stored in an array like:
position[i] = array[2]
Your code looks, though, pretty broken, so I think you need more help getting started than what pointed questions on Stack Overflow will get you.
As Gordon says you need an array. If I understand correctly you want to create one marker for each iteration ?
Then I guess something like this would do the trick :
function get_values(numero, array)
{
var i;
var markers = new Array(numero); // create an array to store the markers
for(i=0;i<numero;i++)
{
markers[i] = new google.maps.Marker({
position: array[i],
map: map,
title: "Hello marker " + i // give a different title to each marker based on the number..
});
}
return markers;
}
This assumes that your get_values function takes the number of positions and an array of positions as parameters.