Bing Maps Pushpins and Info Box - bing-maps

I had a problem in bing maps, any one solve my issue.
On my bing maps I had lot's of pushpins, some are very closer to each other. So, when I click on one pushpin, respective Infobox is opened, but closer pushpins are displayed on the Infobox opened. Those need to be hidden below that opened Infobox.
So,please help me to hide the inactive pushpins beside infobox

I know exactly what your issue is. In bing Maps V7 the infobox entity is considered as just another entity like a pushpin, polygon, poliline... This is to make it more flexiable.That said, in most cases you want your infobox to always appear above your shapes. This can easily be done by using two entity collections. The bottom one for your shapes/pushpins and the top one for your infoboxes. I have a blog post demonstrating this here: http://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/

Related

Is it possible to show a cardinal direction button in the navigation bar of Bing Maps v8?

The navigation bar of v7 offers among others a cardinal direction button (see screenshot below). Does this option exist in v8?
V8 does not provide such buttons, however you can easily create this for your app if you want. Here is a code sample: http://bingmapsv8samples.azurewebsites.net/#CustomOverlay_BasicOverlay
This sample uses a custom overlay for the buttons, but you could easily use HTML in a div and just float it above the map. That would take less code since you would create the buttons using HTML rather than JavaScript.

Application Menu on top of Leaflet map

In a map application based on Leaflet, I would like to have a large application menu, kind of a settings menu. I managed to put a nice button into the top right corner as a L.Control and it gets fired on a click.
The menu should position either to the left of the menu button or simply in the middle of the screen.
I am wondering whether it is best practice to use
a Popup,
a Layer,
another Control or
just position a at the right place on the page.
Trying the latter, I found that I have to set z-index to a very high value to see it, and it feels a bit odd not to use the Leafleat features.
What would be the "right" solution to use with Leaflet?
If you want a full screen map, you can use https://github.com/Turbo87/leaflet-sidebar
I use it here: http://franceimage.github.io/map
You can create a nice customized icons based toolbar using Leaflet easybutton plugin.
You will have all the leaflet based controls (Click, hover, position etc.) to set that up as per your requirements.
Here are the implementation examples:
http://danielmontague.com/projects/easyButton.js/v1/examples/
and github repo: https://github.com/CliffCloud/Leaflet.EasyButton

Bing Maps Ajax v7 Directions Module incorrectly sets bounds when map layer is hidden

I have a relatively simple web app, that allows the user to enter two waypoints (from and to locations), then click a button to get the directions itinerary and a map with the route path plotted on the map.
The app was laid out so that the form, the itinerary and the map where in separate "tabs" and the layers could be shown and hidden based on the tab selection.
Oddly, the map would always be zoomed right out to the minimum zoom (entire world view) although the pushpins (waypoints) and route path were correctly plotted, the map bounds were not being honored. If the map was visible, then those route path bounds were honored and the map functioned as expected.
An example of this is here: http://jsfiddle.net/junto/DMR2T/
Click on 'Get Directions' when the map is visible, and the map is zoomed to the correct bounds. Then toggle the map and click 'Get Directions' again. Toggle the map back to visible. You'll see the map has the incorrect zoom level and bounds.
Lastest build of Google Chrome, Safari, Firefox all display this issue. Internet Explorer does not.
Is this a bug?
My guess is that in order to properly compute zooming and bounds, the map needs to know its display size. In order for the map to know that, it needs to be visible. So a workaround would be to move the map off screen rather than hiding it.
See my updated example here: http://jsfiddle.net/ZWzjC/
In my example I simply set a negative left margin, I'm sure there are more clever ways to move something off the screen while maintaining its visibility. I tried using visibility:hidden but that doesn't seem to hide the map correctly. display:none won't work since that causes the map to have 0 dimensions, and that's what .toggle() probably uses internally anyway.

How to label pushpins in bing maps?

Can any one tell me how to label pushpins in Bing maps for points of int interest? AM able to place multiple pushpins but unable to add labels to them dynamically.
Are you using the v7 maps control and APIs?
Check out the Infobox class and adding Infobox entities - these allow you to add a custom HTML block that can contain your label info. See http://msdn.microsoft.com/en-us/library/gg675208.aspx.
Alternatively with a pushpin you can specify the text field in the PushpinOptions object (http://msdn.microsoft.com/en-us/library/gg427629.aspx) when creating a pushpin.
pin.setOptions({text: "label"});
If you're using 7, try this little hack:
pinLayer.push(pinX);
pin1.cm1001_er_etr.dom.setAttribute('title', 'Push Pin Title');
This is an unpublished DOM. And keep in mind if MS decides to change it, you'll have to find a different solution.

How to disable Bird's eye angled view in Bing Maps control version 7

For business use Microsoft charge extra for use of the Bing Maps birds eye angled view, so my client has ask that I disable this option. In verion 6.3 of the control this was easy, there is a map option that can be used to do this: enter link description here
However, I can't find how to do this using the API with version 7 of the control. The current menu has Birds eye as an option with check boxes show labels and show angled view. Ideally I'd like to disable the option from the menu so that users are only able to view road and aerial views. So it looks like I have two options available:-
1) Hide the show angled view check box somehow with css. The issue here is that I can't get to the HTML content using the IE developer toolbar of firebug as it only displays when selected.
2) Attach to the map maptypechanged event and if birds eye map selected set it back to the map type it used to be.
Both of the above are far from ideal. Does anyone have a suggestion for the best way of doing this?
Sample code:
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
{
credentials: 'Your Bing Maps Key',
disableBirdseye:true
});
here are some working examples from the iSDK:
http://www.bingmapsportal.com/isdk/ajaxv7#CreateMapWithMapOptions14
API Reference:
And here is the MSDN:
http://msdn.microsoft.com/en-us/library/gg427603.aspx
disableBirdseye
boolean
A boolean indicating whether to disable the bird’s eye map type. The default value is false. If this property is set to true, bird’s eye will be removed from the map navigation control and the birdseyeMapTypeId is disabled. Additionally, the auto map type will only display road or aerial.
This property can only be set when using the Map constructor.
You're correct in stating that there is no way currently using the v7 API to disable individual map styles. A possible Option #3 which is less hackish, but requires a bit more work, is to set the showMapTypeSelector property of the MapOptions to false, which would have the effect of hiding the entire map style selection dropdown. Then create your own custom navigation menu that only includes links to those styles you want to allow the user to choose.