How to add simple text to each polygon

48 views
Skip to first unread message

Patrick McCormick

unread,
Oct 22, 2013, 4:39:51 PM10/22/13
to leaflet-ve...@googlegroups.com
I'm using leaflet-vector-layers for my map.

I need to display a value from the server data for each polygon at the center of each polygon.  How do I do that?

The vector data contains sections, each of which have an ID number; SECTION

Here's my working code for displaying the polygons:

        ags_plss = new lvector.AGS({
            url: "http://maps.isgs.illinois.edu/arcgis/rest/services/IL_PLSS/IL_PLSS/MapServer/0",
            fields: "*",
            uniqueField: "OBJECTID",
            scaleRange: [12, 16],
            symbology: {
                type: "single",
                vectorOptions: {
                    weight: 1,
                    opacity: 0.9,
                    color: "#880000",
                    fillOpacity: 0.0005,
                    title: "{SECTION}"
                }
            },
            singlePopup: true,    // added this to remove multiple popups - check for function
            popupTemplate: function(properties) {
                for (var prop in properties) {
                    if (prop == 'OBJECTID') {
                        sectionID = String(properties[prop]);
                    }
                    if (prop == 'COUNTY_NUMBER') {
                        countyName = county_ids[parseInt(properties[prop])];
                        details = '<li>County Name: ' + countyName + '</li>';
                    }
                }
                output = '<ul class="pricing-table avia-center-col">' +
                            '<li class="avia-heading-row">' +
                                '<div class="first-table-item">Section ID: ' + sectionID + '</div>' +
                            '</li>' +
                            details +
                            '<li class="avia-button-row">' +
                                '<div class="avia-button-wrap avia-button-center avia-builder-el-37 avia-builder-el-first ">' +
                                    '<a class="eModal-1 avia-button avia-icon_select-yes avia-color-theme-color avia-size-small avia-position-center " href=""  onclick="return set_section_id(' + sectionID + ')"">' +
                                        '<span class="avia_iconbox_title">Stake My Claim</span>' +
                                    '</a>' +
                                '</div>' +
                            '</li>';
                if ( soldParcels.indexOf(sectionID) > -1 ) {  // means there are sold square miles in this parcel, so provide link to view them
                    output += '<li>See what Others have made:</li>'; // need link "View Art" button to page listing submission(s) for this section
                    output += '<li class="avia-button-row">' +
                                '<div class="avia-button-wrap avia-button-center avia-builder-el-37 avia-builder-el-first ">' +
                                    '<a class="avia-button avia-icon_select-yes avia-color-theme-color avia-size-small avia-position-center " href="http://tearitory.com/the-atlas-of-assembly/" target="_blank">' +
                                        '<span class="avia_iconbox_title">View Artwork</span>' +
                                    '</a>' +
                                '</div>' +
                            '</li>';
                    }
                output += '</ul>';
                return output;
            }
        });

Zeljko Vujaklija

unread,
Dec 4, 2013, 7:11:34 AM12/4/13
to leaflet-ve...@googlegroups.com
Hi 

I was wondering if you've ever succeeded in showing the popup on the polygon? I have similar problem. 
Reply all
Reply to author
Forward
0 new messages