Map picker from SKUID

  • 2
  • Question
  • Updated 3 years ago
  • Answered
How can a map lat/long picker like this example http://jsfiddle.net/heera/X5r8r/515/ be included in a SKUID page and feed back the lat/long to fields in a model. I guess this could be done with a snippet but haven't succeeded in getting it right.
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb

Posted 5 years ago

  • 2
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
This is totally doable.

Here is the XML for a starter page to work with, based on the Case object. It assumes that there are two Custom Fields on the Case object, of type Number: Latitude__c, Longitude__c. Other than that, only standard fields are used.

Gist: NewCaseWithMap.xml

Here are screenshots of the Page in action, and the Page Composer:





As you can see from the Page Composer screenshot or XML, the basic page layout is a Field Editor on a new Case record, with a Custom Component called "LocationPicker" that lets a user pick a point on a map, and dumps that data into custom fields on a new record in the Case Model.

We have 3 JavaScript Resources that make the Map functionality work:

1. External resource to load the Google Maps API. URL: https://maps.google.com/maps/api/js?s...

2. Inline JavaScript Resource to load the JQuery UI Map plugin that Peter posted in his JSFiddle. Basically, copy everything from "eval" on in Peter's JSFiddle.

3. Inline Component Resource that defines the "LocationPicker" Custom Skuid Component. This contains the following:



var element = arguments[0],
$ = skuid.$;

var STARTING_LAT_LNG = new google.maps.LatLng(53.307697, -6.222317);
var ZOOM = 15;
var MAP_WIDTH = '450px';
var MAP_HEIGHT = '400px';

var model = skuid.model.getModel('Case');
var row = model.getFirstRow();
var LatitudeField = 'Latitude__c';
var LongitudeField = 'Longitude__c';

element.css({width:MAP_WIDTH,height:MAP_HEIGHT})
.gmap({'center': STARTING_LAT_LNG, zoom: ZOOM})
.bind('init', function(event, map) {
$(map).click( function(event) {
var lat=event.latLng.lat();
var lng=event.latLng.lng();
console.log('New Latitude: ' + lat + ', Longitude: ' + lng);

// Update our row's Latitude and Longitude Field with the new values
var updates = {};
updates[LatitudeField] = lat;
updates[LongitudeField] = lng;
model.updateRow(row,updates);

// Force any registered lists in our page to update
// (this will get our Field Editor to show changes)
$.each(model.registeredLists,function(){
$.each(this.renderedItems,function(){
$.each(this.fields,function(){
if (this.id === LatitudeField || this.id===LongitudeField) {
this.render();
}
});
});
});
});
});


Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
Thanks Zach, I've adopted it to my model and it works perfect. This will save lots of time for a customer that cut and pastes this info from a separate map windows today.
Photo of Lou M.

Lou M.

  • 318 Points 250 badge 2x thumb
Hi Zach,

I was hoping I could get a little more insight into this. Right now, we're trying to add a map to our Properties page that will allow us to use our address as a starting location and pick a property elsewhere to see the distance. Is this possible?

Thank you
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
The first part is really what Zach's solution does.  Mapping a particular address. 

Your second requirement is going to happen within your mapping provider.  Not really within Skuid.  There may be ways of configuring the map include so that it is in "directions" mode - but that's going to be done within the provider. 
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Salesforce supports distance calculations using SOQL.  You should be able to setup a rest connection to your Salesforce org. to pass in your query.  Then setup a Model Service to connect through Skuid.  Here's the details on the supported SOQL.

https://developer.salesforce.com/docs/atlas.en-us.soql_sosl.meta/soql_sosl/sforce_api_calls_soql_geo...
Photo of Lou M.

Lou M.

  • 318 Points 250 badge 2x thumb
Awesome, thanks Bill! This will be very helpful.