Integrate BingMap into HTML page.

3/30/2015 - 12:39 PM

Integrate BingMap into HTML page.

Voici le package et les étapes pour intégrer la carte Bing avec les différents bureaux:

1.	Créer une liste custom avec ces colonnes (texte simple) :
« Latitude »
« Longitude »
« Address »
« ImageURL »
« PhoneNumber »
« WebsiteURL »
« HeadOfficer »

2.	 Uploader les 2 fichiers « BingMapIntegration.txt » et « poi_search.png » dans la bibliothèque « Site Asset » du site.

3.	Dans le fichier texte « BingMapIntegration.txt », variables à modifier :
a.	« credentials » (ligne 66) : Compte d’essai de 90jours, à récupérer sur http://www.microsoft.com/maps/default.aspx si besoin.
b.	« listTitle » (ligne 93) : Nom de la liste custom
c.	« icon » (ligne 131) : lien vers le fichier poi_search.png/nom du site.	
d.	« div » (ligne 186) : hauteur et largeur de la map.

4.	Créer un Content Editor, et le faire pointer vers le fichier texte.

Edit 21/09/2015: Utiliser la version ASPX après SP2013, design à retoucher.

BingMapsIntegration.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1">
</script>
<style type="text/css">
    .MicrosoftMap .Infobox .infobox-title
    {
        color: #3f51b5 !important;
        padding-top: 5px !important;
        padding-left: 5px !important;
        padding-bottom: 5px !important;
        font-size: 14px !important;
    }
    .Infobox
    {
    	height: 100px !important;
    	top: 37px !important;
    	left: -5px !important;
    }
    
    .MicrosoftMap .Infobox .infobox-info
    {
        padding-top: 5px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 5px !important;
        font-size: 11px !important;
        line-height: 16px !important;
    }

    .infobox-info
    {
    	margin-top: -20px;
    }
            
    .infobox-info a
    {
        float: none !important;
    }
    
    .MicrosoftMap .Infobox
    {
        width: 350px !important;
    }   
            
    .MicrosoftMap .Infobox2 
    {
        color: black !important;
    }
    
    .infobox-body
    {
        color: #bbb !important;
        background-color:rgb(255, 255, 255) !important;
    }
    
    .Infobox2
    {
        color: #0072c6 !important;
    }
    
    .Infobox2 .infobox-title, .BingTheme.MicrosoftMap .Infobox2 a, .BingTheme.MicrosoftMap .Infobox2 a:visited, .BingTheme.MicrosoftMap .MiniInfobox2 a, .BingTheme.MicrosoftMap .MiniInfobox2 a:visited, .BingTheme.MicrosoftMap .infobox-title
    {
        color: #0072c6 !important;
    }
    
    .infobox-stalk
    {   
        background-image:url("https://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20130909144456.35/i/Infobox/darkinfoboxPointer.png") !important;
        top: 108px !important;
        left: -26px !important;
        display: none;
    }
    
    .BreadcrumbContainer
    {
        display:none;
    }
    
    .MicrosoftMap .Infobox2 .infobox-info-title
    {
        color: black !important;
        font-weight:bold !important;
    }
    .infobox-close
    {
    	font-family: verdana !important;
    	font-size: 18px !important;
    }
    .infobox-logo
    {
    	position: absolute;
    	margin-left: 260px;
    	margin-top: 27px;
    }
    .infobox-logo img
    {
   		width: 100px;
    }
</style>
<script type="text/javascript">
var map, infobox, dataLayer, ctx, listItems, listTitle;

        function getMap()
        {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: 'AjE6JSqVY-52gETsN3A03ALWZJUx2qkAxRMoomG4kDBTKVpqdMg5ppR6J8x9jvyo',
                showDashboard: false,
                showScalebar: false,
                enableClickableLogo: false,
                enableSearchLogo: false,
                zoom: 3, 
                customizeOverlays: true,
                mapTypeId : Microsoft.Maps.MapTypeId.road,
                disableBirdseye: true
            });

            <!-- Start view on Paris. -->
                    var StartLongitude = "48.856930";
                    var StartLatittude = "2.341200";
                    map.setView({center:new Microsoft.Maps.Location(StartLongitude, StartLatittude)});
            <!-- Start view on Paris END -->

            dataLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(dataLayer);

var infoboxLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(infoboxLayer);

            infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { 
                        visible: false, 
                        offset: new Microsoft.Maps.Point(0, 20) 
                    });
            infoboxLayer.push(infobox);

            listTitle = "Office";

            if(listTitle){
                window.parent.ExecuteOrDelayUntilScriptLoaded(loadList, 'sp.js');
            }
        }

        function loadList(){
            getListItems(listTitle);            
        }

        function getListItems(listTitle){
            ctx = new window.parent.SP.ClientContext.get_current();

var targetList = ctx.get_web().get_lists().getByTitle(listTitle);
var query = window.parent.SP.CamlQuery.createAllItemsQuery();

            listItems = targetList.getItems(query);
            ctx.load(listItems);

            ctx.executeQueryAsync(onLoadItemsSuccess, onLoadItemsFail);
        }

        function onLoadItemsFail(sender, args) {
            alert('Failed to get lists items. Error:' + args.get_message());
        }

        function onLoadItemsSuccess(sender, args) {
            var listEnumerator = listItems.getEnumerator();

            var item, pin, loc;
            while (listEnumerator.moveNext())  {
                item = listEnumerator.get_current();
                AddPushpin(item);
            }
        }

        function AddPushpin(item)
        {
            var latitude = item.get_item("Latitude");
            var longitude = item.get_item("Longitude");
            var Address = item.get_item("Address");
            var Logo = item.get_item("LogoURL");
            var PhoneNumber = item.get_item("PhoneNumber");
            var Website = item.get_item("Website");
            var HeadOfficer = item.get_item("HeadOfficer");
            
            var loc = new Microsoft.Maps.Location(latitude, longitude);
            
            var descriptionValue = "<div class='infobox-logo'><img src='" + Logo + "'/></div>";
            if (Address != null)
            {
                descriptionValue += "<br /><span class='infobox-info-title'>Address: </span>" + Address + "</div>";
            }
            if (PhoneNumber != null)
            {
                descriptionValue += "<br /><span class='infobox-info-title'>Phone: </span>" + PhoneNumber + "</div>";
            }
            if (Website != null)
            {
                descriptionValue += "<br /><span class='infobox-info-title'>Website: </span><a href='" + Website + "' >" + Website + "</a>";
            }
            if (HeadOfficer != null)
            {
                descriptionValue += "<br /><span class='infobox-info-title'>Head Officer: </span>" + HeadOfficer + "</div>";
            }
                            
            loc = new Microsoft.Maps.Location(item.get_item("Latitude"), item.get_item("Longitude"));            
            var options = {icon: '/sites/NFR-PC/SP/SiteAssets/poi_icon.png', width: 32, height: 32};
            pin = new Microsoft.Maps.Pushpin(loc, options);
                pin.Metadata = {
                    Title : item.get_item("Title"),
                    Latitude : item.get_item("Latitude"),
                    Longitude : item.get_item("Longitude"),
                    Location : descriptionValue
                };
            Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
			map.entities.push(pin);
        }

        function CenterViewOnSelectedPin(latitude,longitude)
        {
            map.setView({center:new Microsoft.Maps.Location(latitude, longitude)});
        }

        function displayInfobox(e) {
            if (e.targetType == 'pushpin') {
                CenterViewOnSelectedPin(e.target.Metadata.Latitude, e.target.Metadata.Longitude)
                infobox.setLocation(e.target.getLocation());
                infobox.setOptions({ 
                    visible: true, 
					title: e.target.Metadata.Title, 
                    description: e.target.Metadata.Location 
                });
            }
        }
        
        window.parent.onload = getMap;
</script>
</head>
<body>
<div id='myMap' style="position:relative;width:100%;height:400px;"></div>
</body>
</html>

BingMapIntegration.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="/_layouts/1033/init.js"></script>
    <script  type="text/javascript" src="/_layouts/MicrosoftAjax.js"></script>
    <script  type="text/javascript" src="/_layouts/sp.core.js"></script>
    <script  type="text/javascript" src="/_layouts/sp.runtime.js"></script>
    <script  type="text/javascript" src="/_layouts/sp.js"></script>
    <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
    <style type="text/css">
		.MicrosoftMap .Infobox .infobox-title
		{
			color:#952783 !important;
			padding-top:5px !important;
			padding-left:5px !important;
			padding-bottom:5px !important;
			font-size:9pt !important;
		}
		
		.MicrosoftMap .Infobox .infobox-info
		{
			padding-top:5px !important;
			padding-left:5px !important;
			padding-right:5px !important;
			padding-bottom:5px !important;
			font-size:10px !important;
			line-height:19px !important;
		}
				
		.MicrosoftMap .Infobox2 .infobox-info A
		{
			float:none !important;
		}
		
		.MicrosoftMap .Infobox
		{
			width: 350px !important;
		}	
				
		.MicrosoftMap .Infobox2 
		{
			color: black !important;
		}
		
		.infobox-body
		{
			color: #bbb !important;
			background-color:rgb(255, 255, 255) !important;
		}
		
		.Infobox2
		{
			color: #0072c6 !important;
		}
		
		.Infobox2 .infobox-title, .BingTheme.MicrosoftMap .Infobox2 a, .BingTheme.MicrosoftMap .Infobox2 a:visited, .BingTheme.MicrosoftMap .MiniInfobox2 a, .BingTheme.MicrosoftMap .MiniInfobox2 a:visited, .BingTheme.MicrosoftMap .infobox-title
		{
			color: #0072c6 !important;
		}
		
		.infobox-stalk
		{	
			background-image:url("https://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20130909144456.35/i/Infobox/darkinfoboxPointer.png") !important;
		}
		
		.BreadcrumbContainer
		{
			display:none;
		}
		
		.MicrosoftMap .Infobox2 .infobox-info-title
		{
			color: black !important;
			font-weight:bold !important;
		}
	</style>
    <script type="text/javascript">
        var map, infobox, dataLayer, ctx, listItems;
		var listTitle = "OfficeList";
		var BingCredentials = "<EnterBingAPIHere>";

        function getMap()
        {
			Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback: function() 
			{

				map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
					credentials: BingCredentials,
					theme: new Microsoft.Maps.Themes.BingTheme(),
					showScalebar: false,
					enableClickableLogo: false,
					enableSearchLogo: false,
					zoom: 2, 
					customizeOverlays: true,
					mapTypeId:Microsoft.Maps.MapTypeId.road,
					disableBirdseye: true
				});            
				
				<!-- Start view on Paris. -->
					var StartLongitude = "48.856930";
					var StartLatittude = "2.341200";
					map.setView({center:new Microsoft.Maps.Location(StartLongitude, StartLatittude)});
				<!-- Start view on Paris END -->
				
				dataLayer = new Microsoft.Maps.EntityCollection();
				map.entities.push(dataLayer);

				var infoboxLayer = new Microsoft.Maps.EntityCollection();
				map.entities.push(infoboxLayer);

				infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { 
							visible: false, 
							offset: new Microsoft.Maps.Point(0, 20) 
						});
				infoboxLayer.push(infobox);
				GetAllItems(listTitle);
			}});
        }
        		
		function GetItemsbyCountry(targetList, selectedcountry)
		{
			ctx = new SP.ClientContext.get_current();
            var targetList = ctx.get_web().get_lists().getByTitle(listTitle);
			var query = new SP.CamlQuery();
			query.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Country' /><Value Type='Text'>" + selectedcountry + "</Value></Eq></Where><OrderBy><FieldRef Name='Country' Ascending='TRUE' /></OrderBy></Query></View>");			
            listItems = targetList.getItems(query);
						
            ctx.load(listItems);                    
            ctx.executeQueryAsync(onLoadItemsSuccess, onLoadItemsFail);
		}
		
		function GetAllItems(targetList)
		{
			ctx = new SP.ClientContext.get_current();
            var targetList = ctx.get_web().get_lists().getByTitle(listTitle);
			var query = new SP.CamlQuery();
			query.set_viewXml("<View><Query><OrderBy><FieldRef Name='Country' Ascending='TRUE' /></OrderBy></Query></View>");			
            listItems = targetList.getItems(query);
						
            ctx.load(listItems);                    
            ctx.executeQueryAsync(onLoadItemsSuccess, onLoadItemsFail);
		}

        function onLoadItemsFail(sender, args) {
            alert('Failed to get lists items. Error:' + args.get_message());
        }

        function onLoadItemsSuccess(sender, args) {
            var listEnumerator = listItems.getEnumerator(); 
			
            var item;
            while (listEnumerator.moveNext())  {
                item = listEnumerator.get_current();           
				AddCountryToDropDownList(item);
				AddPushpin(item);		
            }
        }
		
		function AddPushpin(item)
		{
			var lattitude = item.get_item("Lattitude");
			var longitude = item.get_item("Longitude");
			var Company = item.get_item("Title");
			var Address = item.get_item("Address");
			var Logo = item.get_item("LogoURL");
			var PhoneNumber = item.get_item("PhoneNumber");
			var Website = item.get_item("Website");
			var HeadOfficer = item.get_item("HeadOfficer");
			
			var loc = new Microsoft.Maps.Location(lattitude, longitude);
			
			var descriptionValue = "<div class=\"infobox-logo\" style=\"float:right; padding-left: 5px; margin-top:-30px;\"><img height=\"100px\" width=\"100px\" src='" + Logo + "'/></div>";
			descriptionValue += "<div class=\"infobox-desc\" ><span class=\"infobox-info-title\">Address: </span>" + Address + "<br /><span class=\"infobox-info-title\">Phone Number: </span>" + PhoneNumber;
			if (Website != null){
				descriptionValue += "<br /><span class=\"infobox-info-title\">Website: </span><a href=\"" + Website + "\" >" + Website + "</a>"}
			if (HeadOfficer != null){
				descriptionValue += "<br /><span class=\"infobox-info-title\">Head Officer: </span>" + HeadOfficer + "</div>"}
							
			var pin = new Microsoft.Maps.Pushpin(loc , null); 
			map.entities.push(pin); 
			map.entities.push(new Microsoft.Maps.Infobox(loc, {title: Company, description: descriptionValue, pushpin: pin}));
			Microsoft.Maps.Events.addHandler(pin, 'click', CenterViewOnSelectedPin(lattitude, longitude));
		}
		
		function CenterViewOnSelectedPin(latitude,longitude)
		{
			map.setView({center:new Microsoft.Maps.Location(latitude, longitude)});
		}
		
		function deleteAllPushpin()
		{
		    for(var i=map.entities.getLength()-1;i>=0;i--) 
		    {
				var pushpin= map.entities.get(i); 
				if (pushpin instanceof Microsoft.Maps.Pushpin) { 
					map.entities.removeAt(i);  
				};
		    }
		}
		
		function OnChange(dropdown)
		{
			var myindex  = dropdown.selectedIndex
			var SelValue = dropdown.options[myindex].value
			if (SelValue == "Worldwide")
			{
				GetAllItems(listTitle);
			}
			else
			{
				deleteAllPushpin();
				GetItemsbyCountry(listTitle, SelValue);			
			}
		}
		
		function AddCountryToDropDownList(item)
		{
			countrylist = document.getElementById('countrylist');
			
			var country = document.createElement("option");
			country.text = item.get_item("Country");
			country.value = item.get_item("Country");
			
			if (!optionExists(country.value, countrylist)){
			  countrylist.options.add(country);
			}			
		}
		
		function optionExists ( needle, haystack )
		{
			var optionExists = false,
				optionsLength = haystack.length;
			while ( optionsLength-- ){
				if ( haystack.options[ optionsLength ].value === needle ){
					optionExists = true;
					break;
				}
			}
			return optionExists;
		}

        window.parent.onload = getMap;
    </script>
</head>
<body>
    <div id='myMap' style="position:absolute;width:100%;height:500px;"></div>
	<div id='countrylistdiv' style="position:relative;padding-top:50px;padding-left:10px;">
		<select name="countrylist" id="countrylist" onchange='OnChange(this.form.countrylist);'>
			<option selected="true">Worldwide</option>
		</select>
	</div>
</body>
</html>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Integrate BingMap into HTML page.