How many times you've seen an image and thought how much it would be useful on your dashboard if you could somehow convert it in to the geoJSON format to interact with your data.
Using custom maps in Einstein Analytics dashboard not only provides a simpler way of data visualizations but also helps the user to slice and dice data with more clarity. A big shout out to Michael Lowe on his simple method of creating custom maps using a Scalable Vector Graphic (SVG) file (watch video). Unfortunately, not every image is available in the SVG format or it adds another step of JPEG/ PNG to SVG conversion. We have now various ways to use custom maps with pre-built geoJSON (thanks to the contributions of Rikke Hovgaard). However, sometimes we have a very nice and simple picture available in a PNG or JPG/JPEG format that reflects our data in a much simpler way but finding a SVG or geoJSON for every image is very difficult.
In order to create a custom geoJSON from an image, all you’ll need four things (plus Tableau CRM):
1. The image in JPG/JPEG/PNG format that you want to to use in the dashboard (keep an eye on the copyrights)
2. Inkscape (It's free and simple to use, available here)
3. geoJSON Converter (various online tools are available)
4. Mapshaper.org and some of it's console commands
Step 1: Create a DXF layer on your image for map outlining
Open your selected image in the Inkscape, and create an outline of your map entities using any drawing tool (I prefer using the "Draw Free Hand Lines" tool, but for sake of simplicity in this video, I used "Create Rectangle and Squares" tool). Make sure to fill all the shapes with some solid color, and then save the file as .dxf format.
Step 2: Convert the DXF file to geojson format
There are several online converters available. I used this allot in past but I am facing some download issues with the site nowadays. So, I recently discovered this another online converter (ogre.adc4gis.com) and it worked great too. All you have to do is upload the .dxf file and download it as a geoJSON format. Make sure to check the box for the "Force Download".
Step 3: Mapshaper.org is your best friend
Mapshaper is an amazing tool that provides flexibility of adding attribute values to the maps. Upload/ drag n’ drop your newly created geoJSON in the Mapshaper canvas. Open the console and type the following commands in this order:
polygons
each name = name
Click on the arrow to open sub-menu, and click data. This will enable to you add attributes to your map. Make sure to name every shape in the map, otherwise all remaining un-named shaped will be dissolved as “null”.
dissolve field name
Now that you have dissolved all shapes, export your map as geoJSON file.
Step 4: Create a Tableau CRM dashboard
Create a blank dashboard with maximum (or high resolution layout with 40+ columns), and add a container widget. In widget properties add your JPG/JPEG/PNG image as the background image of the widget.
Now create the lens in the container from your data set, and change the widget type to Map. In the widget properties, click “+” to upload your new geoJSON file as a custom map. Make sure to adjust the widget properties to become transparent attributes so it shows the image in the background. Follow the rest of steps as outlined in the video below, and enjoy a cool & custom geoJSON map interacting with your data.
Comments