Custom TopoJSON maps (beyond world maps)

[sebastienfabri]

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:

To this map in Looker

###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:

gist.github.com

https://gist.github.com/anonymous/fba60e7ddb0290eddedff4c778e165d1

map.geojson

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [

This file has been truncated. show original

Which allowed me to eventually build this:

gist.github.com

https://gist.github.com/anonymous/2bf21eb654024a1543fbbe1b3d17bf5c

map.geojson

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stroke": "#555555",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "fill": "#555555",

This file has been truncated. show original

• 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)
  

  

• 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.

[Ruth_O]

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.

[sebastienfabri]

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

[cyou]

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! 

[Okrasee]

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