Put it on a Map!Using the new Location and Map Features in SharePoint 2013

Danny Jessee#SPSVBJanuary 11, 2014

Gold Sponsors

Platinum Sponsors

Silver Sponsors

7:30 - 8:30 - Registration(Lobby) Breakfast (Sponsor Hall)8:30 - 8:45 - Welcome 9:00 - 10:15 – 1st Sessions10:30 - 11:45 – 2nd Sessions11:45 - 12:30 – Lunch (Sponsor Hall)12:30 - 1:45 - 3rd Sessions2:00 - 3:15 – 4th Sessions3:30 - 4:45 – 5th Sessions5:00 - 5:30 - Closing & Giveaways

Welcome to SharePoint Saturday

Virginia BeachJan 11, 2014

We’re hiring!fulcrumco.com/careers

Passed examsSharePoint 201370-331, 70-33270-488, 70-489

djessee@fulcrumco.com

Sr. SharePointDeveloperFulcrumWashington, DC metro area

Who Am I?

Photo courtesy Marie Sly | mariesly.com

@dannyjessee

Agenda What is geolocation? Geolocation solutions (pre-SharePoint 2013) Geolocation data in SharePoint 2013 Geolocation for developers Custom geolocation field type using the new client-side rendering framework

Demo time!

What is geolocation?

What is geolocation? Location-based metadata Typically a point location (latitude/longitude)

Useful for: Current user’s GPS location Associating content with a place (on a map) Discovering content based on proximity

Geolocation visualized

Geolocation visualized

Virginia Beach, VA

36° 51' 2" N,75° 58' 40" W

36.8506° N,75.9779° W

36.8506°, -75.9779°

Geolocation solutionsPre-SharePoint 2013

Geolocation solutions pre-2013 Custom development required for any mapping Custom list with Latitude, Longitude “Number” site columns No out-of-the-box mapping provider support No native way to obtain user’s GPS location

Geolocation solutions pre-2013 Pros

Freedom to choose mapping provider Complete implementation flexibility

Cons Serious amounts of custom code required for any map integration

Images courtesy Tim Ferro | @timferro | timferro.com

Geolocation data in SharePoint 2013

Geolocation data in SharePoint 2013 New Geolocation field type Allows for a user’s current GPS coordinates to be obtained automatically*

Also allows for manual entry of decimal latitude and longitude coordinates

Automatically renders placemarks on a Bing map

* User’s browser must support W3C Geolocation API

Geolocation prerequisites Not quite “out-of-the-box” SQLSysClrTypes.msi must be installed on all frontends (from SQL Server Feature Pack) Installs components that implement the new geometry, geography, and

hierarchy ID types in SQL Server 2008 2008 R2: http://

www.microsoft.com/en-us/download/details.aspx?id=26728 2012: http://www.microsoft.com/en-us/download/details.aspx?id=29065

Bing Maps API Key (free for developers) http://www.bingmapsportal.com

Get a Bing Maps API key An API key allows your application to make calls that use the Bing Maps API Allows Bing Maps to track your application’s API usage

Two types of keys: Trial or Basic Trial key: 90 day evaluation period and must not exceed 10,000

transactions of any type in any 30 day period Basic key: used for non-trial applications that do not exceed 50,000

transactions of any type within a 24 hour period Enterprise options available for large-scale applications

Get a Bing Maps API key

Take note of theAPI key value:

Set the Bing Maps API key At the farm level using PowerShell:

Set-SPBingMapsKey -BingKey "<Value>"

Can also be set at the individual site level using PowerShell or CSOM Have to use CSOM for Office 365 web.AllProperties["BING_MAPS_KEY"] = "<Value>";

Creating a site column You cannot create a Geolocation site column through the UI Don’t ask me why!

Must create via code/script (using XML): <Field ID="{GUID}" Name="Geolocation" Type="Geolocation" />

Add Geolocation column to lists Once the site column has been created, it can be added to lists through SharePoint Designer or the browser

Geolocation data in SharePoint 2013 Add list item

Geolocation data in SharePoint 2013 Add list item

Geolocation data in SharePoint 2013 Add list item – use my current location

Geolocation data in SharePoint 2013 View list item

Geolocation data in SharePoint 2013 Create a Map View for multiple list items

Geolocation data in SharePoint 2013 Map View

Geolocation data in SharePoint 2013 Blue placemark – selected item

Geolocation data in SharePoint 2013 Gray placemark – item with no geolocation value

Geolocation data in SharePoint 2013 Mouse over a placemark – view item hover card

Mobile geolocation experience Less than ideal (on an iPhone at least)

Have to “switch to pc view” to “Use my location” in a new list item

Mobile geolocation experience Less than ideal (on an iPhone at least)

Same with viewing list items or a Map view of the list

But we’re developers!Why this out-of-the-box focus?

Don’t worry, we’ll get to coding… In my humble opinion: A “good” SharePoint developer knows when to use out-of-the-box capabilities to address a customer’s requirements

Resist the urge to write custom code to do everything

Geolocation for developersSharePoint 2013

Geolocation for developers Using CSOM to create a Geolocation field

ClientContext context = new ClientContext(siteURL); List oList = context.Web.Lists.GetByTitle(listName); oList.Fields.AddFieldAsXml("<Field Type='Geolocation' DisplayName='Geolocation' />", true, AddFieldOptions.AddToAllContentTypes); oList.Update(); context.ExecuteQuery();

Geolocation for developers Write data to a Geolocation field

Option 1: use FieldGeolocationValue

FieldGeolocationValue loc = new FieldGeolocationValue(); loc.Latitude = (double)36.85; loc.Longitude = (double)-75.98; item["Geolocation"] = loc; item.Update();

Geolocation for developers Write data to a Geolocation field

Option 2: well-known text (WKT) format: POINT(LON LAT) Yes, longitude BEFORE latitude (counterintuitive)!

item["Geolocation"] = "POINT(-75.98 36.85)"; item.Update();

Geolocation for developers Create a map view using CSOM

Mapviewtemplate.js is an out-of-the-box file in SharePoint 2013 (_layouts/15/mapviewtemplate.js)

ClientContext context = new ClientContext(siteURL); List oList = context.Web.Lists.GetByTitle(listName);ViewCreationInformation viewCreationinfo = new ViewCreationInformation();viewCreationinfo.Title = "My Map View";viewCreationinfo.ViewTypeKind = ViewType.Html;View oView = oList.Views.Add(viewCreationinfo);oView.JSLink = "mapviewtemplate.js";oView.Update();context.ExecuteQuery();

DemoCreating a Geolocation list, populating it programmatically, and adding a map view

Geolocation for on-prem developers As with all field types in SharePoint, the Geolocation field type can be extended using custom field types with client-side rendering New in SharePoint 2013: use the client-side rendering framework via

the JSLink property Points to a custom JavaScript file that defines the rendering of the

custom field type

This is your only option if you want to use a mapping provider other than Bing Maps

Custom Geolocation field type Requires a farm solution containing:

1. Class for the custom field type Must inherit from SPFieldGeolocation Contains two constructors Overrides the JSLink property

2. XML definition for the custom field type Deployed to {SharePointRoot}\Template\XML

3. JavaScript file for the rendering logic of the custom field type Deployed to {SharePointRoot}\Template\LAYOUTS

Custom Geolocation field type XML file serves the following purposes:

Specifies the type name and parent type for the field type Specifies the full class name for the field type

DJSP.HEREMapField, $SharePoint.Project.AssemblyFullName$ Provides additional attributes for the field type

UserCreatable, ShowOnListCreate, ShowOnSurveyCreate, ShowOnDocumentLibraryCreate, etc.

Custom Geolocation field type JavaScript file serves the following purposes:

Creates a template for the field when it is displayed Registers the template Provides the rendering logic for the field type when displayed

Nokia HERE Platform

Using the HERE platform Sign up at https://developer.here.com

Using the HERE platform Provide contact info and a URL, and you’re set!

Using the HERE platform Must register and load the HERE JavaScript APIs: http://js.api.here.com/se/2.5.3/jsPlacesAPI.js http://js.api.here.com/se/2.5.3/jsl.js nokia.Settings.set("app_id", YOUR_APP_ID); nokia.Settings.set("app_code", YOUR_APP_CODE);

Unlike other samples online, you must explicitly load jsPlacesAPI.js in addition to jsl.js in order to use Nokia’s geocoding API See blog post at http://dannyjessee.com/blog

DemoCustom field type control for HERE maps

Notes about geolocation and search Geolocation columns are not indexed Cannot create a managed property of type Geolocation

No proximity (bounding box/point-radius) search

Conclusion SharePoint 2013 introduces a new Geolocation field type that enables you to annotate SharePoint lists with location information

Uses Bing Maps (requires API key) to display placemarks for list items on a map view Can be extended on-prem to use other mapping providers with

SharePoint 2013’s new client-side rendering framework

Still leaves room for lots of custom development solutions!

Questions?

Gold Sponsors

Platinum Sponsors

Silver Sponsors

7:30 - 8:30 - Registration(Lobby) Breakfast (Sponsor Hall)8:30 - 8:45 - Welcome 9:00 - 10:15 – 1st Sessions10:30 - 11:45 – 2nd Sessions11:45 - 12:30 – Lunch (Sponsor Hall)12:30 - 1:45 - 3rd Sessions2:00 - 3:15 – 4th Sessions3:30 - 4:45 – 5th Sessions5:00 - 5:30 - Closing & Giveaways

Welcome to SharePoint Saturday

Virginia BeachJan 11, 2014

Thank you!@dannyjesseedjessee@fulcrumco.comdannyjessee.com/blog