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.  

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, open a Datawrapper locator map and go to step 1: Add markers. Click on Import line and area markers. You can now copy and paste the GeoJSON in the text field, or upload it as a file.

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.
desktop	--	TRUE, FALSE, True, False, 1, 0. If the markers appear on wide screens.
mobile	--	TRUE, FALSE, True, False, 1, 0. If the markers appear on narrow screens.