Hey I have a mapbox map(GL) inside a div. The issue i am facing is that, the map is not centered.
NOTE: My marker also has the same coordinates as the center coordinates.
But as soon as i zoom in or zoom out the entire window, or if i restore down the window , or if i do inspect screen and half the window, the map will be automatically centered
Things to note :
The container holding the map is set to display none on page load, and set to display "block" later.
I have tired doing map.resize(), and also i have tried doing a setinterval on map.resize() ,but of no success.
i have tried changing the css position of the map container to relative, absolute etc, but of no success.
if you look carefully in the first picture there is no mapbox logo writing in the bottom left hand corner. Does that mean that the screen is cut off?
And plus while using the mouse wheel scroll to zoom in , the zoom goes away from the center to the left side of the map :(
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/.......',
center: [116.0588, -33.8487],
zoom: 9
});
map.resize() // have tried map.resize() after map.onload as well
Thank you so much for your time. Any help is appreciated.
Related
I have this mapbox inside on a container which is centered aligned. The thing is whenever I press to show the map, it will show upper left corner of the screen and when I turned off and turn on the screen, the map will eventually out of something put it self at the right position where I wanted to.
Before turning the phone screen off
After turning the phone screen on
google_maps_flutter, how not to start image from bottom?
By default, the marker appears directly above the coordinates,(LatLng) so it seems like Google has made it this way, but I am currently making a custom marker and I want this position to be in the center, not directly above the coordinates. It's probably related to the render object key, but I want to edit it myself. On which page can I edit it?
Does anybody knows this issue??
(If that coordinate is a point. Make sure the dot is in the middle of the marker, not the bottom of the marker.)
I think this is the similar issue
How to center the camera so that marker is at the bottom of screen? (Google map api V2 Android)
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 am making a Unity app for Android and iOS and have a requirement to show map in a kind of frame.
For Showing map I am using Mapbox unity assets.
So I tried creating a parent game object and make the map child of it padding on all sides but when I run the scene map still loads fullscreen with no padding at all. I tried changing the camera extent option of the abstract map class but the results were not good and when zoom in the map it actually goes out of bounds of my frame.
I also noticed that when I zoom in and out it actually changes the z axis position to do the same.
So I want to ask how to keep the width and height of the map fixed and make it zoom in and out in that particular area.
Below is the attached image of how I want to style the map.
yes sure !
first you watch video :
https://www.youtube.com/watch?v=28JTTXqMvOU
Then I'll explain if you have a problem !
I was trying Leaflet, the display looks like Google Maps, but I find a lot of ways cannot meet my requirements. Is there any way in the web, the phone shows the following?
Bad display:
The first time it is entered, it can be dragged to the outside of the screen.
Good display:
The first time it enters it is highly full-screen and cannot be dragged.
Have a look at the Leaflet documentation for initialising the map. You can pass several options that will do what you want:
var world = new L.LatLngBounds([[90,-180],[-90,180]]);
var map = L.map('map', {
minZoom:2,
maxBounds: world,
maxBoundsViscosity: 1,
}).setView([0,0], 0);
Setting minZoom stops users being able to zoom out so far that the top and bottom of the map are both visible (and overrides the zoom value passed to setView()). You may need to calculate an appropriate value based on the height of the screen, and how much of the world it is useful to display in your application. On its own, this still lets users pan off the edge of the map.
Setting maxBounds limits the view to a specific set of coordinates (the whole world in the example above). You also have to set maxBoundsViscosity to stop users being able to pan the map beyond these limits.
If you really don't want users to be able to pan the map at all, you can also set dragging: false. This still lets you pan the map using the .panTo() method.