Last active
September 25, 2015 15:08
-
-
Save Na0mir/28a98c33725f69489883 to your computer and use it in GitHub Desktop.
Integrate BingMap into HTML page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment