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
Related
I have a quite basic Here Map in an Ionic tap that is loaded in a Ionic tab with this JavaScript.
var platform = new H.service.Platform({
useCIT: true,
'app_id': $(component).data('appid'),
'app_code': $(component).data('appcode'),
useHTTPS: true
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lng: $(component).data('long'),
lat: $(component).data('lat')
}
});
// Enable the event system on the map instance:
var mapEvents = new H.mapevents.MapEvents(map);
// Add event listeners:
map.addEventListener('tap', function(evt) {
// Log 'tap' and 'mouse' events:
console.log(evt.type, evt.currentPointer.type);
When adding this not in tab 1 the map is not showing. I tried and searched for several things but they only are for Google Maps. How can i get this working in the Ionic tabs?
Please try with following code snippet :
function moveMapToBerlin(map){
map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(14);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,{
center: {lat:50, lng:5},
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
window.onload = function () {
moveMapToBerlin(map);
}
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'm trying to add the Leaflet Editable functionality to my current map which map is created by the leaflet directive. I'm getting the L.map instance with:
leafletData.getMap().then(function(map) {
// where map is the Leaflet map instance
}
However the Leaflet editable needs to set editable: true when the map is created.
So, is there a way to create a L.map instance
var map = L.map('map', {editable: true});
and then attach it to the Leaflet angular directive?
UPDATE:
I tried to add a hook to Leaflet
L.Map.addInitHook(function () {
this.whenReady(function () {
this.editTools = new L.Editable(this, this.options.editOptions);
console.log('L.map', this);
});
}
It creates the editTools successfully but the
map.editTools.startPolyline();
is still not working
Did you try adding editable: true to your defaults?
angular.extend($scope, {
defaults: {
editable: true
},
center: {
lat: 51.505,
lng: -0.09,
zoom: 8
}
});
<leaflet defaults="defaults" lf-center="center" height="480px" width="640px"></leaflet>
For anyone looking like me to make an existing map editable
var map = L.map('map', {editable: true});
is the same as
var map = L.map('map');
map.editTools = new L.Editable(map);
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
});
}});
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;
}