Configuring a map control using Javascript in Lightswitch

Question

I have been trying to put a Bing map into my Lightswitch visual studio project and found some code on the internet which I have adapted to my own data. However, I can get the map to load up but it doesn't seem to be taking my data and just shows a random point in the middle of the ocean as opposed to the locations I am inputting!

This is the code I have found and adapted:

function rebindMap(element, contentItem) {
// Verify that we aren't updating the map continuously due to multiple bound values changing.
var now = new Date();
if (now.getTime() - mapLastUpdated.getTime() > 15) {
    setTimeout(function () {
        updateMap(element, contentItem);
        mapLastUpdated = new Date();
    }, 20);
}
};

function updateMap(element, contentItem) {
var mapDiv = $("#appointmentMap");
// If we've previously created the map, make sure to clean up the div that contained it;
// otherwise, the Bing map control fails to create properly.
if (mapDiv.length > 0) {
    $(mapDiv).remove();
}
mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

$(mapDiv).appendTo($(element));
mapControl = mapDiv.lightswitchBingMapsControl({
    country: contentItem.value.Spatial_Data,
    state: contentItem.value.State_Province,
    postalcode: contentItem.value.Postal_Code,
    address: contentItem.value.Address,
    city: contentItem.value.City,
    latitude: contentItem.value.Latitude,
    longitude: contentItem.value.Longitude,
    mapTypeId: Microsoft.Maps.MapTypeId.road,


    height: "400"
});
};



myapp.View_Retail.Site_Name1_render = function (element, contentItem) {
    // Write code here.
    updateMap(element, contentItem);
    mapLastUpdated = new Date();
    contentItem.dataBind("value.country", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.state", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.postalcode", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.address", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.city", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.latitude", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.longitude", function () { rebindMap(element, contentItem); });
};

I got the code from the Microsoft website: http://technet.microsoft.com/en-ca/jj674624(v=vs.71).aspx

I don't understand what I am missing! I'm not very experienced in javascript so any help would be greatly appreciated :)

Have you tried to avoid any binding errors by hard coding the lat/long? Also try it without the address data just pass in a lat/long. — gimpy, Jul 29 '14 at 21:31
Thanks for replying! I've tried hard coding the longitude and latitude but to no avail :( For example: Changed - contentItem.dataBind("value.latitude", function () { rebindMap(element, contentItem); }); To - contentItem.dataBind("1", function () { rebindMap(element, contentItem); }); — Steve0303, Aug 12 '14 at 08:38
try the implementation on this link: http://msdn.microsoft.com/en-us/library/jj733572.aspx#map — gimpy, Aug 13 '14 at 00:24

score 0 · Answer 1 · edited Oct 16 '14 at 00:12

0

Why dont you use the bing map control extension and create a map address property in your table and create a query for it

result = Address1 + ", " + City + ", " + State + ", " + PostalCode;

edited Oct 16 '14 at 00:12

Chen-Tsu Lin

22,876
16
53
63

answered Oct 15 '14 at 23:58

jason

33
7

Configuring a map control using Javascript in Lightswitch

1 Answers1