nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Find more posts tagged with

Esri Leaflet

Accepted answers

BillChappell

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.

All comments

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

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.

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

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” }’

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.