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.