Leaflet - DynamicMapLayer/FeatureService Popup help

[BillChappell]

I had a DynamicMapLayer that I needed to style like a featurelayer. and I found this link which helped a little.

Style a DynamicMapLayer · Issue #321 · Esri/esri-leaflet · GitHub

Now my points show up as custom icon and my definition query works.

However the popup doesn't work quite right. I can get the hosp.bindPopup to open, but it doesn't see the fields in the service like a true featureService does. My html shows up, that's it.

I tried the  Identifying Features | Esri Leaflet  example but it doesn't work I get hosp.identify is not a function and it fails.

As a dynamicMapLayer the following worked but not now.

     hosp.bindPopup(function (error, featureCollection) {

        if(error || featureCollection.features.length === 0) {

          return false;

        } else {   

                      return ' Name: ' + featureCollection.features[0].properties["Facility Name"] + "<br> Facility Type: "+featureCollection.features[0].properties["Facility Type"];

        }

    });

What I really need is to symbolize and definition query my DynamicMapService and have a popup that shows some attributes, Any ideas, examples?

[JohnGravois]

pat's advice in #321 was to use L.esri.featureLayer().  you can find an example of implementing a popup with a featureLayer below.

Custom popups | Esri Leaflet

if you need additional assistance, it'd be really helpful if you could put together a jsbin or something similar.

[BillChappell]

Ok, Now I’m really confused, because my mapservice is behind a firewall, I found one that wasn’t and using the same code the new example worked while my service doesn’t. So just changing the url gives me a working example, the only thing I can see different is the field names.

My code:

// Hosp Points

var hosp = L.esri.featureLayer()

}}).addTo(map);

hosp.bindPopup(function (evt) {

return L.Util.template(' Name: {NAME}
ID: ', evt.feature.properties); //Both services have a NAME and ID field..

});

MY service fields:

• DOHGIS.NYSDOH_CI_DATA.OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID )

• DOHGIS.NYSDOH_CI_DATA.ID ( type: esriFieldTypeString , alias: Facility ID , length: 35 )

• DOHGIS.NYSDOH_CI_DATA.IDTYPE ( type: esriFieldTypeString , alias: Facility ID Type , length: 100 )

• DOHGIS.NYSDOH_CI_DATA.NAME ( type: esriFieldTypeString , alias: Facility Name , length: 250 )

The working service fields:

• OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID )

• Shape ( type: esriFieldTypeGeometry , alias: Shape )

• NAME ( type: esriFieldTypeString , alias: NAME , length: 31 )

• ID ( type: esriFieldTypeDouble , alias: ID )

It must be related to the SDE Instance/Table/FieldName structure.

DOHGIS.NYSDOH_CI_DATA.NAME gives me a popup that says: ‘Name: { DOHGIS.NYSDOH_CI_DATA.NAME}’

NAME errors off, says No value provided for variable

Using the field Alias:

Facility Name gives me a popup that says: ‘Name: { Facility Name }’

“Facility Name” gives me a popup that says: ‘Name: { “Facility Name” }’

[BillChappell]

Progress, it appears to be the periods that are causing the problem. We can make it work by modifying the library and creating an alias but this is not the idea solution. It looks like someone else using sde and creating a dynamic service and using it as a fetureService will also have this issue.

As a dynamic service I can get it working using this example:

http://esri.github.io/esri-leaflet/examples/customizing-popups.html

featureCollection.features[0].properties["Facility Name"]; //<<< DOHGIS.NYSDOH_CI_DATA.

MY service fields:

• DOHGIS.NYSDOH_CI_DATA.OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID )

• DOHGIS.NYSDOH_CI_DATA.ID ( type: esriFieldTypeString , alias: Facility ID , length: 35 )

• DOHGIS.NYSDOH_CI_DATA.IDTYPE ( type: esriFieldTypeString , alias: Facility ID Type , length: 100 )

• DOHGIS.NYSDOH_CI_DATA.NAME ( type: esriFieldTypeString , alias: Facility Name , length: 250 )

The working service fields:

• OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID )

• Shape ( type: esriFieldTypeGeometry , alias: Shape )

• NAME ( type: esriFieldTypeString , alias: NAME , length: 31 )

• ID ( type: esriFieldTypeDouble , alias: ID )

It must be related to the SDE Instance/Table/FieldName structure.

DOHGIS.NYSDOH_CI_DATA.NAME gives me a popup that says: ‘Name: { DOHGIS.NYSDOH_CI_DATA.NAME}’

NAME errors off, says No value provided for variable

Using the field Alias:

Facility Name gives me a popup that says: ‘Name: { Facility Name }’

“Facility Name” gives me a popup that says: ‘Name: { “Facility Name” }’

[BillChappell]

Note that the reason I am getting the instance/tablename/fieldname is the service has a joined table, if I remove the join just the fieldnames appear in the service and everything works as advertised in Johns post.

[BillChappell · Accepted solution]

Got it..

Downloaded http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js

Changed this : templateRe: /\{ *(+) *\}/g,

To this: templateRe: /\{ *(+) *\}/g, << Notice the period after the w

Now return L.Util.template(' Name: {DOHGIS.NYSDOH_CI_DATA.NAME} ', evt.feature.properties);

Returns the popup with the name. Getting around the periods from SDE.

Just need to run the custom lib locally.