Home/ Questions/Q 9021893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T05:21:58+00:00

I have a few map markers that are located all over the place and

  • 0

I have a few map markers that are located all over the place and I want to auto zoom to show them all.

The code I have should work fine but sometimes (seems to depend whereabouts the map markers are) it doesn’t always zoom correctly to show the markers.

Here’s a fiddle (with example markers to show the problem): http://jsfiddle.net/amnesia7/9YUVe/embedded/result/ using the following marker locations:

// Add markers to the map for each location
addMarker(1, "Hello 1", [-18,178.333]);
addMarker(2, "Hello 2", [-18.5,180]);
addMarker(3, "Hello 3", [-18.5,-178.333]);

The auto-zoom has gone completely wrong and seems to be zoomed in on the sea somewhere.

Looks to be a bug to me because it seems to depend on whereabouts the map markers are as to whether it zoom correctly or not.

UPDATE

I’ve created, what I hope will be, a simpler version using the HERE developer demo for “Zoom to a set of markers”

http://jsfiddle.net/amnesia7/uhZVz/

You need to zoom the map out to see the markers that should be in view by default.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like a bug to me too, and only occurs when markers cluster around the 180th line of longitude.
    Seems that the zoomTo() calculation is incorrect in this case, only taking in to account the last marker since it is on the “wrong” side of the international date line.

    Anyway, getWidth() on the viewport does seem to work, so you could hack in your own zoomTo() function as shown in the kludge below.

    Also note the use of kml=auto&map=js-p2d-dom when loading the library – this uses the DOM implementation rather than the canvas implementation this properly shows markers on both sides of the 180th line of longitude.

    <!DOCTYPE HTML SYSTEM>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />

        <style type="text/css">

            html {
                overflow:hidden;
            }

            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
                width: 100%;
                height: 100%;
                position: absolute;
            }

            #mapContainer {
                width:100%;
                height: 100%;
                left: 0;
                top: 0;
                position: absolute;
            }

 </style>
   <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?kml=auto&map=js-p2d-dom"></script>
    </head>
    <body>
        <div id="mapContainer"></div>

    <script type="text/javascript">
 /*    Set authentication token and appid
*    WARNING: this is a demo-only key
*    please register on http://api.developer.nokia.com/
*    and obtain your own developer's API key
*/
nokia.Settings.set("appId", "APP_ID");
nokia.Settings.set("authenticationToken", "TOKEN");


// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
    // initial center and zoom level of the map
    center: [52.51, 13.4],
    zoomLevel: 13,
    components: [
        // We add the behavior component to allow panning / zooming of the map
        new nokia.maps.map.component.Behavior()
    ]
});


// We create an instance of Container to store markers per city
var myContainer = new nokia.maps.map.Container();

/* We add all of the city containers to map's object collection so that
 * when we add markers to them they will be rendered onto the map
 */
map.objects.add(myContainer);

// We create several of marker for a variety of famous landmarks
var firstMarker = new nokia.maps.map.StandardMarker(
        [-18, 178.333],
        { text: 1 }
    ),
    secondMarker = new nokia.maps.map.StandardMarker(
        [-18.5, 180],
        { text: 2 }
    ),
    thirdMarker = new nokia.maps.map.StandardMarker(
        [-18.5, -178.333],
        { text: 3 }
    );

// Add the newly created landmakers per city to its container
myContainer.objects.addAll([firstMarker, secondMarker, thirdMarker]);

/* Now we calculate the bounding boxes for every container.
 * A bounding box represents a rectangular area in the geographic coordinate system.
 */
var myBoundingBox = myContainer.getBoundingBox();


zoom = 1;
map.setCenter(myBoundingBox.getCenter());
map.setZoomLevel(zoom);


while (map.getViewBounds().getWidth() >  myBoundingBox.getWidth())   {
    zoom++;
    map.setZoomLevel(zoom); 
}
zoom--
map.setZoomLevel(zoom--);

</script>

    </body>
</html>
    • 0