I'm using Mapbox for a dynamic map on a social website.
I added a satellite toggle button but I can't find any way in the API docs on how to switch from terrain view to satellite view like Google Maps does?
Is it hidden somewhere? I know I have to subscribe and I will but I need to know I can switch from terrain to satellite in realtime without losing my markers, etc.
Let's say I have a simple map:
var initialLocation = [40.97, 64.07];
var initialZoomLevel = 2;
var map = L.mapbox.map('map_container').setView(initialLocation, initialZoomLevel);
How could I switch from terrain to satellite?
Any suggestions?
Thanks!
Its pretty easy to add a satellite view - just not very well documented. A prerequisite though is you must have a paid account (UPDATE: you used to need a paid account - that no longer seems to be the case) and have setup your own map in your account over there with the satellite imagery selected.
var initialLocation = [40.97, 64.07];
var initialZoomLevel = 2;
var map = L.mapbox.map('map_container').setView(initialLocation, initialZoomLevel);
L.control.layers({
"Street": map.tileLayer,
"Satellite": L.mapbox.tileLayer("my satellite imagery map id")
}, null).addTo(map);
This adds a control in the upper right (by default) that allows you to select between the default map and your satellite map.
With MapBox there is no concept of "modes", just different maps each with their own Map ID. So create a map at http://tiles.mapbox.com/newmap based on terrain, then another based on satellite imagery. Switch between them with the second argument to L.mapbox.map (see http://www.mapbox.com/mapbox.js/api/#L.mapbox.map) using their respective IDs.
Related
I'm using Google Maps Javascript Web API. I'm looking to get the current location (GPS coordinates) of the view. Meaning, if I drag the map all the way to England, the function would return the GPS coordinates of the view's center (which would be somewhere in England).
How can it be accomplished? Is there a certain function I can use?
Try getCenter():
let map = new google.maps.Map(document.getElementById('map'), { ... }),
currentLocation = map.getCenter();
Demo
I am trying to make an uber type app with nativescript but I am struggling to find a way to center a position when an app opens just like when you open uber app. I am using google maps API
Thank you
If you're using the nativescript-google-maps-sdk (which I think you are since you also posted the question over there) then you can do this:
// Any value from 2 to 20
mapView.zoom = 15;
// Moves the map
mapView.latitude = lat;
mapView.longitude = lng;
// Places the marker at the point
marker.position = mapsModule.Position.positionFromLatLng(lat, lng);
We're using Google Maps API to show a list of all our clinics on our website and I'm in the process of writing a 'Show all clinics near me' feature. Everything is working fine and I have a circle being drawn on the map using the Google Maps Circle call from the geometry library.
We want to return a list of all clinics that fall within that circle. Our clinics are loaded via a $.get(); call from a separate .js file. I've been messing with the google.maps.geometry.spherical.computeDistanceBetween(pointA, pointB); function to test if each clinic falls within the circle, where pointB is the center of the circle and pointA is the position of the clinic- both of which are being defined via new google.maps.LatLng(clinic.lat, clinic.long));.
ComputeDistanceBetween keeps returning NaN for every clinic. Due to some sensitivity issues I cannot share the exact code I'm working with but I modified a Google Maps API fiddle for marker clustering HERE because we're also using marker clustering and the lat/longs load similarly to ours.
I already checked this post and it didn't work out for me.
You have a typo in your code. locations[x].long doesn't exist, that should be be locations[x].lng
so your function should be:
var mylocation = new google.maps.LatLng(locations[0].lat, locations[0].lng);
console.log(mylocation);
var marker_lat_lng = new google.maps.LatLng(locations[2].lat, locations[2].lng);
console.log(marker_lat_lng);
var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(mylocation, marker_lat_lng);
document.getElementById('feedback').innerHTML = distance_from_location;
proof of concept fiddle
I've been searching for this quite a bit and cannot seem to find it anywhere online.
The background story: I am making a .NET windows forms C# application and I have a couple of listbox items that I want to have the following functionality:
When I click on the listbox item I want the map to go to that location with a pin attached to these longitude and latitude coordinates.Also I would like a certain zoom. I would be very thankful is someone could give some information if this is possible.
It would be great if there would exist functions that do this.
Also I want to add a new function to add a new location, that when I add a pin to the map I get the longitude and latitude coordinates back somehow.
I understand events and all that btw, I just don't know how to use any possible functions, that google maps provides for .NET framework.
Google maps API is browser API (javascript) as #Mr. J pointed out.
There are third party API's that can be used
https://github.com/ericnewton76/gmaps-api-net
GoogleSigned.AssignAllServices(new GoogleSigned(gmapsApiKey));
var map = new StaticMapRequest();
map.Center = new Location("1600 Amphitheatre Parkway Mountain View, CA 94043");
map.Size = new System.Drawing.Size(imgGoogleResult.Width, imgGoogleResult.Height);
map.Zoom = 14;
map.Sensor = false;
Uri imgURI = map.ToUri();
imgGoogleResult.ImageLocation = imgURI.AbsoluteUri;
i have a problem that i want to zoom to place using esri javascript api
i have this class from esriGetStarted javascript
function zoomToPlace(lon, lat, scale) {
mapDeferred.centerAndZoom([lon, lat], scale);
}
i have tried to zoom to place using this html element :
zoom to place
but it never work untill now, please help me how to zoom to place, or may be is there alternative.
You may be having spatial reference issues (first port of call for any error with a mapping engine :) ). My code from an existing project converts the coordinates to web mercator before attempting to zoom to it:
var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(lon, lat));
_map.centerAndZoom(pt, scale);
Not sure if this will help, but there is a Locate Widget in the ESRI API:
require(["esri/dijit/LocateButton"],
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();