Bings maps - Choosing pin image from sharepoint list

Jan 7, 2011 at 8:38 AM

I am using the Jpoint bing maps code but am struggling to find the syntax to make the pin image dependent on a list item.

 

My current working script is below.

jP.include([

'http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us'

]);

myjPart.ShowConfigDefaults = [

[

"LookupSiteURL", "Absolute path to lookup list site location", "/"

]

, [

"LookupListName", "Lookup list name", "LookupList"

]

, [

"LookupMaxDisplay", "Maximum List Items to Display", "10"

]

, [

"LookupViewName", "View to use; blank to use default", ""

]

, [

"LookupCAML", "Custom CAML (optional)", ""

]

, [

"MapWidth", "Map Width", "400"

]

, [

"MapHeight", "Map Height", "400"

]

, [

"MapZoomLevel", "Map Zoom Level", "3"

]

, [

"Geocode", "Use Geocoding service", "yes"

]

, [

"IconURL", "Relative path to icon image", "/"

]

];

myjPart.setjPartOptions({ Plugin: { Name:

'Bing List Map', Description: 'Allows user with contributor rights to display contents of a SharePoint list on a Bing map'

} });

var

 

ZoomLEvel = 1;

var

 

map = null

;

var

 

BingMapJpartProcessing = null

;

$(document).ready(

function () {

//Wait page to load and then apply webpart logic

 

if (myjParts[JpartProcessing] != null

) {

 

var

thisWebpart = myjParts[JpartProcessing];

BingMapJpartProcessing = JpartProcessing;

 

try

{

 

//jPart user code goes here ---------------------------

 

if (thisWebpart.Options.Local != null

) {

drawMap();

}

 

//-----------------------------------------------------

}

catch

(err) { };

JpartProcessing = JpartProcessing + 1;

}

});

function

 

drawMap() {

 

var

thisWebpart = myjParts[BingMapJpartProcessing];

 

var

Options = thisWebpart.Options.Local;

DataJSONObj = getjPointData(Options.LookupSiteURL, Options.LookupListName, Options.LookupViewName, Options.LookupCAML, Options.LookupMaxDisplay,

null

);

 

var MapResults = new

Array();

$.each(DataJSONObj,

function

(idx, itemData) {

 

var

MapResult = {};

MapResult[

'Description'] = $(itemData).attr('ows_LinkTitle'

);

MapResult[

'Address'] = $(itemData).attr('ows_Street') + ' ' + $(itemData).attr('ows_City') + ' ' + $(itemData).attr('ows_State') + ' ' + $(itemData).attr('ows_Zip'

);

MapResult[

'Lat'] = $(itemData).attr('ows_Lat'

);

MapResult[

'Lon'] = $(itemData).attr('ows_Lon'

);

MapResult[

'ID'] = $(itemData).attr('ows_ID'

);

MapResult[

'Pin'] = $(itemData).attr('ows_Pin'

);

MapResults.push(MapResult);

});

thisWebpart.MainDiv.append(

"<div id='myMap' style='position:relative; width:" + Options.MapWidth + "px; height:" + Options.MapHeight + "px;'></div>"

);

ZoomLEvel = Options.MapZoomLevel;

GetMap();

$.each(MapResults,

function

(idx, itemData) {

Geocode(itemData.Address)

});

}

function

 

getjPointData(siteURL, listName, viewName, cAML, maxDisplay, viewFields) {

 

var Data = null

;

 

try

{

 

var

thisSPObj = jP.Lists.getList(siteURL, listName);

thisSPObj.ViewFields = viewFields;

 

if (viewName != null

&& viewName.length > 0) {

thisSPObj.getSPView(viewName);

}

 

else

{

thisSPObj.getSPItemsWithQuery(cAML, maxDisplay);

}

Data = thisSPObj.JQueryData;

}

 

catch

(err) {

}

 

return

Data;

}

function

 

GetMap() {

map =

new VEMap('myMap'

);

map.LoadMap();

}

function

 

Geocode(address) {

 

//alert('Attempting to Geocode: ' + address);

map.Find(

null, address, null, null, 0, 10, false, false, false, true

, ProcessResults)

}

function

 

ProcessResults(layer, results, places, hasmore) {

 

if (places != null) CreatePin("Default"

, places[0]);

 

//alert("Latitude: " + places[0].LatLong.Latitude + " Longitude= " + places[0].LatLong.Longitude);

}

function

 

CreatePin(type, point) {

 

if (point != 'Unavailable'

) {

 

var infobox = "<div style='font-size:12px;font-weight:bold;border:solid 2px Black;background: url(../blue_pushpin1.gif);width:50px;'>Put anything here!</div>"

;

 

var

Test = ;

 

var pin = new VEShape(VEShapeType.Pushpin, point.LatLong);

"<div style='font-size:12px;font-weight:bold;border:solid 2px Black;background: url(../blue_pushpin1.gif);width:50px;'>Somthing</div>"

pin.SetTitle(Test);

pin.SetDescription(infobox);

 

var icon = "<div style='background: url(../blue_pushpin1.gif) no-repeat;width:20px;'> </div>"

;

pin.SetCustomIcon(icon);

map.AddShape(pin);

map.SetZoomLevel(ZoomLEvel)

}

}

Mar 10, 2011 at 2:31 PM

Just courious did you get this working?