cmv / cmv-app

CMV - The Configurable Map Viewer - A community supported open source mapping framework built with the Esri JavaScript API and the Dojo Toolkit
https://demo.cmv.io/
MIT License
325 stars 278 forks source link

This is not issue, it is a feature request #837

Closed ERS-Long closed 4 years ago

ERS-Long commented 6 years ago

Is it possible to extend current identify code to have the function to query Feature layer attachment? Here is the sample/example from ESRI community

link

Thanks,

tmcgee commented 6 years ago

@ERS-Long Yes, it is definitely possible. :wink: I can see value in this enhancement. I've attached the feature request label to this issue. Thanks.

aspetkov commented 6 years ago

I show attachments only with extend on \js\config\identify.js. This is my config file for identify widget. Path is \js\config\identify.js. Sorry language is bulgarian, but you can view structure of code.

This picture show the attributes as pictograms, texts and links. image

This picture show the phothos from attacments. image

This is the definition a feature layer in js\config\viewer.js:

        operationalLayers: [
                      {
                          type: 'feature',
                          url: 'https://maps1.sofproect.com/arcgis/rest/services/detski/detski_plostadki/FeatureServer/0',
                          title:  i18n.viewer.operationalLayers.detski_plostadki,
                          options: {
                              id: 'detski_plostadki',
                              opacity: 1.0,
                              visible: false,
                              outFields: ['NomObekt', 'Rajon', 'Mestopolojenie', 'VIDS_KK', 'Sobstvenost', 'Plost',
                                          'DataIzgr', 'SastNaredba1', 'Meroprijatie', 'Proekt', 'VazrGrupi', 'Zabelevka',
                                          'KombSaor_0_3', 'KombSaor_3_12', 'Lulki', 'IgroviPanel', 'Katerushka', 'Klatushka_0_3',
                                          'Klatushka_3_12', 'Pyasachnik', 'ParkMebel', 'Ograda', 'InfTabela'],
                              mode: 0
                          }
                      },
....

This is the code in \js\config\identify.js :

define([
    'dojo/_base/lang',
    'dijit/layout/TabContainer',
    'dijit/layout/ContentPane',
    "dijit/form/Button",
    'dojo/dom-construct',
    'dojo/Deferred'
], function (lang, TabContainer, ContentPane, Button, domConstruct, Deferred) {

    function attributeList (identifyResults) {
        var linkTemplate = '<a href="documents/proecten_fiche.doc" target="_blank">Виж данните</a>';

        var html = [];
        if (identifyResults.attributes['KombSaor_0_3']==1) {
            html.push('<img src="images/ikoni/kombsaor_0_3.png" alt="HTML5 Icon" title="комбинирано съоръжение от 0 до 3 г." style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['KombSaor_3_12'] == 1) {
            html.push('<img src="images/ikoni/kombsaor_3_12.png" title="комбинирано съоръжение от 3 до 12 г." style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['Lulki'] == 1) {
            html.push('<img src="images/ikoni/lulki.png" title="люлки" style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['IgroviPanel'] == 1) {
            html.push('<img src="images/ikoni/igrovipanel.png" title="игрови панел" style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['Katerushka'] == 1) {
            html.push('<img src="images/ikoni/katerushka.png" title="катерушка" style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['Klatushka_0_3'] == 1) {
            html.push('<img src="images/ikoni/klatushka_0_3.png" title="клатушка от 0 до 3 г." style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['Klatushka_3_12'] == 1) {
            html.push('<img src="images/ikoni/klatushka_3_12.png" title="клатушка от 3 до 12 г." style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['Pyasachnik'] == 1) {
            html.push('<img src="images/ikoni/pyasachnik.png" title="пясъчник" style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['ParkMebel'] == 1) {
            html.push('<img src="images/ikoni/parkmebel.png" title="паркова мебел" style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['Ograda'] == 1) {
            html.push('<img src="images/ikoni/ograda.png" title="ограда" style="width:32px;height:auto;"> ');
        }
        if (identifyResults.attributes['InfTabela'] == 1) {
            html.push('<img src="images/ikoni/inftabela.png" title="информационна табела" style="width:32px;height:auto;"> ');
        }

        html.push('<br />');
        var googleString = '<a target="_blank" href="https://www.google.com/maps/place/' + identifyResults.geometry.getLatitude() + '+' + identifyResults.geometry.getLongitude() + '/@' + identifyResults.geometry.getLatitude() + ',' + identifyResults.geometry.getLongitude() + ',15z" >Към Google Maps  </a> '

        html.push(googleString);

        var objectNumber = identifyResults.attributes['NomObekt'];
        var rajonNumber = objectNumber.substring(0, 2);

        var linkTemplate;
        switch (rajonNumber) {
            case '01':
                var linkTemplate = '<a href="documents/01-СРЕДЕЦ.pdf" target="_blank">Таблица-формуляр СРЕДЕЦ</a>'; break;

            case '02':
                var linkTemplate = '<a href="documents/02-КРАСНО СЕЛО.pdf" target="_blank">Таблица-формуляр КРАСНО СЕЛО</a>'; break;

            case '03':
                var linkTemplate = '<a href="documents/03-ВЪЗРАЖДАНЕ.pdf" target="_blank">Таблица-формуляр ВЪЗРАЖДАНЕ</a>'; break;

            case '04':
                var linkTemplate = '<a href="documents/04-ОБОРИЩЕ.pdf" target="_blank">Таблица-формуляр ОБОРИЩЕ</a>'; break;

            case '05':
                var linkTemplate = '<a href="documents/05-СЕРДИКА.pdf" target="_blank">Таблица-формуляр СЕРДИКА</a>'; break;

            case '06':
                var linkTemplate = '<a href="documents/06-ПОДУЯНЕ.pdf" target="_blank">Таблица-формуляр ПОДУЯНЕ</a>'; break;

            case '07':
                var linkTemplate = '<a href="documents/07-СЛАТИНА.pdf" target="_blank">Таблица-формуляр СЛАТИНА</a>'; break;

            case '08':
                var linkTemplate = '<a href="documents/08-ИЗГРЕВ.pdf" target="_blank">Таблица-формуляр ИЗГРЕВ</a>'; break;

            case '09':
                var linkTemplate = '<a href="documents/09-ЛОЗЕНЕЦ.pdf" target="_blank">Таблица-формуляр ЛОЗЕНЕЦ</a>'; break;

            case '11':
                var linkTemplate = '<a href="documents/11-КРАСНА ПОЛЯНА.pdf" target="_blank">Таблица-формуляр КРАСНА ПОЛЯНА</a>'; break;

            case '12':
                var linkTemplate = '<a href="documents/12-ИЛИНДЕН.pdf" target="_blank">Таблица-формуляр ИЛИНДЕН</a>'; break;

            case '13':
                var linkTemplate = '<a href="documents/13-НАДЕЖДА.pdf" target="_blank">Таблица-формуляр НАДЕЖДА</a>'; break;

            case '14':
                var linkTemplate = '<a href="documents/14-ИСКЪР.pdf" target="_blank">Таблица-формуляр ИСКЪР</a>'; break;

            case '16':
                var linkTemplate = '<a href="documents/16-СТУДЕНТСКИ.pdf" target="_blank">Таблица-формуляр СТУДЕНТСКИ</a>'; break;

            case '17':
                var linkTemplate = '<a href="documents/17-ВИТОША.pdf" target="_blank">Таблица-формуляр ВИТОША</a>'; break;

            case '18':
                var linkTemplate = '<a href="documents/18-ОВЧА КУПЕЛ.pdf" target="_blank">Таблица-формуляр ОВЧА КУПЕЛ</a>'; break;

            case '19':
                var linkTemplate = '<a href="documents/19-ЛЮЛИН.pdf" target="_blank">Таблица-формуляр ЛЮЛИН</a>'; break;

            case '20':
                var linkTemplate = '<a href="documents/20-ВРЪБНИЦА.pdf" target="_blank">Таблица-формуляр ВРЪБНИЦА</a>'; break;

            case '21':
                var linkTemplate = '<a href="documents/21-НОВИ ИСКЪР.pdf" target="_blank">Таблица-формуляр НОВИ ИСКЪР</a>'; break;

            case '22':
                var linkTemplate = '<a href="documents/22-КРЕМИКОВЦИ.pdf" target="_blank">Таблица-формуляр КРЕМИКОВЦИ</a>'; break;

            case '23':
                var linkTemplate = '<a href="documents/23-ПАНЧАРЕВО.pdf" target="_blank">Таблица-формуляр ПАНЧАРЕВО</a>'; break;

            case '24':
                var linkTemplate = '<a href="documents/24-БАНКЯ.pdf" target="_blank">Таблица-формуляр БАНКЯ</a>'; break;

            default:
                linkTemplate = '';
        }

        if (linkTemplate) {
            html.push('<br />');
            html.push(linkTemplate);
        }

        html.push('<table class="attrTable">');

        var tableRow = '<tr valign="top"> <td class="attrName"> Номер на обект:</td> <td class="attrValue">' + identifyResults.attributes['NomObekt']+'</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Район:</td> <td class="attrValue">' + identifyResults.attributes['Rajon'] + '</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Местоположение:</td> <td class="attrValue">' + identifyResults.attributes['Mestopolojenie'] + '</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Вид собственост:</td> <td class="attrValue">' + identifyResults.attributes['VIDS_KK'] + '</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Собственост:</td> <td class="attrValue">' + identifyResults.attributes['Sobstvenost'] + '</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Площ:</td> <td class="attrValue">' + identifyResults.attributes['Plost'] + '</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Дата на изграждане:</td> <td class="attrValue">' + identifyResults.attributes['DataIzgr'] + '</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Необходими мероприятия в зависимост от състоянието:</td> <td class="attrValue">' + identifyResults.attributes['Meroprijatie'] + '</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Наличие на проект:</td> <td class="attrValue">' + identifyResults.attributes['Proekt'] + '</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Възрастови групи:</td> <td class="attrValue">' + identifyResults.attributes['VazrGrupi'] + '</td> </tr>';
        tableRow += '<tr valign="top"> <td class="attrName"> Забележка:</td> <td class="attrValue">' + identifyResults.attributes['Zabelevka'] + '</td> </tr>';

        html.push(tableRow);

        html.push('</table><br /> ');

        return html.join('');

    }

    function tabContainerIdentify(identifyResults) {

        function getAttachImages(identifyResults) {

            var objectId = identifyResults.attributes.OBJECTID;
            var deferred = new Deferred();
            identifyResults._layer.queryAttachmentInfos(objectId, function (infos) {
                var attachmentPath = [];
                var imagePopupHTML = "";
                if (infos.length > 0) {
                    for (index = 0; index < infos.length; ++index) {
                        attachmentPath.push(infos[index].url)
                        console.debug(infos[index])
                    }
                }
                for (index = 0; index < attachmentPath.length; ++index) {
                    imagePopupHTML += "<a href='" + 'https://maps1.sofproect.com/dotnet/proxy.ashx?' + attachmentPath[index] + " 'target='_blank'>"
                    imagePopupHTML += "<img src='" + 'https://maps1.sofproect.com/dotnet/proxy.ashx?' + attachmentPath[index] + " ' style='width:250px'></a></br>"
                }

                if (imagePopupHTML.length == 0) {
                    imagePopupHTML = "<p> Няма добавени снимки </p>"
                }

            deferred.resolve('<img src="http://maps1.sofproect.com/dotnet/proxy.ashx?http://maps1.sofproect.com/arcgis/rest/services/detski/detski_plostadki/FeatureServer/0/1624/attachments/4426" alt="HTML5 Icon" style="width:64px;height:auto;"> ');

            deferred.resolve(imagePopupHTML);
            });
            return deferred.promise;
        }

             container = new TabContainer({
                style: 'width:100%;height:300px;'
            }, domConstruct.create('div'), 'tabContainer');

           var cp1 = new ContentPane({
               title: "<b>" + identifyResults.attributes.NomObekt + "</b>",
               content: attributeList(identifyResults),
               selected: true
           });
           container.addChild(cp1);

           var cp3 = new ContentPane({
               title: 'Снимки',
           });
           container.addChild(cp3);
                    var process = getAttachImages(identifyResults);
                    process.then(function(results){
                        console.log(results);
                        cp3.set ('content', results);
                        setTimeout(function () {
                            container.resize();
                        }, 50);
                    })

            setTimeout(function () {
                container.resize();
            }, 100);

            return container.domNode;
         }

    return {
        map: true,
        mapClickMode: true,
        mapRightClickMenu: true,
        identifyLayerInfos: true,
        identifyTolerance: 15,
        draggable: true,
        identifies: {
            detski_plostadki: {
                0: {
                    title: 'Pole',
                    content: tabContainerIdentify
                }
            }
        }

      };
});

(Updated formatting by @tmcgee)

ERS-Long commented 6 years ago

Great example! Thanks for sharing it!