Monday, December 16, 2013

How to get coordinates for geolocation field (JavaScript solution)

We all probably now know about the new cool feature in SharePoint - geolocation field, a new field that allows you to specify a location for a SharePoint item.

The problem with this field is it is little complicated to set its value. Out of the box it allows you to specify its value by using your current location or by manually setting longitude and latitude, probably something you don't know. So to enable users to specify the location in a more friendly way you had to create a custom field that extends the geolocation field. This is not an option in SharePoint Online.

In this post I will show  how you can provide your users with a way to search for a location in SharePoint Online by simply using a little bit of JavaScript and Microsoft.Maps API, which contains the core types of the Bing Maps AJAX Control. To learn more about this API be sure to visit Microsoft.Maps API Reference and Maps AJAX control examples, for me this is a really powerful and easy to use way to create geolocation solutions on web.

For start I will create a list for my geolocation field. It is a simple list with a Title, Description and a geolocation field I called Location. The list will be called "Wonders of the World", so you can probably guess what it will contain. If you need help for adding a geolocation field to the list be sure to check my Adding geolocation field to SharePoint Online post.

If you try to add a new item to this list  you will get a form that looks like this:

So here you can see how your location field looks like by default. We'll first need to change it so we can more easily modify it. To do this we will need SharePoint Designer.

So open your SP Online site in your SP Designer, navigate to Lists and Libraries and select the list with your location field. Now we will create a custom NewForm (in this post I will show you this customization on a NewForm , but this  also applies on the EditForm).
At the Forms section in Designer select New and in the new list form wizard select New item form as a type of a form to create and check the box to set it as a default form.





Now when you go back to your list and try to add an item, your form will look like this:

This is great because now on the form I have two input elements for longitude and latitude that I can easily access from JavaScript.

We will need to find the id's for this input elements. You can do this by using Developer Tools in Internet Explorer, press F12 to start the developer tools and use the DOM explorer to examine those input elements, they will look something like this:

So once you locate the input elements write down their id values, we are going to need them later.

Now let's get back to our SharePoint Designer and in it examine our new CustomNewForm.  Search in it  for you location field, you should find it in a row that looks like this:



Under this row we will insert our own HTML code that we will need in our custom search for locations. So insert :
     
     

Save the change and look at your form from SharePoint, it should look like this

You can see we have added an input element where users can insert search terms or  an address for a location. We have also added a div element which will be a placeholder for displaying a location on a map.
And now for the JavaScript. Go back to the CustomNewForm in your SharePoint Designer. Locate the following line <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> and  immediately under that line add the following Javascript code (You will probably have to be in Advanced mode). Be sure to change the values for longitude and latitude input field ID, and for the Bing maps key in the places I specified. Also in production you will probably want to extract this script to a separate file, but for demo purposes I am adding it directly on the page. Here is the code:



Save the page and you are ready to test it, go back to your list and start creating a new item. Enter a search term for your location and press the search button we created. If everything is OK you will get something like this:




You get a representation of your location on a Bing map and the longitude and latitude fields for your geolocation field are set, so when you save your item you will also save the location you see. Also the you can drag the pushpin  (the DragHandler function in the script) so you can simply adjust the position.

I won't go into details of my code as it is pretty straightforward, but if there are any questions feel free to contact me.



7 comments:

  1. Looks great Borislav, although once I enter the HTML, save and view the page/form I receive the following:

    Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Microsoft SharePoint Foundation-compatible HTML editor such as Microsoft SharePoint Designer. If the problem persists, contact your Web server administrator.


    Correlation ID:943adc9c-e0b3-1000-a493-9089ac989d2d

    If I remove the DIV HTML code then the form returns to normal.

    ReplyDelete
    Replies
    1. Hi Mate,

      Looking into this myself, but an having the 'Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Microsoft SharePoint Foundation-compatible HTML editor such as Microsoft SharePoint Designer. If the problem persists, contact your Web server administrator.' Error.

      Out of question, how did you resolve this? I am a little stumped is all.

      Many thanks in advance.

      Delete
    2. This comment has been removed by the author.

      Delete
  2. Hi Borislav. I managed to get the form components to be accepted. I tried showing my HTML but the message box wont accept it.

    I added the info to the script, ID's, Map Key and nothing. I simply get a map of Seattle/Belleville even though I inserted my home lat. and long.

    Carl

    ReplyDelete
  3. Forget my comments Borislav. It actually works great. Thanks a lot!! Great Job.

    CW

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Thanks for this post Queader! Now I've got to get on and implement more thank you.
    gclub online
    goldenslot
    สูตรบาคาร่า

    ReplyDelete