Creating popups with data from a feature data service

joepublic

I am using esri-leaflet to visualize some data via an esri feature data service.

When I click on the map I get the error shown below:

 

TypeError: Argument 1 of Node.appendChild does not implement interface Node.

 

My spec:

 

var countries = new L.esri.FeatureLayer(featureURL, {

  style: function () {

return {color: "#70ca49", weight: 2,  fillOpacity: 0.3};

  }

 

var popupTemplate = "<h3>{CNTRY_NAME}</h3>";

 

countries.bindPopup(function(feature){

  return L.Util.template(popupTemplate, feature.properties)

  });

 

Any idea as to what I am doing wrong?

WinstonHoyle

You have some small syntax errors. 

<SPAN class="keyword token">var</SPAN> countries <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">L<SPAN class="punctuation token">.</SPAN>esri<SPAN class="punctuation token">.</SPAN>featureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp; url<SPAN class="punctuation token">:</SPAN> featureURL<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp; style<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#70ca49"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; weight<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fillOpacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.3</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTo</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="string token">"<h3>{CNTRY_NAME}</h3>"</SPAN><SPAN class="punctuation token">;</SPAN>

countries<SPAN class="punctuation token">.</SPAN><SPAN class="token function">bindPopup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> L<SPAN class="punctuation token">.</SPAN>Util<SPAN class="punctuation token">.</SPAN><SPAN class="token function">template</SPAN><SPAN class="punctuation token">(</SPAN>popupTemplate<SPAN class="punctuation token">,</SPAN> layer<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>properties<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Popups using Esri-Leaflet: https://esri.github.io/esri-leaflet/examples/feature-layer-popups.html

Popups using Leaflet: https://leafletjs.com/reference-1.3.2.html#popup