Mapping African Conflicts using Leaflet

Hey there,

today I decided to do a little more advanced Leaflet turorial:

We will be using open source data in csv-format to generate a geojson file with R and finally create a web map using Leaflet.

If you dont want to use R, simply skip the first part and jump right into the Leaflet part. You can download the generated geoJson file below.

First lets get the data:

Download:

We will be using ACLED Data, which stands for:

ACLED (Armed Conflict Location and Event Data Project) is designed for disaggregated conflict analysis and crisis mapping. This dataset codes the dates and locations of all reported political violence events in over 50 developing countries. (http://www.acleddata.com)

To download the same dataset as I am using in the tutorial, go on the web page and download the Realtime Data (2015) as .csv.

When you open the data in Excel, its a messy dataset, out of this we are going to build a geojson file in R:

CSV to geoJson with R:

This is actually quite simple and can be done with a few lines of code. What you need is the rgdal package, some minor data transformation and the functions SpatialPointsDataFrame() and writeOGR().

#get rgdal package
install.packages("rgdal")
library(rgdal)

#read .csv file
conflicts <- read.csv("ACLED All Africa File_20150101 to 20150207.csv")

#first convert the LAT/LONG COL to character and then to numeric
conflicts$LATITUDE  <- as.character(conflicts$LATITUDE)
conflicts$LONGITUDE  <- as.character(conflicts$LONGITUDE)
conflicts$LATITUDE  <- as.numeric(conflicts$LATITUDE)
conflicts$LONGITUDE  <- as.numeric(conflicts$LONGITUDE)

#delete NA values
conflicts <- na.omit(conflicts)

#create a geoJson
conflicts <- SpatialPointsDataFrame(conflicts[,c(20,19)],conflicts[,-c(20,19)])

writeOGR(conflicts, 'conflicts.geojson','conflicts', driver='GeoJSON')

Start mapping:

Prepare file for Leaflet:

Once you created the geoJson file, open it and write the following JavaScript Code in the first line:

var conflicts =

And place a semicolon at the very end of the geoJson file!!

The file now should look like this:

You can download the final geoJson file here.

Include Libraries/Extensions and geoJsonfile in <head>:

Now open a new html file in your web editor and edit the <head> as following:

<head>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet-providers.js"></script>
<script src="conflicts.geojson"></script>
</head>

The first line includes the Leaflet Library into your webpage, the second line includes the Leaflet-Providers Extension, which you can download here. You can also get more information on the Leaflet-Provides Extension from a previous tutorial.

The third line of code includes the geojson file we just created into your webpage.

Create the Map:

First some HTML and CSS: Inside the <body> tag create an empty <div> container for the map:

<div id="map"></div>
<style>  
#map { height: 500px; }  
</style>

Finally Leaflet:

And here the final JavaScript Code I used:

 <script>     
   
 //Set the view coordinates of the map and the zoom:
 var map = L.map('map').setView([40.18, 18.37], 2); 
      
 //Use "CartoDB.DarkMatter" as TileLayer provider
 L.tileLayer.provider('CartoDB.DarkMatter').addTo(map);
       
      //add the geoJson File to the map and style it:
       geojson = L.geoJson(conflicts, {    
           
            //this makes circles out of the standard leaflet marker pins
            pointToLayer: function(feature, latlng) {               
                return new L.CircleMarker(latlng, {
                    radius: 5,
                    fillColor: "red",
                    color: "#000",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.4
                });
            },

           //bind a Pop-Up Window on each Circle to display some information from the geoJson File
           onEachFeature: function (feature, layer) {
                layer.bindPopup("<b>Event Type: </b>" + feature.properties.EVENT_TYPE + "<br>" +
                                "<b>Country: </b>" + feature.properties.COUNTRY + "<br>" +
                                "<b>Location: </b>" + feature.properties.LOCATION + "<br>" +
                                "<b>Details: </b>" + feature.properties.NOTES);     
    }}
        ).addTo(map);
</script>

You can see the final result online here.

I hope this example showed you how fast and simple it is to grad open source data, transform them into a readable format with R and use it to create a fancy leaflet map.

If you have any question regarding the code, drop me a line in the comments.

Cheers

Martin