Нанесение данных списка SharePoint на карту листовок - PullRequest
Новая
       82

Нанесение данных списка SharePoint на карту листовок

0 голосов
/ 10 июля 2020

У меня есть список SharePoint со столбцом местоположения, который содержит широту и долготу, разделенные запятой. Я пытаюсь нанести эти точки на карту-буклет, встроенную в веб-часть, но безуспешно. Моя карта настроена и отображается. Я могу вставить свои собственные сюжетные точки; однако я не могу понять, как поместить данные списка в свою карту листовок html для построения. Я читал об использовании вызовов REST или получении информации и преобразовании в Geo JSON, но не смог. Я думал о том, чтобы рабочий процесс генерировал CSV-файл при создании элемента для использования, но предпочел бы просто вытащить его напрямую из списка SharePoint.

Я попытался включить это в листовку html. 

        function plotMap(){
$.ajax({ 
    url: "SITEURL/_api/Web/Lists/GetByTitle('Open Permits')/items", 
    type: "GET",
    headers: {"accept": "application/json;odata=verbose"},
    success: function(data){
        $.each(data.d.results, function(index, item){  
                  var mapMarker = "{icon:"some image url.replace";
                  var latlng = item. Location.split(",");
                  L.marker([latlng[0],latlng[1]],mapMarker).addTo(map).bindPopup(item.Equipment);
        });
    },
    error: function(error){
        alert(JSON.stringify(error));
    }
});
}

Думаю, один, я не знаю, куда мне поместить это в файле карты, и два, если это правильный метод получения данных списка.

1 Ответ

0 голосов
/ 11 июля 2020

Вы можете сначала попытаться получить элементы списка, а затем запустить функцию для построения точек. 

var items = [];

function getSP() {   
    var scriptBase = siteUrl + "/_layouts/15/";
    $.getScript(scriptBase + "MicrosoftAjax.js").then(function (data) {
        return $.getScript(scriptBase + "SP.Runtime.js");
    }).then(function (data) {
        return $.getScript(scriptBase + "SP.js");
    }).then(function (data) {
        retrieveListItems()
      });
}

function retrieveListItems() {
    var clientContext = new SP.ClientContext(siteUrl);
    console.log(clientContext)
    var oList = clientContext.get_web().get_lists().getByTitle('Open Permits');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><FieldRef Name=\'ID\'/>' +
        '<Value Type=\'Number\'>1</Value></Query></View>');
    this.collListItem = oList.getItems(camlQuery);    
    clientContext.load(collListItem);    
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function valueOrNone(oListItem, value) {
    try {
        finalValue = oListItem.get_item(value).get_lookupValue();
    } catch (err) {
        finalValue = '';
    }
    return finalValue;
}

function onQuerySucceeded(sender, args) {    
    var listItemEnumerator = collListItem.getEnumerator();
      
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();    
        var item = {};
        item['ID'] = oListItem.get_id();
        item['Equipment'] = valueOrNone(oListItem, 'Equipment');
        item['Location'] = valueOrNone(oListItem, 'Location');
        items.push(item)
    }
    
    console.log(items)
    plotMap()
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function plotMap() {      
 items.forEach(x => {
  var mapMarker = "{icon:"some image url.replace";
  var latlng = x.Location.split(","); 
  L.marker([latlng[0],latlng[1]],mapMarker).addTo(map).bindPopup(x.Equipment);
  });
}
...