FE: add map above LAND cards

[chrislatorres]

• a real image map of the street
• mouseover info with owner, name of LAND, if for sale/sale price
• click goes to LAND card detail

[avaer]

I think the start of the map would be to add map snapshot functionality to build.html. LMK if that is needed.

[chrislatorres]

Will need to look more into the best way to get it in...

The most common library for js maps is leaflet https://leafletjs.com/

The map texture is a tile layer https://leafletjs.com/reference-1.7.1.html#tilelayer

In this TileLayer, you give the URL for the to-be-fetched images to leaflet with a template like this:

http://{s}.somedomain.com/{z}/{x}/{y}.png

When you are at the specified zoom, x and y level, Leaflet will automatically fetch the tiles on the URL you gave.

Tiles by default have a 256x256px size (can be changed in the TileLayer options)

[avaer]

An initial map renderer is up at https://app.webaverse.com/map.html

It is tiled/lodded, but it is generated at runtime. Instead, we should generate these tiles on the preview server and serve them with something like leaflet.js.

[avaer]

Note that because of #532, it might not always render the full world since we don't wait for everything to load, only 5s. User apps will need waitUntil support to signal when they finish loading.

[chrislatorres]

added initial leaflet map on add-map branch of webaverse.com repo just using a manual screenshot of the map - webaverse/webaverse.com@6b47185

[chrislatorres]

added iframe to https://map.webaverse.com