Overview
SharePoint 2013 introduces functionality to integrate location information and maps in SharePoint lists and location-based web and mobile apps for SharePoint with the following capabilities:
- new field type named Geolocation that enables you to annotate SharePoint lists with location information. The built-in Geolocation field can render only with Bing Maps. However, you can create a custom field by using the Geolocation field as a parent field type, for example see my blog post about using Google Maps as map service.
- Map View that displays a map (with data obtained from the Bing Maps service), using longitude and latitude entries from the Geolocation field type
Client-side rendering for Map List View in SharePoint 2013
Regarding Map View, SharePoint 2013 utilizes client side rendering framework for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript. There is already predefined rendering template in SharePoint 2013 for Binq Maps service that is used when Map View is created, for more details see Create a map view for the Geolocation field in SharePoint 2013.
Map List View in SharePoint 2010
But what about SharePoint 2010? Let’s discuss one approach related with customizing List View for XSLTListViewWebPart (XLV) . So, in proposed solution geographical locations are stored in Custom List and custom View is used to render data on Map using Google Maps service For example, list items
will be represented in Map View as shown below
Implementation of Map List View in SharePoint 2010
As was noted earlier for storing geographical location on a map and visualizing it in Map View we will define Custom List named GeoMap List.
GeoMap Content Type
For storing geographical locations we define the following Content Type
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
<?xml version="1.0" encoding="utf-8"?> | |
<Elements xmlns="http://schemas.microsoft.com/sharepoint/"> | |
<!– Parent ContentType: Item (0x01) –> | |
<ContentType ID="0x010087e1abb3659f42f6ad024894ec514f93" | |
Name="GeoMap" | |
Group="GeoMap" | |
Description="GeoMap Content Type" | |
Inherits="TRUE" | |
Version="0"> | |
<FieldRefs> | |
<FieldRef ID="{F3252F03-F69E-40fb-91F7-8BD364D0882B}" Name="MapAddress1"/> | |
<FieldRef ID="{FBCDD54F-21AA-4eab-A376-4BC531FF264F}" Name="MapAddress2"/> | |
<FieldRef ID="{638D5C28-6DFC-4642-AC7C-5377E478F5CC}" Name="MapCity"/> | |
<FieldRef ID="{1966B506-0642-4b00-8B56-5B872C725B6A}" Name="MapState"/> | |
<FieldRef ID="{594036C6-29C6-4c71-A271-6721C171E675}" Name="MapZip"/> | |
<FieldRef ID="{6A85673B-2EE1-483d-AD5D-57161DFE8237}" Name="MapCountry"/> | |
<FieldRef ID="{EBFA40F7-A21A-4f4c-B941-036F5A360E0C}" Name="MapLatitude"/> | |
<FieldRef ID="{ADDBDAC0-123C-46d5-9BA0-0D7EA29E5711}" Name="MapLongitude"/> | |
<FieldRef ID="{CDF90965-628A-4cf0-91E3-D6F3DBE233CC}" Name="MapAdditionalInfo"/> | |
</FieldRefs> | |
</ContentType> | |
<Field Type="Text" DisplayName="Address1" Required="FALSE" ID="{F3252F03-F69E-40fb-91F7-8BD364D0882B}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapAddress1" Name="MapAddress1" Group="GeoMap" /> | |
<Field Type="Text" DisplayName="Address2" Required="FALSE" ID="{FBCDD54F-21AA-4eab-A376-4BC531FF264F}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapAddress2" Name="MapAddress2" Group="GeoMap" /> | |
<Field Type="Text" DisplayName="City" Required="FALSE" ID="{638D5C28-6DFC-4642-AC7C-5377E478F5CC}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapCity" Name="MapCity" Group="GeoMap" /> | |
<Field Type="Text" DisplayName="State" Required="FALSE" ID="{1966B506-0642-4b00-8B56-5B872C725B6A}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapState" Name="MapState" Group="GeoMap" /> | |
<Field Type="Text" DisplayName="Zip" Required="FALSE" ID="{594036C6-29C6-4c71-A271-6721C171E675}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapZip" Name="MapZip" Group="GeoMap" /> | |
<Field Type="Text" DisplayName="Country" Required="FALSE" ID="{6A85673B-2EE1-483d-AD5D-57161DFE8237}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapCountry" Name="MapCountry" Group="GeoMap" /> | |
<Field Type="Number" DisplayName="Latitude" Required="TRUE" ID="{EBFA40F7-A21A-4f4c-B941-036F5A360E0C}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapLatitude" Name="MapLatitude" Group="GeoMap" /> | |
<Field Type="Number" DisplayName="Longitude" Required="TRUE" ID="{ADDBDAC0-123C-46d5-9BA0-0D7EA29E5711}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapLongitude" Name="MapLongitude" Group="GeoMap" /> | |
<Field Type="Note" DisplayName="Additional Info" Required="FALSE" EnforceUniqueValues="FALSE" NumLines="6" RichText="FALSE" ID="{CDF90965-628A-4cf0-91E3-D6F3DBE233CC}" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="MapAdditionalInfo" Name="MapAdditionalInfo" Group="GeoMap" /> | |
</Elements> |
GeoMap List
GeoMap List is based on Generic List with GeoMap Content Type and with custom View
XSLT stylesheet for Map List View
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
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" | |
xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" | |
version="1.0" exclude-result-prefixes="xsl msxsl ddwrt x d asp __designer SharePoint ddwrt2" | |
xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" | |
xmlns:asp="http://schemas.microsoft.com/ASPNET/20" | |
xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" | |
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" | |
xmlns:msxsl="urn:schemas-microsoft-com:xslt" | |
xmlns:SharePoint="Microsoft.SharePoint.WebControls" | |
xmlns:ddwrt2="urn:frontpage:internal"> | |
<xsl:import href="/_layouts/xsl/main.xsl"/> | |
<xsl:output method="html" indent="no"/> | |
<xsl:template match="View[@BaseViewID='80']" mode="full" ddwrt:ghost="always"> | |
<tr class="ms-viewheadertr"></tr> | |
<tr> | |
<td> | |
<div id="map_canvas" style="width:100%; height:480px"></div> | |
</td> | |
</tr> | |
<xsl:apply-templates mode="footer" select="." /> | |
</xsl:template> | |
<xsl:template name="GeoMapViewOverride" mode="RootTemplate" match="View[List/@TemplateType=10488]" ddwrt:dvt_mode="root"> | |
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> | |
<script src="/_layouts/spgeomap.js"></script> | |
<script type="text/javascript"> | |
ExecuteOrDelayUntilScriptLoaded(initSPGeoMap, "sp.js"); | |
</script> | |
<xsl:call-template name="View_Default_RootTemplate"/> | |
</xsl:template> | |
</xsl:stylesheet> |
GeoMap rendering control
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
SP.GeoMapControl=function() | |
{ | |
var _listId; | |
this.Init=function(listId) | |
{ | |
_listId = listId; | |
loadMapData(function(entries){ | |
if (entries==null) | |
{ | |
alert('No Map data was found'); | |
} | |
else | |
{ | |
initMapControl(entries); | |
} | |
}); | |
} | |
function initMapControl(mapEntries, params) { | |
var mapOptions = { | |
center: new google.maps.LatLng(–34.397, 150.644), | |
zoom: 8, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}; | |
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); | |
var infowindow = new google.maps.InfoWindow(); | |
var bounds = new google.maps.LatLngBounds; | |
var i,marker; | |
for (i = 0; i < mapEntries.length; i++) { | |
var mapEntry = mapEntries[i]; | |
var pos = new google.maps.LatLng(mapEntry.lat,mapEntry.lng); | |
marker = new google.maps.Marker({ | |
map: map, | |
position: pos | |
}); | |
google.maps.event.addListener(marker, 'click', (function(marker, i) { | |
return function() { | |
infowindow.setContent(mapEntries[i].content); | |
infowindow.open(map, marker); | |
} | |
})(marker, i)); | |
bounds.extend(pos); | |
} | |
map.fitBounds(bounds); | |
} | |
function loadMapData(fnCallback) { | |
var context = new SP.ClientContext.get_current(); | |
var web = context.get_web(); | |
var listMap = web.get_lists().getById(_listId); | |
var viewXml = '<View><RowLimit>1200</RowLimit></View>'; | |
var query = new SP.CamlQuery(); | |
query.set_viewXml(viewXml); | |
var mapItems = listMap.getItems(query); | |
context.load(mapItems); | |
context.add_requestSucceeded(onMapLoaded); | |
context.add_requestFailed(onMapFailure); | |
context.executeQueryAsync(); | |
function onMapLoaded() { | |
var mapsEntries=[]; | |
var count=mapItems.get_count(); | |
for (i=0 ; i < count; i++) | |
{ | |
var mapItem=mapItems.itemAt(i); | |
var dataValues=mapItem.get_fieldValues(); | |
var mapContent = ''; | |
if(dataValues['MapAdditionalInfo'] != null) | |
mapContent = dataValues['MapAdditionalInfo']; | |
mapsEntries.push({ mapId: dataValues['ID'], title: dataValues['Title'], lat: dataValues['MapLatitude'], lng: dataValues['MapLongitude'],content: mapContent}); | |
} | |
fnCallback(mapsEntries); | |
} | |
function onMapFailure() { | |
fnCallback(null); | |
} | |
} | |
}; | |
function initSPGeoMap() { | |
var mapCtl = new SP.GeoMapControl(); | |
mapCtl.Init(ctx.listName); | |
} |
References
- Google Maps JavaScript API v3
- How to: Customize the Rendering of a Field on a List View in SharePoint 2010 on MSDN
- How to: Customize a list view in apps for SharePoint using client-side rendering on MSDN