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

1

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.

2

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 GeoJSONs and in CSV, 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 the 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 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.
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, 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.
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.
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.5 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 -- 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 -- 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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us