Bringing Map functionality into SharePoint 2010: Rendering Map List View

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 GeoMapDefaultView

will be represented in Map View as shown below

GeoMapView

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

GeoMap List

GeoMap List is based on Generic List with GeoMap Content Type and with custom View

XSLT stylesheet for Map List View

GeoMap rendering control

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
About these ads

6 thoughts on “Bringing Map functionality into SharePoint 2010: Rendering Map List View

  1. This is what I was looking for on our intranet. But is it possible to get it to map using Post Codes or Zip Codes? I haven’t used google map api’s before, so not really sure what to do.

    Plus is it possible to map to an existing list?
    Thanks

    • Andy,
      regarding displaying location based on Post Codes or Zip Codes.
      GeoMap List described in this solution actually contains field named MapZip for storing Zip Codes, but currently this kind of functionality for displaying location based on Zip Codes is not yet implemented. It means that only latitude and longitude are currently used for that purpose.
      But the good news that it could be implemented using the Client-side Geocoder in the Google Maps API.

      Regarding mapping to existing list, this is actually a good question. Unfortunately not yet, but it will be implemented.

  2. Pingback: Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion | Yet Another SharePoint Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s