In diesem Blogpost möchte ich euch zeigen wie man eine Kartenintegration einer Liste oder Kalender hinzufügt.
Es wird anhand einem Eventkalender demonstriert.

Als erstes erstellen wir einen Kalender mit dem Titel “Eventkalender”.

Geolocation field bing maps integration (de)_1

 

Nun fügen wir die Geolaction Spalte dem Kalender mittels eines einfachen Powershellskripts hinzu:

Hinweiß: Nennt die Spalte nicht Ort, da diese Spalte bereits im Kalender vorhanden ist. Dies führte zumindest bei mir zu Problemen.

Snippet:

Add-PSSnapin Microsoft.SharePoint.PowerShell
 
$web = Get-SPWeb "http://sp13/events"
$list = $web.Lists["Eventkalender"]
$list.Fields.AddFieldAsXml(
 "<Field Type='Geolocation' DisplayName='Wo'/>",
 $true,
 [Microsoft.SharePoint.SPAddFieldOptions]::AddFieldToDefaultView)

Nun haben wir schon unser Feld.

Geolocation field bing maps integration (de)_2

 

Da das eingeben von Längen und Breitengrad nicht wirklich nutzerfreundlich ist, erweitern wir dies über ein Suchfeld.

Dazu öffnet man den Kalender im SharePoint Designer über “Liste bearbeiten”

Geolocation field bing maps integration (de)_3

 

und erstellt ein neues Listenformular. Wie und was ihr in einem Formular anpassen könnt seht ihr in meinem anderen Blog Beitrag.

Geolocation field bing maps integration (de)_4

Geolocation field bing maps integration (de)_5

 

 

Nach dem Anlegen bearbeiten wir das Formular im Erweiterten Modus.

Geolocation field bing maps integration (de)_6

 

Nun fügen wir ein neues Feld für die Suche ein:

Geolocation field bing maps integration (de)_7

 

 

Snippet:

<tr>
	<td>
	</td>
	<td>
		<div>
			<input id="txtLoction" placeholder="Wo ist das Event?" type="text">
			<input onclick="GetMap();return false;" src="/_layouts/15/images/SEARCHBOX32.png" type="image">

			<div id="mapDiv" style="position: relative;">
			</div>
		</div>
	</td>
</tr>

 

 

Der Text im Suchfeld kann nach Belieben abgeändert werden. (Wo ist das Event?)
Danach speichern wir die Form und schauen uns das Ergebnis einmal an:

Geolocation field bing maps integration (de)_8

 

Wir gehen nun noch einmal zurück in unsere CustomNewForm.aspx und erweitern diese um das nachfolgende Skript.
Dieses dient dazu, dass wir nun auch wirklich Suchen können. Das Skript wird direkt nach “PlaceHolderMain” eingefügt.

Snippet:

<script src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1" type="text/javascript"></script><script src="https://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20150610192009.20/js/en-us/veapicore.js" type="text/javascript"></script>
<script type="text/javascript">
var map=null;
var pin=null;
var txtLongitude=null;
var txtLatitude=null;
var txtLocation=null;
 
function GetMap() {
 if(!txtLongitude){
 txtLongitude=document.getElementById("ctl00_ctl39_g_bb6e4e14_f4b9_4050_9de7_0b45f0b970ce_ff81_ctl00_ctl00_GeolocationFieldLongitude");
 }
 if(!txtLatitude){
 txtLatitude=document.getElementById("ctl00_ctl39_g_bb6e4e14_f4b9_4050_9de7_0b45f0b970ce_ff81_ctl00_ctl00_GeolocationFieldLatitude");
 }
 if(!txtLocation){
 txtLocation=document.getElementById("txtLoction");
 }
 
 if (!map) {
 map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
 {
 credentials: "***************************************",
 center: new Microsoft.Maps.Location(47.5, -122.3),
 zoom: 9,
 height: 400,
 width: 400,
 showDashboard: false,
 showScalebar: false
 });
 }
 Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchModuleLoaded });
}
 
 
function searchModuleLoaded() {
 var searchManager = new Microsoft.Maps.Search.SearchManager(map);
 
 var geocodeRequest = {where : txtLocation.value, count: 1, callback: geocodeCallback, errorCallback: errCallback };
 searchManager.geocode(geocodeRequest);
}
 
function geocodeCallback(geocodeResult, userData) {
 
 if (geocodeResult.results[0]) { 
 var value = geocodeResult.results[0];
 var location = new Microsoft.Maps.Location(value.location.latitude, value.location.longitude);
 
 pin = new Microsoft.Maps.Pushpin(location, { text: '', draggable: true });
 map.setView({ center: location, zoom: 16 });
 map.entities.push(pin);
 
 Microsoft.Maps.Events.addHandler(pin, 'drag', DragHandler);
 
 
 txtLongitude.value = location.longitude.toString().replace(/./g, ',');
 txtLatitude.value = location.latitude.toString().replace(/./g, ',');
 
 };
}
function errCallback(geocodeRequest) {
 
 alert("An error occurred.");
}
 
function DragHandler(e) {
 var loc = e.entity.getLocation();
 txtLongitude.value = loc.longitude.toString();
 txtLatitude.value = loc.latitude.toString();
}
 
</script>

Wichtig ist hier, dass in der Funktion GetMap() der Wert für “txtLongitude”, “txtLatitude” und credentials passen müssen, sodass zum einen die Werte der Suche in die Felder eingetragen werden und dass überhaupt die Maps freigeschaltet sind.

 

Geolocation field bing maps integration (de)_9

(Die credentials bekommt ihr hier).

Nach der Anmeldung klickt über “My account” auf “Create or view keys”.

Geolocation field bing maps integration (de)_15

Danach auf “Click here to create a new key.” und füllt das Formular anhand euren Voraussetzungen aus.

Geolocation field bing maps integration (de)_16

 

Schon hab ihr ihn. Euren eigenen BingMaps credentials key.

Geolocation field bing maps integration (de)_17

 

Wenn Ihr euren eigenen Credentials-Wert habt könnt ihr diesen mit dieser Powershellzeile für eure Webanwendung setzen:

Set-SPBingMapsKey -BingKey "<Eigener Key verwenden>"

Die Werte für “txtLongitude” & “txtLatitude” könnt ihr euch holen, wenn ihr ein neues Element erstellt und über die Developertools die Felder untersucht. Tragt im Skript eure Werte ein und nicht meine 😉

Geolocation field bing maps integration (de)_13

 

Ein letzter Punkt für die Integration sind die folgenden zwei Zeilen im Skript:

Geolocation field bing maps integration (de)_10

 

Diese ersetzen den “.” durch ein “,” sodass ein deutsches SharePoint auch die Werte mag.
Speichert nun zum Abschluss die Form.

Danach könnt ihr einfach etwas in der Suche eingeben, auf den Button klicken (oder per Enter) und ihr erhaltet den Ort.

Geolocation field bing maps integration (de)_11

 

Ihr könnt auch die Nadel per Drag und Drop ziehen. Achtet jedoch darauf, dass dann die Werte aus Länge und Breite wieder mit einem “.” versehen werden. Zum Speichern müsst ihr dann den “.” händisch in ein “,” ändern.

Danach habt ihr es! Eure Liste / Kalender mit einer Kartenintegration.
Meiner Meinung für einen Eventkalender eine sehr tolle Erweiterung!

Geolocation field bing maps integration (de)_12

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here