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
Related
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)
Ok, so I'm having to use Bing Maps for a client, and I'm having issues with default pushpins.
When I add pushpins and set enableHoverStyle = true, it appears that the pushpin is below the mouseover area by 1.5 times the height of the pushpin.
So when the map renders and pins are added, the pushpin doesn't display the hover state unless the mouse is fairly high above the pin.
Here's an image of the issue: http://imgur.com/a/fzT54
Is there any way to get the hover area to accurately position over the pin?
I'm not able to reproduce this behavior. Can you try the following sample and see if it reproduces for you there: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#setPushpinOptions+JS
If it doesn't then there is likely something in your application causing an issue. Could you provide a small sample that reproduces your issue.
I try to repeat a marker at the same coordinates when I am moving the map to infinity, in the same way that layers.
example : https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/
Has anyone found how to do that please?
If it's not possible, conversely is it possible to not repeat layers when you moving the map ?
Thank you
The Link example you provided is not using Markers to render the shaded area. It is using a feature, in this case a polygon, included in a layer (a layer can have many features).
In MapBox the rendered map is made up of any number of layers (including the tile data) which is rendered whenever you scroll or drag to a particular area of the map. For example as you keep dragging to the right in the map it will just keep rendering in the relevant layers and tiles.
The Marker functionality has a different purpose which is as a one off selected point which is useful for a user click or hover interaction.
I am using mapbox and featureGroup control.
World map is repeating horizontally.How can I prevent horizontal repeating of world map.
I have tried 'no-wrap:true' ,but this seems to work only for tile layer.
For featureGroup,Please suggest some way.
var map = L.mapbox.map(mapData, MapBoxAccess.mapBoxAccess.accessId);
var featureGroup = L.featureGroup().addTo($scope.map);
I am adding my polygons and polylines on featureGroup
Please find attached image for better understanding.
That actually is the intended behavior and features cannot repeat across the globe like this. If you wanted to prevent scrolling across the globe, you can set bounds over the map so that someone can't scroll or pan side to side. Also, there is a Leaflet method called WorldCopyJump which will also bounce the view back to the bounds.
I am getting started on mapbox studio. I want to be able to change the background image based on the zoom level - so far default way to set image is:
Map {
background-color: #land;
background-image:url(pattern/3.png)
}
I have tried adding zoom level conditions as follow.
Map {
background-color: #land;
[zoom>=5] {background-image:url(pattern/2.jpg);}
[zoom<=5] { background-image:url(pattern/3.png);}
}
appreciate if you can share any tips or point to resource and methods I can read.
Cheers :)
Properties in the Map object are global properties that cannot be filtered or changed by zoom level. In order to have different backgrounds at different zoom levels you will need to create a custom polygon layer to act as your background, but with more flexible styling. You would use polygon-pattern-file on this layer instead of background-image.
See the source quickstart tutorial for info about creating a custom source layer and adding it to your style project. You can use the 'bounding box' file from Natural Earth for this; it is a single polygon that covers the entire map.