I am trying to create a map of user-inputted locations, however to do this I need to convert inputted cities into their latitude and longitude. This allows me to easily plot them using Leaflet.js using L.marker(point).addTo(map)
Given the input of say "London" is there a way using the OpenStreetMap API to fetch these values?
here are very few API tools available that will do this task (from my research) without the need for an API key.
I want to avoid using the google maps API if possible and would appreciate any help, whether it be API recommendations or OpenStreetMap ideas, as I am relatively new to javascript.
Thanks in advance!
As recommended in the comments, the solution was to use nomination, in particular, their search queries.
I ended up using jQuery's getJson function to fetch the data from the API as follows.
$(function () {
geocoding = function (city, country) {
var url = `https://nominatim.openstreetmap.org/search?city=${city}&country=${country}&format=json`
$.getJSON(url, function (data) {
//data is the JSON string
lat = data[0].lat
lon = data[0].lon
...
});
}
})
Related
I have a list of store addresses, and I'm trying to create a map out of it.
Using the Places API I am able to retrieve most of the informations and manually create and place the markers on the map:
const service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery({
query: '212 Enterprise Dr, Rockaway, Frank Pizza',
fields: ['all']
}, onPlaceFound);
However I'd like to select the original marker instead of overlapping a new one.
That is because I want the user to be able to open the default info window with store phone number, directions and stuff.
I know that I can re-create it, but it feels kinda lame since all the info is already there.
This SO post ask about the same, yet no solution has been found.
Based on the documentation found here, which shows findPlaceFromQuery(), the second parameter of findPlaceFromQuery should be a function where the first argument of that function is an Array of placeResults.
Therefore, after reviewing a link here and here your onPlaceFound function should be looking something like:
function onPlaceFound(placeResultsArray){
const firstResult = placeResultsArray[0], firstIconURL = firstResult.icon;
const latLng = firstResult.geometry.location, lat = latLng.lat(), lng = latLng.lng();
// do stuff with those variables here
}
Of course, that does not select Google's result as a Marker, but now you have the actual icon, and latitude and longitude.
I'm trying to pull lat and long data from a Parse database to create markers onto a map. The data is stored in a Parse database and I'm using Google Maps JS api v.3
My current code for connecting to Parse is not working;
//Load Markers from Parse, Check (Do we need to create a connection string)
$.get("parse-connect.js", function (data) {
$(data).find("marker").each(function () {
//Get user input values for the marker from the form
var address = '<p>'+ $(this).attr('address') +'</p>';
var type = $(this).attr('type');
var point = new google.maps.LatLng(parseFloat($(this).attr('latitude')),parseFloat($(this).attr('longitude')));
//call create_marker() function for xml loaded maker
create_marker(point, name, address, false, false, false, "../img/map-marker-2.png");
});
});
"parse-connect.js" simply calls the Parse application ID and JS api key to connect.
If anyone has any suggestions or on-line tutorials that could help my Id be very grateful.
The database has a simple structure with 4 fields - objectID, address, lat, long, image.
I gave a look to instafeed.js. It works good right away, I followed the first docs and got a 20 images sample displaying at web page.
However I really need to obtain pictures from a certain place (city, in my case). Working with Twitter API I used to look for the WOEID for the wanted place. Here it seems to be quite similar.
I read Instagram docs:
DISTANCE Default is 1000m (distance=1000), max distance is 5000.
FACEBOOK_PLACES_ID Returns a location mapped off of a Facebook places id. If used, a Foursquare id and lat, lng are not required.
FOURSQUARE_ID Returns a location mapped off of a foursquare v1 api location id. If used, you are not required to use lat and lng. Note that this method is deprecated; you should use the new foursquare IDs with V2 of their API.
LAT Latitude of the center search coordinate. If used, lng is required.
LNG Longitude of the center search coordinate. If used, lat is required.
FOURSQUARE_V2_ID Returns a location mapped off of a foursquare v2 api location id. If used, you are not required to use lat and lng.
But where the hell can I obtain such ID's for a city. Let's say I want pictures tagged with dinner at Puebla, Mexico. What should I do.
I used this nice site to get an ID from my coordinates: http://maihamakyo.org/etc/locastagram/index.php
Tried this Java Script code then:
var feed = new Instafeed({
get: 'tagged',
location: '46016173',
tagName: 'CLEU',
clientId: '***'
})
feed.run();
but got not the expected result.
As of version 1.3, you can add a filter function to Instafeed.js, to exclude images from the results.
So you should be able to set get: "location", and your locationId, and then filter out any images that don't contain the tag you're looking for:
var feed = new Instafeed({
get: 'location',
locationId: LOC_ID,
// other settings omitted for example
filter: function(image) {
return image.tags.indexOf('TAG_NAME') >= 0;
}
});
feed.run();
Update
The image parameter that gets passed to the filter function is the image data straight from Instagram's API. So you can filter on any criteria you want. Just make sure the function returns true or false:
filter: function(image) {
if (image.tags.indexOf('TAG_NAME') >= 0 && image.filter === "Normal") {
return true;
}
return false;
}
To get an idea of what properties that image object has, check this thread on GitHub.
Looking at the instafeed.js documentation, the option name/key for location should be locationId.
I'm not familiar with the Instagram API, but the instafeed.js documentation hints heavily that get needs to be set to location to use a location ID. So it is very possible you can only search for a tag, or a location, but not both.
Has anyone noticed that google maps geocoding have changed the variable name of the lat and lng from, Qa and Ra to Pa and Qa.
Does anyone know a reason for this?
Edit: If you're using the Google Maps Geocoding Service, as #hamczu suggests, then you should be getting the results like this:
{
... snip ...
geometry: {
location: LatLng,
... snip ...
}
}
It sounds like you're not using the API methods for the LatLng object, but are instead trying to use its undocumented properties. Your question demonstrates one of the best reasons why this is a Bad Idea - the Google code is compressed and obfuscated, using short, arbitrary variable and property names, and Google may recompress its code at any time, arbitrarily changing these names. What it won't change is the function and attribute names in the published API - that's the whole point of having an API to begin with, and the reason why developers should code against the API, not the "undocumented features" of the currently available code.
So the best approach is to use the documented methods:
var lat = result.geometry.location.lat();
var lng = result.geometry.location.lng();
Otherwise, your code will likely break every time Google recompresses its code.
I would like to know how I can get the country name from latitude & longitude using JavaScript. I am open to use of Google Maps’ JavaScript API. Can I also get city and zip?
Edit: My aim is to fill up the address field automatically, not to display it on a map.
I don't know if it works with google maps, but there is a web service that returns a country code and takes as parameters the lat and long.
Here is an example:
http://api.geonames.org/countryCodeJSON?lat=49.03&lng=10.2&username=demo
Returns a JSON data:
{"languages":"de","distance":"0","countryCode":"DE","countryName":"Germany"}
I also found a little description:
The iso country code of any given point.
Webservice Type: REST
Url: ws.geonames.org/countryCode?
Parameters: lat, lng, type, lang, radius (buffer in km for closest country in coastal areas)
Result: returns the iso country code for the given latitude/longitude
With the parameter type=xml this service returns an xml document with iso country code and country name. The optional parameter lang can be used to specify the language the country name should be in. JSON output is produced with type=JSON
See the docs
Edit: Please note that demo is just a demonstration user and you should create a user account at http://www.geonames.org/login in order to use the service.
Google Geocoding API provides these results in JSON format. It has a free tier but you will need to pay for unlimited requests to the API.
The API link to the request will look like this:
'https://maps.googleapis.com/maps/api/geocode/json?latlng=11.2742848,75.8013801&key=YOUR_API_KEY_HERE'
If a self-contained library (i.e. no server / internet connection, and fast) is desirable, and only country information is required, the following library based on openstreetmap data can be useful - https://github.com/hlaw/codegrid-js
<script type="text/javascript" src="[path]/codegrid.js"></script>
grid = codegrid.CodeGrid(); // initialize
grid.getCode (lat, lng, function (err, code) { ... });
The callback is called with code, the country code for the latlng.
<form id="form1" runat="server">
<div>
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js" ></script>
<br />Country Code:
<script type="text/javascript">document.write(geoip_country_code());</script>
<br />Country Name:
<script type="text/javascript">document.write(geoip_country_name());</script>
<br />City:
<script type="text/javascript">document.write(geoip_city());</script>
<br />Region:
<script type="text/javascript">document.write(geoip_region());</script>
<br />Region Name:
<script type="text/javascript">document.write(geoip_region_name());</script>
<br />Latitude:
<script type="text/javascript">document.write(geoip_latitude());</script>
<br />Longitude:
<script type="text/javascript">document.write(geoip_longitude());</script>
<br />Postal Code:
<script type="text/javascript">document.write(geoip_postal_code());</script>
</div>
</form>
Yes, you can use google maps to find the country for given latitudes and longitudes. Use the reverse geocoding service.
You can get the country, city, zip code and the complete address from the response you get from the server. Check the example from the link for details ;)
If you are using golang you can use one of these 2 libraries to get the country and you don't need to even need make an api call as the data set is inbuilt so its unlimited.
https://github.com/SocialHarvest/geobed
https://github.com/bradfitz/latlong
You can do it with: https://www.weatherapi.com/ its FREE.
My demo is in React and step by step, but you can do it in any way you want, the key is this Weather API, that accepts LON and LAT as a string to produce city and weather info ->
https://api.weatherapi.com/v1/forecast.json?key=YOUR-KEY&q=LATITUDE,LONGITUDE&days=1&aqi=no&alerts=n
Note: you will to generate YOUR OWN KEY, by signing up
You will need 4 states for this:
const [userAllowedLocation, setUserAllowedLocation] = useState(true);
const [latitude, setLatitude] = useState("");
const [longitude, setLongitude] = useState("");
const [city, setCity] = useState("");
get Lat and Lon + pop up
First: Request access to 'location' from user (this will have a POP-UP), by using this code and set state to Latitude and Longitude.
useEffect(() => {
function getPosition() {
const successCallback = (position) => {
console.log(position);
setLatitude(position.coords.latitude);
setLongitude(position.coords.longitude);
setUserAllowedLocation(true);
};
const errorCallback = (error) => {
setUserAllowedLocation(false);
console.log(error);
};
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
}
getPosition();
}, []);
Fetch City / Country based on Lat & Lon:
Second use https://www.weatherapi.com/ API to get City and other intel, based on Lat and Lon
API looks like this: https://api.weatherapi.com/v1/forecast.json?key=3e5e13fac8354c818de152831211305&q=53.3498053,-6.2603097&days=1&aqi=no&alerts=n
API with explanation: https://api.weatherapi.com/v1/forecast.json?key=3e5e13fac8354c818de152831211305&q=LATITUDE,LONGITUDE&days=1&aqi=no&alerts=n
Now call this API with latitude and longitude to get location data, including city. I am using useEffect as a trigger, so as soon as I get info on Latitude I call the api using axios and set City state to what ever comes out of the api object.
useEffect(() => {
if (latitude === "" || longitude === "") { // this is to stop fetching data on component mount, cause we have no Latitude and Longitude YET
return;
}
async function getWeather() {
let res = await axios.get(
`https://api.weatherapi.com/v1/forecast.json?key=3e5e13fac8354c818de152831211305&q=${latitude},${longitude}&days=1&aqi=no&alerts=no`
);
console.log(res.data);
console.log(res.data.location.name);
setCity(res.data.location.name);
}
getWeather();
}, [latitude, longitude]);
Here is video to my youtube channel, where you can see a demo of this: https://youtu.be/gxcG8V3Fpbk
RESULT from API:
"location": {
"name": "Dublin",
"region": "Dublin",
"country": "Ireland",
"lat": 53.35,
"lon": -6.26,
"tz_id": "Europe/Dublin",
"localtime_epoch": 1673737376,
"localtime": "2023-01-14 23:02"
},
In case you only need the country information based on coords (lat, lng), you can use the coordinate_to_country npm package. This way you don't need to make any API. It is based on OSM country boundaries.
Otherwise, if you need more location information (city, address, neighbourhood etc.) you can explore various geocoding API's such as:
OSM - Nominatim
Mapbox Geocoding
Google Maps Geocoding
OpenCage Geocoding