I am coding a site for a manufacturer with about 80 locations. I want to be able to center the map on the city/state of a location when it comes up in the modal.
I have the following two problems:
The coordinates for each location are not in the current site data
Attempting to use Google's Geolocation service to get the coordinates breaks all the pages
So I need to be able to just use city/state instead of Google's complicated Geoloc JSON/XML functions. Is this a thing? I can't find it anywhere.
var plant_map = new google.maps.Map(document.getElementById('map-plants'), {
// zoom: 5,
minZoom: <?php echo $zoomLevel ?>,
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
mapTypeId: 'terrain',
mapTypeControl: false,
// scaleControl: false,
// disableDefaultUI: true
});
The code above is working fine, as the $latitude and $longitude data are coming from user cookies or input. But is there a way to use city/state to set the "center:" when coordinates are not available?
The alternative is manually getting the Lat/Long for each location to hard code into an array. Thanks!
To answer your question, basically, the center parameter only accepts LatLng or LatLngLiteral.
Since the center parameter is required to be able to instantiate the map, you might want to fetch for your user's location first before you instantiate the map.
After getting your user's location, you could use the detected geographical coordinates to center your map or you may want to check out my answer from this post that demonstrates how to detect user location (using HTML5 Geolocation API), fetches its corresponding city address and sets the map's bounds to the city address' viewport.
I hope this helps!
Related
I'm still a beginner in React, and I'm doing a test project where the user marks a point on the map. The problem is that I am not able to save the value of the latitude and longitude variables.
I need the value of these variables to send in a form later.
As you can see, in console.log() you can see what the latitude and longitude is. What I need is to save this value in a variable to send later.
Here's the code I'm working on StackBlitz: https://stackblitz.com/edit/react-mdhsxj?file=MapContainer.js
Can someone help me? Thank you in advance.
What do you mean by "Later"? Later in the same page load? Later as in another day? For another user?
If you mean, "later in another page load," you need to consider long-term storage options (search for "Web Storage").
If you mean "for another user," you need to look into a database.
If you just want to use it in later in the page load, just do something like:
var latitude = data.latitude;
var longitude = data.longitude;
// ...later
console.log(latitude)
console.log(longitude)
and you can use it "later".
Hi I am new to React and Here maps, I am using Here maps for maps. Currently I am able to show live marker position, I want to show road signs as well.
For that I am constructing a request as specified here documentation
https://image.maps.ls.hereapi.com/mia/1.6/roadsign?apiKey=H6XyiCT0w1t9GgTjqhRXxDMrVj9h78ya3NuxlwM7XUs®ion=USA&category=0&label=I-80&w=100&h=100&f=0
In the documentation , only highways signs are mentioned. Is it possible to query traffic,speed limit signs as well? And the response returns image(PNG) , I am thinking to put that image onto map at specific lat and long position. Is this the right way to do?
The roadsign feature of the Map Image API has a very limited selection of signs and is in maintenance. You will have to create or source these images yourself. Fortunately there are many free icon collections available on the web.
Once you have the images, you can use a MapMarker to place these on the map.
I'm trying to figure out the most lightweight way to collect data for individual mapped polygons from non-technical users. Here's the end vision: users fill out a web form, draw a shape, and then they can easily email their formatted data to me or my colleagues (I know-- the email idea is probably horrifying readers, but I'm working within a lot of restrictive parameters beyond my control. Email is a known quantity.).
Is there a way to strip down something like geojson.io or even just a leaflet map with leaflet.draw and then pass resulting coordinates into text that can be emailed?
Again, my needs are basic. One shape would be mapped at a time. The fewer visual options and controls the better. My audience is largely very non-technical.
It looks like this user was trying to ask the same question, but didn't get far.
Thanks!
A quick proof of concept, adapting code from Leaflet.draw example:
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function(e) {
var layer = e.layer,
popupContent = layer.toGeoJSON ?
JSON.stringify(layer.toGeoJSON()) : "(no data)";
drawnItems.addLayer(layer);
layer.bindPopup(popupContent).openPopup();
});
This converts the drawn item into GeoJSON string, and displays it in a popup bound to the item.
Demo: https://jsfiddle.net/3v7hd2vx/75/
As explained here, you cannot send your geojson data directly but you can let the browser open a mail client with preset data.
var text=JSON.stringify(drawnItems.toGeoJSON());
window.open('mailto:test#example.com?subject=subject&body=' + text);
Here is a full example
I'm following this tutorial and in the last step of this part the author shows a piece of code:
// Get User's actual coordinates based on HTML5 at window load
geolocation.getLocation().then(function(data){
// Set the latitude and longitude equal to the HTML5 coordinates
coords = {lat:data.coords.latitude, long:data.coords.longitude};
// Display coordinates in location textboxes rounded to three decimal points
$scope.formData.longitude = parseFloat(coords.long).toFixed(3);
$scope.formData.latitude = parseFloat(coords.lat).toFixed(3);
// Display message confirming that the coordinates verified.
$scope.formData.htmlverified = "Yep (Thanks for giving us real data!)";
gservice.refresh($scope.formData.latitude, $scope.formData.longitude);
});
When I run his app (which you can check out here) browser asks me if I agree to share my location and - if I do - the map centers and focuses on my real position. But when I deny, the map shows me the center of America (I'm from Europe).
So my question is: Is there a way of centering the map near the users location in case he denies using the real GPS data? For example based on his IP address or host? In that case I don't need an exact location, but e.g. city or country would be nice to have.
If the user denies location in the browser, you don't get anything. There is no "general location" fallback. IP may be the only option for any kind of resolution at that point. I did not see anything in user agent that would provide location. When creating a Google map, you can specify default center for the map at instantiation, which in the tutorial he must have done for America.
EDIT
Using IP, you should be able to find a service that would resolve the IP to a physical region like this:
IP to Location
Then you can send that location to the Google Maps geocoder to get a point you can center the map to like this:
Google Maps Geocoding example
i want to use the GeoLocation watchPosition command, to get location data on a phone. With these coords, I want to draw a route in a google map, which updates with every new coord i get into an array with coords.
any advice how i can achieve this?
thanks in advance.
I'm currently working on creating a map page that does something very similar. I fire off watchPosition and then take the coords from the returned results and pass them into the a DirectionsRenderer object that I call the first time. I take this DirectionsRenderer object and store it in an array. Then with every updated coords, I update the Lat/Lng values in the object with the new coords. This seems to work pretty well.
You can see an example of my code here. The functionality is not perfect, but it works pretty well. See the getUserLocation function for details.