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

Warning: 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 and CSVs before. 

Each type of marker can have different properties. We will look at these properties in a minute — but first, let's define where they go in a GeoJSON and in an CSV. 

1

How to define area/line/point properties in a GeoJSON

In your GeoJSON, they should go in a section that says properties. In the following GeoJSON, we define the fill color, the outline color, and the outline width. In this example, we are styling an area (or "polygon"), but we could style 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 and "red" is its value.

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

2

How to define point properties in CSV

With a GeoJSON, you can define area, line, or point markers. With a CSV, you can only define point markers. To do so, your CSV needs two columns for coordinates (longitude and 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 and "flash" is one of its values. Our property names are in the first row of the CSV; the values are in the rows below.

In GeoJSONs and in CSVs, there is no need to define all properties explained in this article. The properties that you don't define by hand will be set to their default value.

Also, your GeoJSON or CSV might have additional properties defined. Don't worry about them. Datawrapper looks only for the property names explained in this article and ignores the rest.

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.

A

Styling properties for  L I N E  markers

Now that we know how to get our properties into GeoJSONs and CSVs, let's see what we can style. We'll 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, 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.
B

Styling properties for  A R E A  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, 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.
C

Styling properties for  P O I N T  markers

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

Property name Alternative property names Possible values
lat latitude, x
lng longitude, lon, y
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 as a list below.
marker-symbol markerSymbol The one character that is placed within an icon, e.g. "1" or "C". This only works for the icons circle, square, round-square, locator, certificate, and heart. The character will be ignored for all other icons.    
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 marker-size A number between 0.5 and 12, or "small," "medium," "large"
text-bold -- TRUE, FALSE, True, False, 1, 0 
text-italic -- TRUE, FALSE, True, False, 1, 0 
text-space -- TRUE, FALSE, True, False, 1, 0 
text-fontSize -- A number between 0 and 40
text-color -- Hex code ("#cc000") or HTML color names ("royalblue") 
text-halo -- Hex code ("#cc000") or HTML color names ("royalblue")  
tooltip description
Any word or phrase. This will be the tooltip text. HTML works, too.
D

Icon names for  P O I N T  markers

Here you can find all the symbol names you can reference when creating pointer marker.