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”.
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.
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”
und erstellt ein neues Listenformular. Wie und was ihr in einem Formular anpassen könnt seht ihr in meinem anderen Blog Beitrag.
Nach dem Anlegen bearbeiten wir das Formular im Erweiterten Modus.
Nun fügen wir ein neues Feld für die Suche ein:
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:
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.
(Die credentials bekommt ihr hier).
Nach der Anmeldung klickt über “My account” auf “Create or view keys”.
Danach auf “Click here to create a new key.” und füllt das Formular anhand euren Voraussetzungen aus.
Schon hab ihr ihn. Euren eigenen BingMaps credentials key.
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 😉
Ein letzter Punkt für die Integration sind die folgenden zwei Zeilen im Skript:
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.
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!
