Custom TopoJSON maps (beyond world maps)

Looker Q&A Looker
1

Today someone asked me if they could use an event floor plan as a map in Looker.
Since it took me a little bit of work to figure out the easiest way to do this, I thought I would spare you the effort by posting my method out here.

From a power point:

3c4167b59d79d16d9877157bf74242c208668993.png
3c4167b59d79d16d9877157bf74242c208668993.png768×378 90.6 KB

To this map in Looker

ed897c2381c8d2d8e99673fd890da3a5661aad60.png
ed897c2381c8d2d8e99673fd890da3a5661aad60.png805×507 10.8 KB

###Process

  • Go to geojson.io
  • Use the drawing tools to get an example of the geojson text structure on the right and then write by hand the shapes and sizes you need.
  • For example a rectangle looks like this:

Which allowed me to eventually build this:

  • For each of the shapes created, selecting them on the map allows you to add attributes.

  • These attributes are the values Looker will be trying to link the dimensions to.

  • They are crucial to be able to map the table results to the map in Looker. (Notice the id field in the example)

    9b74aab8e3f431f686a3edad7c4f21eb08e46a97.png
    9b74aab8e3f431f686a3edad7c4f21eb08e46a97.png1296×700 234 KB

  • Save your newly built map as a TopoJSON. (There is a button for that)

  • Open the TopoJSON file

  • Note the part at the end of the file looking like this: "transform":{"scale":[0.000775077507750775,0.0005000500050005],"translate":[0,0]},"bbox":[0,0,7.75,5]}

  • Modify the scale part to be "transform":{"scale":[1,-1],"translate":[0,0]},"bbox":[0,0,7.75,5]}

  • This will allow a correct projection and representation in Looker. (However it will not display correctly in gist’s maps anymore.)

  • The rest of the process is the same as when using TopoJSON of “real” maps and can also be used as map_layers.
    (For further details on this part please see this article.)

  • Load the TopoJSON in a gist.

  • Copy the URL from the “Raw” code.

  • Use the CDN URL provided by the “gist raw code” in Looker for your new map to appear.

9 Likes
2

Thanks Seb! I’ve just tried it out ��
The last few links (raw gist and the Looker article) are now broken, but once I loaded my TopoJSON file to gist and then copied the URL from the “Raw” code, I had no trouble visualizing my data with Looker’s custom maps option! Thanks for the guide.

1 Like
3

Thank you Ruth!
I’ve updated the article with the new link and where to get the Raw link from gist directly.

1 Like
4

Hi Sebastien! Thanks for sharing this article!

I’m wondering how the ‘id’ attribute links to dimensions in tables? Is there an ‘id’ dimension in the tables in Looker?

Can this static map be visualized as a heatmap based on a measure, like a count of users in the region?

Thank you!

5

Omg this is so helpful. Searched across tons of posts finally found this and solved my problem :slight_smile: