Manually Setting Content of Marker's Popup

[joshuaballas]

I am having a hard time figuring out how to set the content of a popup. I have a GeoSearchControl created with showPopup = true. I also see popupFormat, but not sure what to change it to in order to set the content within the map.on('geosearch/showlocation') function. Could I get a few pointers on this? Thanks.

As of right now, I am using jquery to change the html of the leaflet-popup-content class.

[smeijer]

showPopup is required to, well. Show the popup. The popupFormat is for changing the default result label to something that is more up to your needs. It get's the query and result as arguments, and requires a string to be returned.

const searchControl = new GeoSearchControl({
  provider: provider,
  showPopup: true,
  popupFormat: function(response) {   // pass this function to see the full result
    return JSON.stringify(response);  // and format as you like, just return a string
  }
});

map.addControl(searchControl);

When now searching for Amsterdam, you'll get a popup with the text:

{  
   "query":"Amsterdam, Spitsbergen, Noorwegen",
   "result":{  
      "x":"10.833333",
      "y":"79.75",
      "label":"Amsterdam, Spitsbergen, Noorwegen",
      "bounds":[  
         [  
            79.43,
            10.513333
         ],
         [  
            80.07,
            11.153333
         ]
      ],
      "raw":{  
         "place_id":"1298730",
         "licence":"Data © OpenStreetMap contributors, ODbL 1.0. http://www.openstreetmap.org/copyright",
         "osm_type":"node",
         "osm_id":"302068013",
         "boundingbox":[  
            "79.43",
            "80.07",
            "10.513333",
            "11.153333"
         ],
         "lat":"79.75",
         "lon":"10.833333",
         "display_name":"Amsterdam, Spitsbergen, Noorwegen",
         "class":"place",
         "type":"island",
         "importance":0.655
      }
   }
}

Or something like:

// es2016
const searchControl = new GeoSearchControl({
  provider: new OpenStreetMapProvider(),
  showPopup: true,
  popupFormat: ({ query, result }) => `
    You've searched for: ${query}, <br />
    We found it at ${result.x.substr(0, 5)}, ${result.y.substr(0, 5)}
  `,
});

"old skool" would look like:

// es5
const searchControl = new GeoSearchControl({
  provider: provider,
  showPopup: true,
  popupFormat: function(response) {
    return [
      "You've searched for: ", response.query, 
      "<br />",
      "We found it at ", response.result.x.substr(0, 5), ", ", response.result.y.substr(0, 5)
    ].join('');
  }
});

[joshuaballas]

Great explanation, thanks!

[smeijer]

No problem. Please let me know if there is anything else I can help with.