A Custom Map is a great way to tailor a visualization in Einstein Analytics to your needs. Combined with Conditional Formatting you can create amazing solutions or even “multi-layer” views.

In my use case, I wanted to show the major earthquakes on the Big Island of Hawaii with a Custom Map in an overlay of the topographic map (Please note that the final dashboard is a POC and isn’t complete or up-to-date data wise). My goal was to allow the background image to shine thru the top data layers to give additional context without losing details of the topographic map.

 

1. Create shapes in Inkscape

To create my Custom Map I used the free illustrator tool Inkscape. It allows you to create your vector graphic which can later be transformed into GeoJSON format (standardized way to describe polygons in JSON format). As I wanted to create an overlay I used my background image as a starting point and added the shapes on top of it. Be careful not to overlap the shapes if possible as this will create later in the process additional work.

After I created all my shapes, I added additional shapes in each of the corners of the background picture. Those “helper” shapes create the outline of your Custom Map with the same size as your background picture. Without those corner shapes, your custom map won’t fit anymore to your background image and it is hard to match the overlay with it’s exact position  (The corner shapes help to align the size of the custom map but it won’t be 100%).

After you created all the shapes you need you can save the file as “.svg” so you can always go back to it and make modifications. To transform it into GeoJSON we need to save it for now as “.dxf” format. This format can be interpreted by Web tools like 2geojson.com to be transformed into GeoJSON.

 

 

 

 

2. Transformation into GeoJSON

In my use case, I leveraged 2GeoJSON to transform the “.dxf” format into GeoJSON. For the Input format, you can select the DXF format and choose the file which was exported from Inkscape. Simply push SUBMIT and you can download your GeoJSON for free without login or signup etc.

 

3. Add attributes to your GeoJSON

To enable Einstein Analytics to use the GeoJSON correct as a custom map you need to connect your shapes to data points. Einstein Analytics uses an exact name match for this. This means you need to assign to every shape you want to use an id and a name (Einstein Analytics uses the field “name” to match die Custom map to the data, any other field name won’t work). To do this we can use mapshaper.org,  Michael Lowe (Salesforce) created a great how-to video about this which you can find here.

 

Simply select your GeoJSON and click open.

 

 

As a first step, you need to click the “i” info button, this enables you to select shapes. By default, the shapes consist of polylines. To make it useable for Einstein Analytics we need to transform them into polygons. For this, we need to open the Console and write a line of code. A full list of available features is accessible when you type  “$ help” in the console.

With “$ polygons”, mapshaper transforms your polylines to polygons. Now we are able to click in the different shapes and they can be selected.

In the next step, we need to add id’s to the shapes so they can be used in Einstein Analytics. With “$ each id=id” you can create an id field for each shape. If you assign the same id to different shapes they can later be dissolved (clustered together). This is especially helpful when shapes are not yet connected or apart from each other but should be shown together when one element is selected.

In my example, I didn’t pay too much attention when I created the shapes in Inkscape so they are not connected yet. I just need to click on each of the elements and give both the id “4”.

 

After I dissolved the field id with “$ dissolve field=id” the shape is connected and is shown together whenever the id “4” or it’s connected name is selected.

Now it is time to give each shape a name. Simply select the shape and click in the attributes. As default you will have “null” as name, just override this with your final name. Most importantly make sure that those names correspond with your datapoint names so Einstein Analytics can make the connection between the data and the custom map.

Now the GeoJSON is ready to export. Hit  “Export” on the top right.

 

4. Import GeoJSON into Einstein Analytics

The UI to import the custom maps are under the following URL, just replace the ## with your org instance.

https://na##.salesforce.com/analytics/wave/web/insertmap.apexp

The UI is straight forward. Step 1. Upload your GeoJSON and give it a name, then hit “Insert” in this section. The bottom section is empty at this point.

In step 2 select your GeoJSON in the bottom drop down box and select projection “Equirectangular” if it is not a Lat/Long map. Set a name and hit “Inster Map”

5-6. Conditional Formatting with Custom Map

The new Custom Map is now available in the dropdown in your Map Type. The default shows the colouring based on value.

To create the desired design effect I changed the Conditional Formatting within the Custom Map to the dimension I wanted to distinguish by.

To be able to create an overlay I used a layout container and set my initial picture as the background picture. The background colour of my map is set to transparent.

 

With this, I’m able to move the custom map in the layout container. The size should match pretty exactly as we used our corner shapes to preserve our background picture to map ratio.

In the last step, I changed the conditional formatting for each of my dimension names and gave it a half transparent colour so I still can see the background picture.

 

 

 

 

 

7. Integrate Interactions, faceting, Tooltips etc.

Via facetting, the map is fully interactive with your data. This way you can enable your user with a simple to understand and a customized solution tailored to their needs.

In my final version, I used Chart Markers for the epicentres of the earthquakes. With the setting “blinking when closed” the eye of the user is guided directly to the crucial points in the map. With tooltips, you can bring all the information into the Custom Map. This way all information can be seen in context without forcing the user to check detail information in a separate list or widget.

 

 

Summary

1. Inkscape:
   • Open your background picture you want to base your Custom Map on
   • Create the shapes on top of the background picture, this will later be used for your map.
   • Colours or another formatting will be ignored when you save the file as “.dfx”.
   • Inkscape: Save your Custom Map as file format “.dfx”.
2. 2geojson:
   • upload the “.dfx.” file and transform it into GeoJSON
3. mapshaper.org
   • import the GeoJSON file
   • open console
   • transform polylines to polygons type: “$ polgyons” in the console
   • create id fields for each shape via console”$ each id=id”
   • set all id’s on the shapes, assign the same id for shapes which should be shown together
   • cluster your id’s by id number “$ dissolve field=id”
   • create name fields for each shape/cluster via console “$ each name=name”
   • set all names for the shapes, names must match with data points used in Einstein Analytics if they should interact with the data.
   • export GeoJSON of your Custom Map
4. Import Custom Map in Einstein Analytics
   • “na##.salesforce.com/analytics/wave/web/custommap.apexp” ## stands for the number of your instance
5. Use new Custom Map
   • Select new Custom Map in Map Typ
   • Set Background transparent
   • Create a layout container with a background image
   • Move the Custom Map on top of the Layout container.
   • Align Seizing
6. Conditional Formatting
   • select your dimension or measure as the base for conditional formatting
   • if needed replace colours for each “Pick Value”
7. Add interactions, faceting, tooltips etc.

 

References and Sources

• Salesforce Blog “Art of Possible: Building Custom Maps in Wave“
• Trailblazer Community Einstein Analytics -> search for “Custom map” you will find a bunch of GeoJSON
• Trailhead “Create a Custom Map for Analytics Charts”
• Campfire Mini-Series E21 Analytics GeoJSON
• Custom Map Shapes from Michael Lowe (Salesforce)
• Salesforce Help Custom Map

GeoJSON map Collection

• Highchart

GeoJSON tools

Transformation and cleanup

• http://www.mapshaper.org/
• http://ogre.adc4gis.com/

Create your own custom GeoJSON areas

• http://geojson.io

 

 

 

 

Helpful Inkscape videos