Develop Reference

How to avoid having both circles and pins displayed when zooming in Mapbox?

Here's our map
We're working on a map, trying to have different renderings depending on the zoom level.
at low zoom level, display circles
at high zoom level, display map pins with SVG logos inside
Is there any way to have them displayed at the same time at the edge zoom level?
Thanks so much for your help :)
Nothing particular to add there :)

Mapbox GL - Add polygon which does not scale while zooming

Is there a way to add a polygon which stays the same size during the zoom action?
Currently if you add the polygon circle shape within the radius of 10 meters, when you zoom out, the polygon will get smaller which is correct functionality, but is it possible to add that shape which does not scale within the map and keeps the size no matter the zoom value?
From the documentation I cant find anything. If I create the polygon it always keeps scaling. I cant even find a way to resize manually like we can for the circles on zoom action.

You should probably just create a marker where the marker image is a polygon shape.

CSS 2D Transform Matrix decimal place limits

Perhaps this is an unusual way to do things, but I am creating an interactive map that has landmark markers embedded in the actual map image (a colored circle with a number inside of it). The image is in a div that allows you to pan and zoom with you mouse and mousewheel. I am using CSS transforms to accomplish that pan and zoom. This part is working great.
The issue is that I have 90 landmarks on the map that need to be able to have the user click on them and have a tooltip/popup open with more info. I am accomplishing this with an image map and specifying the coordinates. That is all working as well.
However, I want the user to be able to hover over the image map area and have an alternate image display over the top of the main map image to effectively "highlight" the landmark circle on hover. Then I use the same alternate image when they click on the landmark to show a "highlighted" circle for the selected landmark.
I have this working by using a single div for the hover image display, moving it off canvas and then applying a CSS transform to move it into place and show the right background image when the user hovers over the image map area.
This is all working except for one very teeny tiny problem:
I am passing in transform values to the CSS through jQuery and they are being rounded to 3 decimal places when the transform is applied. Here is javascript used to set an example transform.
$(function(){
$('#landmarkHighlightSelected').css({
'transform-origin': '0px 0px 0px',
'transform': 'translate(121.11172485351563px, 335.38427734375000px) scale(1)',
});
});
When I inspect the transform in Chrome dev tools, I see that the translate values have been converted to 3 decimal places (rounding applied). The matrix value is listed as the following:
matrix(1, 0, 0, 1, 112.112, 335.384)
Under "normal" circumstances, this likely wouldn't matter. But the effect that I am getting is that the "highlight" div that is moved into place is "close" to where it should be, but depending on what the results are of the calculation taking into account image pan/zoom values, I will get a "shift" effect and you can see that the "highlight" div is offset ever so slightly from the landmark in the resized/moved map image behind it.
So what I am seeing is that the CSS transforms are limited to 3 decimal places? Is that right? Is there any way to get them to accept more decimal places?
I understand that what I am doing is a bit unorthodox and that by embedding the "off" state landmark markers in the map image, it's allowing the pan and zoom to move the landmark to values that the browser appears not to be able to render.
But I went with this approach because trying to move 90 divs around in the browser allowing pan and zoom in case the user moused over it was causing a huge jerking/dragging/delayed response in the movement because the code was trying to recalculate the positions of all of those divs as the user moved things around.
Any help or insight on this would be SO SO SO appreciated it. I have been getting nowhere on this for over a week and just figured out that it was the 3 decimal place limit causing the rendered div to appear to shift.
Thank you so much,
Jenny

Map image with zoom in and zoom out as well as marker on different position of image

I am having trouble in developing mobile-web application. I want to allow users to upload map as an image of any location and other will tag or add marker on different position of it. I want want this functionality with zoom in and zoom out. I am able to do this without zoom in and zoom out. Can any body help me to achieve this by adding zoom in and zoom out on image with tags.

Have a look here https://github.com/can3p/iviewer/wiki. it is jquery component that you can use and has examples of zooming -in and -out with the coordinates and markers.

Extending the bounds on a Google Map slightly

I am using the map.fitbounds to fit all the markers I have set with in the map viewport, but the markers are right up against the sides of the viewport and I want to zoom out just a little.
I have tried
map.setZoom(map.getZoom() - 1);
but is moves out too much and seems to zoom with the viewport to the top.
Ideally I want to emulate what happens when I scroll the mouse wheel 1 click to zoom out just a little.
You can see the sample file with the issue here.
http://dl.dropbox.com/u/1367679/MapLifeEvents.html
As you can see ideally you want to be out just a little to show the markers at the base.

The zoom levels in google maps are not continuous so you can't adjust the level the way you want.What you can do is create a LatLngBounds object and use it's extend method the markers you have and lastly use the panToBounds method of map to make the map fit your markers.
In the description of this last method you will see the following
Pans the map by the minimum amount necessary to contain the given
LatLngBounds.It makes no guarantee where on the map the bounds
will be, except that as much of the bounds as possible will be
visible. The bounds will be positioned inside the area bounded by
the map type and navigation (pan, zoom, and Street View) controls,
if they are present on the map. If the bounds is larger than the
map, the map will be shifted to include the northwest corner of the
bounds. If the change in the map's position is less than both the
width and height of the map, the transition will be smoothly
animated.
Hope it helps