none
How to Set Zoom level in bing maps according to number of pushpin to be shown. RRS feed

  • Question

  • I have some 30 Latitude and longitude in JSON Object and i am populating set of 5 each time and creating HTML Markup and displaying in browser on left DIV Element. On right DIV element i am showing map with all available latitude and longitude(30 Pushpins from JSON).

    On Load i am creating HTML Markup of first five and displaying the values on left side. and am loading all push pins on right DIV(Map Div). But by default i need to zoom in that only MINIMUM 5 push pins should be shown(Which is gernerated by HTML).

    For example if 8th push pin is coming near to 3rd push is also fine. But i need to show the 5 pushpins with maximum zoom level.

    Till now i am setting a particular hardcoded zoom level to display the pushpins.

    Here is my CODE:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Bing Maps - YUI</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
        <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
        <script type="text/javascript">
            YUI().use('json-parse', 'json-stringify', "node", "selector-css3", "event-valuechange", "event", 'node-event-delegate', 'event-key', function (Y) {
                Y.on('available', function () {
                    Y.one('#firststore').addClass('disableprev');
                    var data = JSON.stringify({ "stores": [
                { "storeId": "1", "Name": "Branch 1", "lat": "12.915397", "long": "77.624154", "address": "HSR Layout, Bengaluru 560102, India." },
                { "storeId": "2", "Name": "Branch 2", "lat": "12.936060", "long": "77.625506", "address": "Koramangala Ring Road, 4th Cross Road, Koramangala, Bengaluru 560034, India." },
                { "storeId": "3", "Name": "Branch 3", "lat": "12.936060", "long": "80.502330", "address": "Pilimathalawa Road, Menikdiwela, Sri Lanka." },
                { "storeId": "4", "Name": "Branch 4", "lat": "12.956805", "long": "77.700457", "address": "Varthur Main Road, Marattahalli, Bengaluru 560037, India." },
                { "storeId": "5", "Name": "Branch 5", "lat": "12.918325", "long": "77.573256", "address": "1 Kanakapura Main Road, Banashankari, Bengaluru 560050, India." },
                { "storeId": "6", "Name": "Branch 6", "lat": "12.920333", "long": "77.620291", "address": "321-2 Madwala Stage 1, BTM Layout, Bengaluru 560068, India." },
                { "storeId": "7", "Name": "Branch 7", "lat": "12.965170", "long": "77.619261", "address": "Old Airport Road, Neelasandra, Bengaluru 560071, India." },
                { "storeId": "8", "Name": "Branch 8", "lat": "13.095747", "long": "77.348184", "address": "Nelamangala Sub-District, Ka, India." },
                { "storeId": "9", "Name": "Branch 9", "lat": "12.918999", "long": "77.616942", "address": "273, BTM Layout, Bengaluru" },
                { "storeId": "10", "Name": "Branch 10", "lat": "12.932900", "long": "77.621835", "address": "Koramangala, Bengaluru" },
                { "storeId": "11", "Name": "Branch 11", "lat": "12.913922", "long": "77.622414", "address": "Bommanahalli, Bengaluru" },
                { "storeId": "12", "Name": "Branch 12", "lat": "12.915009", "long": "77.629581", "address": "L-55, HSR Layout, Bengaluru 560102, India." },
                { "storeId": "13", "Name": "Branch 13", "lat": "12.917373", "long": "77.622779", "address": "Silk Board Flyover, Koramangala, Bengaluru" },
                { "storeId": "14", "Name": "Branch 14", "lat": "12.916933", "long": "77.628487", "address": "100 Feet Ring Road, Koramangala, Bengaluru" },
                { "storeId": "15", "Name": "Branch 15", "lat": "12.918941", "long": "77.621642", "address": "Silk Board Flyover, Koramangala, Bengaluru 560034, India" },
                { "storeId": "16", "Name": "Branch 16", "lat": "12.916285", "long": "77.618015", "address": "100 Feet Ring Road, BTM Layout, Bengaluru 560029, India" },
                { "storeId": "17", "Name": "Branch 17", "lat": "12.919096", "long": "77.627409", "address": "Silk Board Flyover & Hosur Main Road, HSR Layout, Bengaluru 560102, India" },
                { "storeId": "18", "Name": "Branch 18", "lat": "12.915114", "long": "77.631169", "address": "L-115 3rd B Cross Road, HSR Layout, Bengaluru 560102, India" },
                { "storeId": "19", "Name": "Branch 19", "lat": "12.914549", "long": "77.615333", "address": "7/8 30th Main Road, BTM Layout, Bengaluru 560076, India" },
                { "storeId": "20", "Name": "Branch 20", "lat": "12.911391", "long": "77.633594", "address": "1089 19th Cross Road, HSR Layout, Bengaluru 560102, India" },
                { "storeId": "21", "Name": "Branch 21", "lat": "12.922601", "long": "77.622757", "address": "Madivala Market Road, Koramangala, Bengaluru 560034, India" },
                { "storeId": "22", "Name": "Branch 22", "lat": "12.924149", "long": "77.628808", "address": "Madivala Market Road & Sarjapur Road / Koramangala Road, Koramangala, Bengaluru 560034, India" }
    ]
                    });
                    Y.one("input[name='storeLatLong']").set("value", data);
                    try {
                        var val = Y.one("#storeLatLong").get("value");
                        var data = Y.JSON.parse(val);
                    }
                    catch (e) {
                        alert("Invalid product data");
                    }
                    var pins = data.stores;
                    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                             { credentials: "AkFmXSfNJbfsd3VIkd2R8AiIAYqO6fkrHpLC-4lTUvo3Lr920bQy9bLNCzbzXliz", mapTypeId: Microsoft.Maps.MapTypeId.road, showMapTypeSelector: false, customizeOverlays: true, showBreadcrumb: true, enableSearchLogo: false });
                    var infoboxLayer = new Microsoft.Maps.EntityCollection();
                    var pinLayer = new Microsoft.Maps.EntityCollection();
                    pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { width: 200, height: 100, visible: false });
                    infoboxLayer.push(pinInfobox);
                    Y.Array.each(pins, function (pin, index) {
                        var pinLocation = new Microsoft.Maps.Location(pin.lat, pin.long);
                        var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { icon: 'images/Pushpin.png', width: 32, height: 32, text: pin.storeId, typeName: "pin" + index }); /*typeName: pin.Name*/
                        NewPin.Title = pin.address;
                        NewPin.ID = pin.Name;
                        NewPin.StoreID = pin.storeId;
                        Microsoft.Maps.Events.addHandler(NewPin, 'click', displayInfobox);
                        Microsoft.Maps.Events.addHandler(map, 'click', hideInfobox);
                        map.entities.push(NewPin);
                        Y.one('.pin' + index).setAttribute('title', pin.Name);
                    });
                    map.entities.push(infoboxLayer);
                    map.setView({ center: new Microsoft.Maps.Location(data.stores[0].lat, data.stores[0].long), zoom: 15 });
                    var selectedPin;
                    function displayInfobox(e) {
                        if (e.targetType == 'pushpin') {
                            selectedPin = e.target;
                            map.setView({ center: e.target.getLocation(), zoom: 15 });
                            pinInfobox.setLocation(e.target.getLocation());
                            pinInfobox.setOptions({ visible: true, title: e.target.ID, description: e.target.Title });
                            var selectedPinNum = selectedPin._text;
                            selectListFromMap(selectedPinNum);
                            resetPinImage();
                            selectedPin.setOptions({ icon: 'images/Pushpin_Selected.png' });
                            return false;
                        }
                    }
                    function resetPinImage() {
                        for (var i = 0; i < map.entities.getLength(); i++) {
                            var elt = map.entities.get(i);
                            if (elt.StoreID != null) {
                                elt.setOptions({ icon: 'images/Pushpin.png' });
                            }
                        }
                    }
                    function selectListFromMap(sel) {
                        var isPinExist = false;
                        Y.one(".test").get('children').setAttribute("class", "nameslist");
                        Y.all(".nameslist").each(function (node) {
                            if (node.getAttribute("id") == "pin_" + (sel - 1)) {
                                node.setAttribute("class", "actives");
                                isPinExist = true;
                                return;
                            }
                        });
                        if (!isPinExist) {
                            var pinNum = sel - 1;
                            var range = pinNum % 5;
                            if (range > 0) {
                                counter = pinNum - range;
                            } else {
                                counter = pinNum;
                            }
                            var endPoint = counter + 4;
                            if (endPoint > data.stores.length) endPoint = data.stores.length - 1;
                            createMarkup(counter, endPoint);
                            selectListFromMap(sel);
                        }
                    }
                    function hideInfobox(e) {
                        pinInfobox.setOptions({ visible: false });
                    }
                    createMarkup(0, 4);
                    function createMarkup(start, end) {
                        if (end > data.stores.length) {
                            end = data.stores.length;
                        }
                        var markup = "";
    
                        markup = "<ul class='test'>";
                        for (var i = start; i <= end; i++) {
                            var p = data.stores;
                            var classNme;
                            if (i == start) {
                                classNme = "actives";
                                setSelectedPinImage(i);
                            }
                            else {
                                classNme = "nameslist";
                            }
                            markup += "<li class=" + classNme + " id=pin_" + i + ">" + p[i].storeId + " " + p[i].Name + "</li>";
                        }
                        markup += "</ul>";
                        Y.one("#storeList").setHTML(markup);
                        Y.all(".nameslist").on("click", setSelectedCss);
                        Y.all(".actives").on("click", setSelectedCss);
                        Y.all(".nameslist").on("mouseover", setMouseoverCss);
                        Y.all(".nameslist").on("mouseout", setMouseoutCss);
                        Y.all(".actives").on("mouseover", setMouseoverCss);
                        Y.all(".actives").on("mouseout", setMouseoutCss);
                        //setMapZoom();
                    }
                    function setMouseoverCss(e) {
                        if (e._currentTarget.getAttribute("class") == "nameslist") {
                            e._currentTarget.setAttribute("class", "nameslisthover");
                        }
                    }
                    function setMouseoutCss(e) {
                        if (e._currentTarget.getAttribute("class") == "nameslisthover") {
                            e._currentTarget.setAttribute("class", "nameslist");
                        }
                    }
                    function setSelectedCss(e) {
                        Y.one(".test").get('children').setAttribute("class", "nameslist");
                        e._currentTarget.setAttribute("class", "actives");
                        var selectedPin = e._currentTarget.getAttribute("id").substring(4);
                        setSelectedPinImage(selectedPin);
                        hideInfobox();
                        map.setView({ center: new Microsoft.Maps.Location(data.stores[selectedPin].lat, data.stores[selectedPin].long), zoom: 15 });
                    }
                    function setSelectedPinImage(selectedPin) {
                        for (var i = 0; i < map.entities.getLength(); i++) {
                            var elt = map.entities.get(i);
                            if (elt.StoreID != null) {
                                if (Number(elt.StoreID) == Number(selectedPin) + 1) {
                                    elt.setOptions({ icon: 'images/Pushpin_Selected.png' });
                                }
                                else {
                                    elt.setOptions({ icon: 'images/Pushpin.png' });
                                }
                            }
                        }
                    }
                    var counter = 0;
                    Y.one("#prev").on("click", function (e) {
                        counter -= 5;
                        if (counter < 0) {
                            counter = 0;
                            Y.one('#firststore').addClass('disableprev');
                            Y.one('#firststore').removeClass('prevenabled');
                            e.preventDefault();
                        }
                        else {
                            Y.one('#firststore').removeClass('disableprev');
                            Y.one('#firststore').addClass('prevenabled');
                        }
                        createMarkup(counter, counter + 4);
                        var nextLoc = new Microsoft.Maps.Location(data.stores[counter].lat, data.stores[counter].long);
                        map.setView({ center: nextLoc, zoom: 15 });
                        hideInfobox();
                        e.preventDefault();
                    });
                    Y.one("#next").on("click", function (e) {
                        counter += 5;
                        var nextCounter = counter + 5;
                        var total = data.stores.length;
                        if (nextCounter > total) {
                            if (counter > total) counter -= 5;
                            nextCounter = total;
                            Y.one('#nextstore').removeClass('nextenabled');
                            Y.one('#nextstore').addClass('nextdisable');
                            e.preventDefault();
                        }
                        else {
                            Y.one('#nextstore').removeClass('nextdisable');
                            Y.one('#nextstore').addClass('nextenabled');
                            Y.one('#firststore').removeClass('disableprev');
                            Y.one('#firststore').addClass('prevenabled');
                        }
                        createMarkup(counter, nextCounter - 1);
                        var prevLoc = new Microsoft.Maps.Location(data.stores[counter].lat, data.stores[counter].long);
                        map.setView({ center: prevLoc, zoom: 15 });
                        hideInfobox();
                        e.preventDefault();
                    });
    
                }, "#hiddenval");
            });
        </script>
    </head>
    <body>
        <div>
            <div id="storelists">
                <div id="prev">
                    <input type="button" name="button" id="firststore" class="prevdisabled" />
                </div>
                <div id="storeList">
                </div>
                <div id="next">
                    <input type="button" name="button" id="nextstore" class="nextenabled" />
                </div>
            </div>
            <div id="maplists">
                <div id="mapDiv">
                </div>
            </div>
        </div>
        <div id="hiddenval">
            <input type="hidden" name="storeLatLong" id="storeLatLong" value="" />
        </div>
    </body>
    </html>

    And My CSS:

     body
    
    
    {
        background-color:#fff;  
        font-family:Arial;
        font-size:12px;  
     }
    
     #storelists
     {
         width:248px;
         display:inline-block;
         border:1px solid #999999;
         height:306px;
     }
    
     #maplists
     {
         width:700px;
         height:306px;
         ;
         display:inline-block;
         border:1px solid #999999;
     }
    
    
    
    
    .test
    {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    .nameslist
     {
         border-bottom:1px solid #f1f1f1;
         background-color:#ffffff;
         color:#3d6aae;
         height:50px;
         vertical-align:middle;
         /*text-align: center;*/
     }
    .nameslisthover
     {
         background-color:#f0f0f0;
         height:50px;
         color:#3d6aae;
         vertical-align:middle; 
     }
     .actives
    {
         background-color:#de2a1e;
         color:#ffffff;
         height:50px;
         vertical-align:middle;
    }
    
    
     .prevenabled
     {
         background: url("images/TopNavEnabled.PNG") no-repeat;
         cursor:pointer;
         border: none;
         height:25px;
         width:248px;
     }
     .prevdisabled
     {
         height:25px;
         width:248px;
         background:url("images/TopNavDisabled.PNG");
         cursor:pointer;
         border: none;
     }
      .nextenabled
     {
         height:25px;
         width:248px;
         background:url("images/BottomNavEnabled.PNG");
         cursor:pointer;
         border: none;
     }
       .nextdisable
     {
         height:25px;
         width:248px;
         background:url("images/BottomNavDisabled.PNG");
         cursor:pointer;
         border: none;
     }
     .successmsgdisplay
            {
                color: blue;
            }
            .successmsgdisplay12
            {
                color: Red;
            }
            .disableprev
            {
                color: #999999;
            }
            .enbableprev
            {
                color: green;
            }


    • Edited by IP Ramesh Kumar Wednesday, January 29, 2014 10:42 AM Added Stylesheet
    Wednesday, January 29, 2014 10:40 AM

Answers

  • You need to create an array of coordinates like this:

    var locs = [];

    for(var I=0;i<data.length;I++){

    locs.push(new Microsoft.Maps.Location(data.stores[i].lat, data.stores[i].long));

    }

    As for the zoom level, it would be ignored. If you want to show all your pushpins the map might have to use a different zoom level. If you just want to center on the group of pins and don't care if all are in view then set the center property of the setView method to bounds.center


    http://rbrundritt.wordpress.com

    Wednesday, January 29, 2014 3:16 PM
  • Create an array that contains all the coordinates of each pushpin. Pass this array into a LocationRect object. This will generate a bounding box for the pushpins. Pass this as the bounding box for the map view. For example:

    var locs = [coordinates];

    var bounds = Microsoft.Maps.LocationRect.fromLocations(locs);

    map.setView({bounds:bounds, padding: 100});


    http://rbrundritt.wordpress.com

    Wednesday, January 29, 2014 1:02 PM

All replies

  • Create an array that contains all the coordinates of each pushpin. Pass this array into a LocationRect object. This will generate a bounding box for the pushpins. Pass this as the bounding box for the map view. For example:

    var locs = [coordinates];

    var bounds = Microsoft.Maps.LocationRect.fromLocations(locs);

    map.setView({bounds:bounds, padding: 100});


    http://rbrundritt.wordpress.com

    Wednesday, January 29, 2014 1:02 PM
  • Hi Ricky,

    In my case i have 2 questions,

    1. How to get the co-ordinates(Only 5 which is generated - HTML) .i.e. var locs=[???];

                   I tried with var locs=[data.stores[0].lat, data.stores[0].long] and var locs=[pin.lat, pin.long]. I didn't get the expected result.


    2. If this is fixed, what will happen to the zoom level i set already(Hard-coded zoom:15).


    I need to focus only on the lat and long which is generated in HTML.

    It would be great if you can insert it in the code shown above.

    Wednesday, January 29, 2014 2:09 PM
  • You need to create an array of coordinates like this:

    var locs = [];

    for(var I=0;i<data.length;I++){

    locs.push(new Microsoft.Maps.Location(data.stores[i].lat, data.stores[i].long));

    }

    As for the zoom level, it would be ignored. If you want to show all your pushpins the map might have to use a different zoom level. If you just want to center on the group of pins and don't care if all are in view then set the center property of the setView method to bounds.center


    http://rbrundritt.wordpress.com

    Wednesday, January 29, 2014 3:16 PM
  • I have used data.stores.length.

    Thank you Ricky, That worked very well. :)

    Thanks a lot again.

    Regards,

    P.Ramesh Kumar.

    Monday, February 3, 2014 9:44 AM