Pulling URLs from objects for popup marker window - html

Question

New to leaflet, and basically everything programming related.
I am making a brewery map showing locations of breweries, distilleries, vineyards, etc around the state.
What I want to do is have a popup that gives:
Name, Address, URL to that specific website.
I've figured out the Name/Address part, but I just can't figure out how to pull the URL from the object's properties. I've tried many iterations, none work (or even partially work).
As well, my searches have been fruitless, but I can't be the only one who has tried to do this. Bad search skills?
//load GeoJSON from an external file
$.getJSON("breweries.geojson",function(data){
var pintGlass = L.icon({
iconUrl: 'glass.png',
iconSize: [24,48]
});
var popupMarker = L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: pintGlass});
marker.bindPopup("<strong>" + feature.properties.NAME + "</strong> </br/>" + feature.properties.STREETNUM
+ " " + feature.properties.STREET + ", " + feature.properties.CITY + <a href=feature.properties.URL>feature.properties.URL</a>);
return marker;
}
});
var clusters = L.markerClusterGroup();
clusters.addLayer(popupMarker);
map.addLayer(clusters);
});
The last bit of the marker.bindPopup is the trouble spot. I've tried single quotes, double quotes, no luck. I tried creating a variable to pull the object.properties.URL out and insert that variable into the with no luck.

Answer 1

The problem is exactly at the following point, where you are trying to create a String:
+ <a href=feature.properties.URL>feature.properties.URL</a>
which should be
+ "" + feature.properties.URL + ""

Answer 2

It appears that you a not enclosing your strings correctly.
Try this and let me know if it works:
marker.bindPopup("<strong>" + feature.properties.NAME + "</strong></br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + " " + feature.properties.URL + "");

Answer 3

I know you've got a couple of "working" answers but i'de like to point out a few things. At the moment your ending up with markup like this:
<a href=http://example.org>http://example.org</a>
But it's best practice in HTML to make sure attribute values are wrapped in double quotes like this:
http://example.org
To accomplish that you'll have to do the following:
"" + feature.properties.URL + ""
Notice the slashes proceding the double quotes, a slash escapes the following double quote so that it gets treated like a string. Things like this can get pretty ugly very quick. That's why it's best when you're concatenating HTML with javascript that you simply use single quotes:
'' + feature.properties.URL + ''
That way you won't have to escape any double quotes in your strings.
And i'de like to point out a thing that Leaflet users often overlook is the wonderful L.Util.template method:
Simple templating facility, accepts a template string of the form 'Hello {a}, {b}' and a data object like {a: 'foo', b: 'bar'}, returns evaluated string ('Hello foo, bar'). You can also specify functions instead of strings for data values — they will be evaluated passing data as an argument.
http://leafletjs.com/reference.html#util-template
Using that takes away a lot of the hassle of what you're doing now, for example:
var values = {
a: feature.properties.NAME,
b: feature.properties.STREETNUM,
c: feature.properties.STREET,
d: feature.properties.CITY,
e: feature.properties.URL
};
var templateString = '<strong>{a}</strong><br>{b} {c}, {d} {e}';
var htmlString = L.Util.template(templateString, values);