2

I'm trying to use a string variable within a image tag that then adds a symbol to the layer control in Leaflet.

I'm having trouble with the whole use of single/double quotes and concatenating the variable. Does anyone have experience of this issue.

var legendUrl = 'https://maps.dartmoor.gov.uk/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER='

overlays = {
"<img align=top src = ""'"+legendUrl+"'""hta:sssi'/> SSSI":'hta:sssi'
"<img align=top src = 'http://maps.dartmoor.gov.uk/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=general:tpo_area'/> TPO Areas":'general:tpo_area'

};
Improve this question

2 Answers 2

Reset to default
3 
overlays = {
  "<img align=top src = '" + legendUrl + "hta:sssi'/> SSSI" : 'hta:sssi',
  "<img align=top src = 'http://maps.dartmoor.gov.uk/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=general:tpo_area'/> TPO Areas" : 'general:tpo_area'
};

If you cannot use computed property names in the object initializer, then an alternate solution would be something like:

var overlays = {};
overlays["<img align=top src = '" + legendUrl + "hta:sssi'/> SSSI"] = 'hta:sssi';
Improve this answer
6
  • Thanks but that still doesn't work for me. I think I'm doing something fundamentally wrong here. Here's the page maps.dartmoor.gov.uk/wms_info_possible.html
    – Matt T
    Commented Nov 7, 2016 at 13:02
  • 1
    Missing comma. Be sure to read the documentation about the JS Object initializer format.
    – IvanSanchez
    Commented Nov 7, 2016 at 13:06
  • I had added the comma myself so it wasn't that. I'm a bit lost as to why this won't work but I'll do some reading and get back to you. Thanks.
    – Matt T
    Commented Nov 7, 2016 at 13:52
  • Found out about computed property names using the docs link. Thanks for your help
    – Matt T
    Commented Nov 7, 2016 at 14:08
  • 1
    See updated answer
    – IvanSanchez
    Commented Nov 8, 2016 at 11:47
1

Turns out you need to wrap the key in expression in brackets [] as its trying to use a computed property name.

  ["<img align='top' src ='" + legendUrl + "hta:sssi'/> SSSI"] : 'hta:sssi'
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.