The Azure maps blog states Grayscale maps: A dark-gray map style is for users who want to have a darker scale representation of a map.
How can you enable this in the Javascript implementation?
see the code sample at https://codepen.io/azuremaps/pen/WKOQRq. We will have
documentation up soon.
style: "grayscale_dark"
You can set style: "grayscale_dark" when you define the map.
var map = new atlas.Map("map", {
center: mapCenterPosition,
zoom: 15,
style: "grayscale_dark"
});
You can also just create a control on the map that allows you to switch between different modes:
map.addControl(new atlas.control.StyleControl(), { position: "top-right" });
Related
I'm working on a mapbox app and I need to make a dynamic URL to reflect mapbox info like lat, long and zoom level.
ex: /?city=London&zoom=1&lat=30&lng=140. On page load map should be centred and zoomed accordingly. How to read/write page URL?
Just activate the hash : true in the Map initial settings
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [128, 47],
zoom: 16.5,
pitch: 60,
hash: true // just add this
});
It’s not the same param names but you’ll have the same information
Kind of an odd question/hard to find an answer. I'm relatively new to using angularjs and have a problem i'm confused about.
I've set up a google map using http://angular-ui.github.io/angular-google-maps/#!/ and have an issue.
So i have a $scope.homeBase where i am setting a lat & long for the owners 'Home Base', i want to use that location to set the on load map center, & a pin to show the location. So in my mind cool, set the one var and use it in both locations. Wrong.
So this works on load, but every time i pan the map, i guess it re-sets the map center location, which in turn binds to the map marker and sends the marker to the middle of the screen, on every pan.
Is there anyway to have the two not bound? or have separate vars? without them bound?
i thought a simple 'var homebase' would remove binding and not update the var. instead of using scope but it still binds?
This perhaps is a newb question but i appreciate any pointing in proper direction.
Thanks again
here's my code.
// uiGmapGoogleMapApi is a promise, The "then" callback function provides a maps object.
uiGmapGoogleMapApi.then(function() {
// Setting homebase coords, these will come from firebase
$scope.homeBase = { latitude: -34.18405, longitude: 150.71319 };
// Set default map.
$scope.map = {
center: $scope.homeBase,
pan: true,
zoom: 14,
events: {
click: function(){
}
}
};
// Set homebase marker.
$scope.homebaseMarker = {
id: 0,
coords: $scope.homeBase,
options: { draggable: false },
};
});
I was able to set the center on page load via
angular.copy(var)
Preamble
I'm using Angular Google Maps to indicate the location of different buildings across a campus. My initilization goes as follows:
$scope.map = {
control: {},
center:
{
latitude: $scope.Item.Latitude,
longitude: $scope.Item.Longitude
},
zoom: 16,
options: {
streetViewControl: true,
maxZoom: 20,
minZoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
},
showTraffic: true,
showBicycling: true,
events: {
blacklist: ['drag', 'dragend', 'dragstart', 'center_changed']
}
};
That works flawlessly for the following visualization:
However, I just noticed that there is 3D data available for the region, and I would like to have it renderized as such:
Question
Is it possible, via Angular Google Maps, to configure my initialization in such a way as to show the map as indicated?
Bonus Question
...would it be possible to programatically have the 'camera' spin around the marker (or the center)?
This is the Map link for the reference images:
https://www.google.com/maps/#40.9570608,-76.8816097,179a,20y,180h,41.69t/data=!3m1!1e3
The best you can get with the Google Maps Javascript API is the 45° imagery.
Not like the 3D map visualization, 45° imagery only has:
1) the 45° tile...
2) 4 angels (0, 90, 180, 270)
3) only has SATELLITE mode. (Road names and other maps elements isn't shown even the maps is in HYBRID)
4) it is not available everywhere over the globe. (for example, 40.9570608,-76.8816097)
Look at this example for more information.
http://jsfiddle.net/u1qcf892/
There is a working example in leaflet site for adding WMS Layer in leaflet map at :
http://leafletjs.com/reference.html#tilelayer-wms. But I don't see methods to provide the filter for bounding box.
Is there a way to provide bounding box filters for Leaflet WMS ?
Just add bbox: [-180,-90,180,90] to the L.tileLayer.wms options.
Example:
var layer_SOEST_SurfaceTemp = L.tileLayer.wms("http://...............", {
layers: 'tmpsfc',
format: 'image/png',
transparent: true,
opacity: 0.5,
crs: L.CRS.EPSG4326,
bbox: [-180,-90,180,90],
styles: 'boxfill/alg',
attribution: "SOEST Hawaii",
time : forecast_datetime,
version : '1.3.0'
});
Just add the desired parameters to your L.tileLayer.wms options even if not shown in the API... Thoses parameters will be passed anyway to your map server and if this server support bbox or any others parameters provided it will return you the correct tiles...
You can use the option bounds to filter.
If set, tiles will only be loaded inside the set LatLngBounds.
L.TileLayer and L.TileLayer.WMS are both extending L.GridLayer, so the same options can used: https://leafletjs.com/reference-1.7.1.html#gridlayer-bounds
var nexrad = L.tileLayer.wms("URL.COM", {
layers: 'LAYER_NAME',
format: 'image/png',
transparent: true,
attribution: "Weather data © 2012 IEM Nexrad",
bounds: L.latLngBounds([[1,0],[0,1]])
});
I have a GMap2 object with a GOverviewMapControl and a GAdsManager, but they both appear in the lower right hand corner.
How can I get them to appear in different parts of the map?
Here's my Overview:
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
here's my Ads
var adsManagerOptions = {
maxAdsOnMap: 2,
style: 'adunit',
channel: 'XXXXXXXXX'
};
adsManager = new GAdsManager(map, publisherID, adsManagerOptions);
adsManager.enable();
The position property of the GAdsManagerOptions class will allow you to set the position of the GAdsManager. The options are passed in to the GAdsManager constructor.
Unfortunately, the GOverviewMapControl is not as flexible. According to the documentation, "Unlike other controls, you can only place this control in the bottom right corner of the map (G_ANCHOR_BOTTOM_RIGHT)."
I have no way to test this at the moment, but your options will probably look something like:
var adsManagerOptions = {
maxAdsOnMap: 2,
style: 'adunit',
channel: 'XXXXXXXXX',
position: new GControlPosition(G_ANCHOR_BOTTOM_LEFT)
};