How to style your markers before importing them to Datawrapper

Sometimes you want to import a lot of markers. Sometimes you want to create multiple maps with slightly different styled markers. Sometimes, copying & pasting marker styles is not enough. 

Good news: You can give a GeoJSON extra properties (and a CSV extra columns) that define your marker styles before you upload them to the Datawrapper locator tool. That works for point, line and area markers.  

Attention: This article is a bit advanced.

We'll try to do our best to cover everything necessary, but it's definitely an advantage if you've worked with GeoJSONs before. 

Each marker kind can have different properties. We will look at them in the minute – but first, let's define where they go in a GeoJSON and in an CSV. 

How to style area/line/point markers in a GeoJSON

In your GeoJSON, they should go in the section that says properties. In the following GeoJSON, we define the fill color, the outline color and the outline width. In this case, we do this for an area ("polygon"), but we could import line markers or point markers with a GeoJSON, too. 

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "fill-color": "red",
        "line-color":"blue",
        "stroke-width": 3
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -1.0546875,
              34.30714385628804
            ],
	    // more coordinates go here.
          ]
        ]
      }
    }
  ]
}

In this case, "fill-color" is our property name. "red" is a value.

Once you're happy with your properties, you can copy & paste the GeoJSON into step 1: Add markers in the Datawrapper locator maps.

How to style point markers in CSV

With a GeoJSON, you can define point, line and area markers. With a CSV, you can only define point markers. To do so, your CSV needs two columns for coordinates (longitude & latitude). You can add additional columns for styling: 

lat lng title color icon scale anchor
13.40477 52.544416 A cloud! black cloud-inv 1 top-center
-44.94993 64.774125 Snow! white snowflake-o 2 bottom-center
-59.94146 31.952162 #cc0000 flash 2 middle-right


In this case, "icon" is a property name. "flash" is a value of that property. Our property names are in the first row of the CSV; the values are in the rows below. In your actual CSV, each cell will be separated by a comma, like this:

lat,lng,title,color,icon,scale,anchor
13.40477,52.544416,A cloud!,black,cloud-inv,1,top-center
-44.94993,64.774125,Snow!,#cc0000,snowflake-o,2,bottom-center
-59.94146,31.952162, ,green,flash,2,middle-right

Once you're happy with this styling, click on the "Import GeoJSON or CSV" button in step 1: Add markers. Choose your CSV and click "ok". Your points should now appear on the map.

Styling properties for line markers

Now that we know how to get our properties into GeoJSONs and CSVs, let's see what we can style. We start with the properties for line markers: 

Property name Alternative property names Possible values
name Name, NAME, title, Title, TITLE Any word or phrase (e.g. "subway line"). This text won't appear on the map, but only in the marker list.
color stroke, stroke-color, line-color Hex code ("#cc000") or html color names ("royalblue") 
opacity stroke-opacity Any number between 0 and 1. 
stroke-width line-width Any number between 0 and 20.

Styling properties for area markers

Let's continue with the properties for area markers: 

Property name Alternative property names Possible values
name Name, NAME, title, Title, TITLE Any word or phrase (e.g. "subway line"). This text won't appear on the map, but only in the marker list.
color stroke, stroke-color, line-color Hex code ("#cc000") or html color names ("royalblue") 
opacity -- Any number between 0 and 1. You can also define "stroke-opacity" and "fill-opacity" separately. 
line-width stroke-width Any number between 0 and 20.
stroke-color stroke, line-color Hex code ("#cc000") or html color names ("royalblue").
fill-color fill Hex code ("#cc000") or html color names ("royalblue").
stroke-width line-width Any number between 0 and 20.

Styling properties for point markers

And here are the properties and possible values for point markers: 

Property name Alternative property names Possible values
color marker-color, fill Hex code ("#cc000") or html color names ("royalblue") 
name Name, NAME, title, Title, TITLE Any word or phrase (e.g. "Empire State Building"). This will be the marker text.
icon symbol A valid name for one of our icons. You can go to our locator tool and hover over the icons to get to know their names. You can also find them at the end of this article.
anchor -- One of the following values: top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center, bottom-right
scale -- A number between 0 and 12
text-bold -- TRUE, FALSE, True, False, 1, 0 
text-italic -- TRUE, FALSE, True, False, 1, 0 
text-underline -- TRUE, FALSE, True, False, 1, 0 
text-space -- TRUE, FALSE, True, False, 1, 0 
text-fontSize -- ??????
text-color -- Hex code ("#cc000") or html color names ("royalblue") 
text-halo -- TRUE, FALSE, True, False, 1, 0 

Still need help? Contact Us Contact Us