Smarter configuration of info bubble display about datasette-cluster-map

[simonw]

I think the way to do this is with custom columns which can be returned for the rows. Maybe something like this:

select
  photo_url || '?w=800&h=400&fit=crop' as popup_image,
  name as popup_title,
  substr(description, 0, 200) as popup_description,
  '/browse/museums/' || id as popup_link,
  latitude, longitude from museums
where id in (26, 27) order by id

https://www.niche-museums.com/browse?sql=select%0D%0A++photo_url+%7C%7C+%27%3Fw%3D800%26h%3D400%26fit%3Dcrop%27+as+popup_image%2C%0D%0A++name+as+popup_title%2C%0D%0A++substr%28description%2C+0%2C+200%29+as+popup_description%2C%0D%0A++%27%2Fbrowse%2Fmuseums%2F%27+%7C%7C+id+as+popup_link%2C%0D%0A++latitude%2C+longitude+from+museums%0D%0Awhere+id+in+%2826%2C+27%29+order+by+id

Or bundle it into JSON like this:

select json_object(
  'image', photo_url || '?w=800&h=400&fit=crop',
  'title', name,
  'description', substr(description, 0, 200),
  'link', '/browse/museums/' || id
  ) as popup,
  latitude, longitude from museums
where id in (26, 27) order by id

https://www.niche-museums.com/browse?sql=select+json_object%28%0D%0A++%27image%27%2C+photo_url+%7C%7C+%27%3Fw%3D800%26h%3D400%26fit%3Dcrop%27%2C%0D%0A++%27title%27%2C+name%2C%0D%0A++%27description%27%2C+substr%28description%2C+0%2C+200%29%2C%0D%0A++%27link%27%2C+%27%2Fbrowse%2Fmuseums%2F%27+%7C%7C+id%0D%0A++%29+as+popup%2C%0D%0A++latitude%2C+longitude+from+museums%0D%0Awhere+id+in+%2826%2C+27%29+order+by+id

[simonw]

The JSON method is more aesthetically pleasing to me, so I'll go with that.

[simonw]

{
    "image": "https://niche-museums.imgix.net/dodgems.heic?w=800&h=400&fit=crop",
    "title": "Dingles Fairground Heritage Centre",
    "description": "Home of the National Fairground Collection, Dingles has over 45,000 indoor square feet of  vintage fairground rides... and you can go on them! Highlights include the last complete surviving and opera",
    "link": "/browse/museums/26"
}

[simonw]

Demo is running here now: https://www.niche-museums.com/browse?sql=select+json_object(%0D%0A++%27image%27%2C+photo_url+||+%27%3Fw%3D800%26h%3D400%26fit%3Dcrop%27%2C%0D%0A++%27title%27%2C+name%2C%0D%0A++%27description%27%2C+substr(description%2C+0%2C+200)%2C%0D%0A++%27link%27%2C+%27%2Fbrowse%2Fmuseums%2F%27+||+id%0D%0A++)+as+popup%2C%0D%0A++latitude%2C+longitude+from+museums%0D%0Awhere+id+in+(26%2C+27)+order+by+id

[simonw]

Documentation: https://github.com/simonw/datasette-cluster-map/blob/c1329b6edd85c2ecbb098d5bb3b6c2c22b2493ba/README.md#custom-marker-popups

[simonw]

Another demo: https://bigfoot-data.glitch.me/data?sql=select%0D%0A++longitude%2C%0D%0A++latitude%2C%0D%0A++json_object%28%0D%0A++++%27description%27%2C%0D%0A++++substr%28%0D%0A++++++description%2C%0D%0A++++++23%2C%0D%0A++++++instr%28description%2C+%27http%3A%2F%2F%27%29+-+23%0D%0A++++%29%2C%0D%0A++++%27link%27%2C%0D%0A++++substr%28description%2C+instr%28description%2C+%27http%3A%2F%2F%27%29%29%0D%0A++%29+as+popup%0D%0Afrom%0D%0A++bigfoot%0D%0Aorder+by%0D%0A++rowid%0D%0Alimit%0D%0A++1001

From https://twitter.com/simonw/status/1263668857174020096