How do I get rid of the navigation bar at the top of Bing Maps? The bar has Road and Automatic selectors as well as Bird's Eye and Aerial selectors.
Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback: function()
{
map = new Microsoft.Maps.Map(document.getElementById('SDKmap'),
{
credentials: 'Your Bing Maps Key',
theme: new Microsoft.Maps.Themes.BingTheme(),
showMapTypeSelector:false
});
}});
Related
I am using mapbox gl js to create some maps. To style the map, I use the following code;
// add a styled map to the contianer id map
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/bogdanvectuel/cjq1fxndm5qr02roa06jcfb61',
});
Above is a public map style from bogdanvectuel. I wanted to changed to my own style but when I change over to a mapbox offered style like the outdoors one, all of a sudden all my skiareas points disappear which is defined as follows;
/** Add ski areas but just the center point as source / dot **/
map.addSource('aa_winter_spoorts_points', {
type: 'vector',
// aa_winter_spoorts_points
url: 'mapbox://username.aa_winter_spoorts_points'
});
/** Add ski areas but just the center point as layer / dot **/
map.addLayer({
'id': 'aa_winter_spoorts_points',
'type': 'symbol', // background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade, sky.
'source': 'aa_winter_spoorts_points',
'source-layer': 'skiareas',
'layout': {
'visibility': 'visible',
'icon-image': 'airfield-11',
'icon-allow-overlap': true
},
});
I cannot understand why that would happen. Any pointers appreciated.
When you use addSource() and addLayer(), you are manually adding the source and layer to the map's style. Changing to a different style after map load essentially starts over from scratch. Using setStyle() will clear the existing style, so anything you added after map load would need to be added again.
One approach may just be to move your addSource() and addLayer() calls to a new function like addCustomSourcesAndLayers(). You could then call that after the first map load, and again after setStyle()
You can see this in action in geojson.io. We allow you to switch to a different style and then re-draw the user-defined layers after the new style loads.
I do not find options to hide / remove profile ui(Traffic, Driving, Walking, Cycling) from the mapbox direction. Is there any options available?
screenshot of profile ui section area. This is the section, I need to hide,Click here to view the profile ui section pic of mapbox directions
The code that i have implemented,
enableMapboxDirection() {
mapboxgl.accessToken = 'pk.eyJ1Ijoid2FsYWEtbWFwIiwiYSI6ImNqN2VuYmluZjBwZ2UzMnBqM20wNnJieWkifQ.2pKH-XbfOZuXzX9pEqGBjw';
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
controls: {
instructions: false,
},
unit: 'metric',
profile: 'driving',
});
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9'
});
map.on('load', function() {
directions.on('route', function(e) {
console.log(e); // Logs the current route shown in the interface.
console.log('Your Destination ',directions.getDestination());
console.log('Your Origin ',directions.getOrigin());
});
});
map.addControl(directions, 'top-left');
}
You can hide the profile UI with the controls.profileSwitcher parameter. This option is added by the mapbox team few days ago.
You can hide the profile UI by adding this:
controls: {
profileSwitcher: false
}
I am using Mapbox GL JS v0.32.1 and I have a geolocation control on my map.
I would like to make it so that the maximum zoom when the user geolocates is 8, so that the map zooms to the user's approximate location, not street location.
According to the documentation there should be a geolocate event available, but this isn't working for me:
var geoLocate = map.addControl(new mapboxgl.GeolocateControl());
geoLocate.on('geolocate', function(e) {
console.log('geolocated');
map.setZoom(8);
})
Geolocating (in Chrome at least) still zooms to the maximum zoom level available, and I don't see a console log message when it happens.
Map#addControl returns Map. The geolocate event is fired on GeolocateControl. The following should work:
var geoLocate = new mapboxgl.GeolocateControl();
map.addControl(geoLocate);
geoLocate.on('geolocate', function(e) {
console.log('geolocated');
map.setZoom(8);
});
Try this way. smooth zoom to your location
var geoLocate = new mapboxgl.GeolocateControl();
map.addControl(geoLocate);
geoLocate.on('geolocate', function(e) {
map.flyTo({
center:[e.coords.longitude, e.coords.latitude],
zoom:16 //set zoom
});
});
I use Bing Maps AJAX Control 7.0 ISDK.
I would like to turn off the street labels in Bird's Eye view.
The question has been asked but for the api 6
I can do it with the navigation bar.
But the navigation bar is off on my map :
showDashboard: false
I don't find any solution on the sdk :
http://www.bingmapsportal.com/isdk/ajaxv7#CreateMapWithViewOptions7
Here is my code :
function handlerEvent()
{
displayAlert('Handler clicked');
}
Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback: function()
{
map = new Microsoft.Maps.Map(document.getElementById('bingMap'),
{
credentials: 'xxxxxxxxxxxxxxxxxxxxxxx',
theme: new Microsoft.Maps.Themes.BingTheme(),
center: new Microsoft.Maps.Location(47.219058,-1.553625),
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
zoom: 16,
showDashboard: false
});
var infoboxOptions = {title:'Text', description:'TextTextText', actions:[{label: 'Click Handler', eventHandler: handlerEvent}]};
map.entities.push(new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions));
}});
Can you help me do that?
Add this option
labelOverlay : Microsoft.Maps.LabelOverlay.hidden
I am showing custom marker with click event on it. It shows information when I clicked but the info window is not showing well. I used some css in it. I also need to customize it further. This map is shown in phonegap app in iPhone (iOS 5). Every other thing working find (including direction, GPS).
I have used google map js v3 API.
I got this output.
How to show correct infoWindow? And customize as my need.
here is the code
function setMap(myLat, myLng){
// Define Marker properties
var image = new google.maps.MarkerImage('images/pick.png',
new google.maps.Size(30, 40),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 9,36.
new google.maps.Point(9, 36)
);
var my_place = new google.maps.LatLng(myLat, myLng);
var myOptions = {
zoom:14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
center: my_place
}
mer_map = new google.maps.Map(document.getElementById("mer_map_canvas"), myOptions);
mer_marker = new google.maps.Marker({
position: my_place,
map: mer_map,
clickable : true,
animation: google.maps.Animation.DROP,
icon: image
});
var contentString = '<div id="mer_map_info" style="border:3px solid red; color:#FFF; background-color:#000;"><p>this is just a test...</p></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(mer_marker, 'click', function(event) {
infowindow.open(mer_map,mer_marker);
});}
Give this a try. I had a similar problem with phonegap and google maps.
#map_canvas img {
max-width: none;
}