I am displaying map infobox when I click on a pushpin in Bing V8 maps. The infobox moves out of the map boundary(cropped) when pushpin is near edges of map boundary. Is there any inherent way of solving it or we have to perform the tedious task of repositioning infobox or the map itself in order to show complete infobox.
There are two options:
Move the map when a user clicks on the pushpin and then display the infobox, often users will center the map on the clicked pushpin (ideal for mobile solutions).
When loading the map, add the following map option; allowInfoboxOverflow: true This will allow the infobox to appear outside the map edges and overflow. This is better suited in non-mobile apps.
Related
I'm trying to migrate my app from Bing maps to Azure maps.
I'm adding a few custom pushpins on my map using the SymbolLayer.
When I try to zoom in or out though, my pushpins are getting displaced while my map stays static. What might be the issue?
I suspect the issue is that your anchor point of your icon does not align with the point on the icon image you want. You can adjust this in a couple of ways.
Use the icon options anchor setting. Good for most standard icon images.
Use the icon options offset setting. Good for fine tuning.
For example, if the point on your image that you want to "anchor" to the coordinates on the map is the bottom left corner of the image, you could do the following:
var layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
anchor: 'bottom-left'
}
});
Here is a sample to experiment with: https://azuremapscodesamples.azurewebsites.net/?sample=Symbol%20Layer%20Options
Here are the docs on the icon options for a symbol layer: https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.iconoptions?view=azure-maps-typescript-latest
I have a map that covers the entire screen and I have a layer that overlays the map. That layer goes from bottom to top.
the user interacts with this layer by clicking on different options and these options draw markers on the map.
When I centralize the map, the markers are hidden behind the layer that superimposes the map, thus eliminating the visibility of the marker.
How could I centralize the map and then move it one third above the layer?
This question is a remake of
How can I change the location center of a map using Leaflet API?
Try doing it this way
var offset = map.getSize().y * 0.15;
map.panBy(new L.Point(0, -offset), {animate: false});
But every time I click on an option in the layer to create a marker, the map moves and I lose the center.
jsfiddle
Excuse the example image
The idea is that after the map makes the setView place its center above the blue layer that superimposes the map so as not to hide the markers.
I have a mapbox project that I need to be able to re-center the map when a popup closes. Right now, clicking a marker will pan the map and after the user closes the popup they are left with the map panned over to the new location. I simply need the map to recenter to the original location I set as my map center.
I've not found a method using the mapbox api so I don't have any code to start. I'm more looking for someone who might have experience with such a configuration.
Since mapbox.js is built on top of leaflet you can use the Leaflet API.
You can listen for popupclose events. Then you can call map.setView() and center the map at the original position.
Here is a working example
I have a main map landing page of the U.S. which shows my map and all the pins on it, then there are individual pages for each state with specific content related to them, that also show the map. I am wondering if it is possible to have the map zoom into the states location when that url is clicked. e.g. When you click to go to the Colorado page, the map zooms and centers on Colorado, instead of going to the default view on the main map landing page.
It would work like the geocoder, if you type Colorado, it zoom and centers on the state.
The initially position map with geocode example is probably close to what you're looking for.
I have a Map on my Windows Store app that adds multiple pushpins.
Is there any way to have the map control "MapVew/ZoomLevel" automatically adjust to always zoom to a level where all the pushpins are visible?
Thanks in advance.
/Eric
Should be pretty easy to do:
Get a LocationRect from your list of Pushpin coordinates
Call SetView on your map and pass it the LocationRect
Redo step 1 & 2 each time your collection of visible Pushpins change.