How to make a data-driven map: Part One
Tags: javascript, map, dataviz, leafletjs
Published: 2019-07-19 15:47:26

*Cross posted from [Create With Data](https://www.createwithdata.com/make-a-data-driven-map-part-one/)*

This four part tutorial shows how to make a data-driven map using JavaScript.

We'll visualise electric vehicle chargepoint locations on a map:

<a href="https://codepen.io/createwithdata/live/ewoVGE"><img src="https://www.createwithdata.com/images/make-a-data-driven-map/finished.jpg" /></a>

The data comes from the UK's [National Chargepoint Registry](https://www.national-charge-point-registry.uk/) and we'll use [Leaflet](https://leafletjs.com/) to generate the map. Leaflet is an open source JavaScript library for creating interactive maps. It's a bit like Google Maps, but open source.

We'll use CodePen to develop our code as it requires minimal set-up so you can be up and running quickly.

## What to expect

In Part One you'll learn how to create the background map using Leaflet.

Part Two will cover loading CSV data and plotting the locations on the map.

Part Three will cover styling the points in a data-driven fashion. For example, the points will be coloured according to the operator of each charge point.

The final part will add a title, legend and an information pop-up for when a point is hovered.

## Getting started

Go to [CodePen](https://codepen.io/) and create a new pen. (If you're not familiar with CodePen, check out my [Visualising Data with JavaScript tutorial](https://www.createwithdata.com/visualising-data-with-js-getting-started/).)

Clicking on the cog in the JS panel and add `https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js` to the 'Add External Scripts/Pens' list:

<img src="https://www.createwithdata.com/images/codepen-include-leaflet.jpg" />

In a similar manner, click on the cog in the CSS panel and add `https://unpkg.com/leaflet@1.4.0/dist/leaflet.css` to the 'Add External Stylesheets/Pens' list.

<img src="https://www.createwithdata.com/images/codepen-include-leaflet-css.jpg" />

Finally click 'Change View' and select the arrangement with the output window on the right:

<img src="https://www.createwithdata.com/images/codepen-change-view.png" />

This arrangement will suit your chart better.

## Create a map

There are three steps to creating a map using Leaflet:

- add an HTML element to contain the map
- add a CSS rule to set the size of the map
- add JavaScript to create the map



### Add map container

In the HTML panel add a `<div>` element to act as a container for the map. Give it an id of `map` so that we can reference it from Leaflet:

``` html
<div id="map"></div>
```



### Set the size of the container

It's important to set the height of the container otherwise your map will be invisible!

We'd like our map to fill the window so add the following style rules to the CSS panel:

``` css
html, body {
  height: 100%;
  margin: 0;
}

#map {
  height: 100%;
}
```

>You can set the width and height of `#map` to whatever you like. For example, try setting the width and height to `400px`.



### Create the map

Typically a Leaflet map consists of a map object and a number of layers. Leaflet supports a number of layer types including: tiles, markers, polygons, GeoJSON and more.

Let's start by creating a map object. In the JavaScript panel add:

``` javascript
var map = L.map('map');
```

Now create a tile layer and add it to the map:

``` javascript
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

tileLayer.addTo(map);
```

>Our code is using Open Street Map's tile server but you can choose from a number of different servers. A great resource for exploring available servers is the [Leaflet Provider Demo](https://leaflet-extras.github.io/leaflet-providers/preview. Note that different tile providers have different terms of use. If your map is likely to receive a lot of traffic then it's important to check that you're staying within any usage limits. It's also important to add attribution for whichever provider you're using.

A tile layer connects with a map tile server and requests tiles for a given location and zoom level. Each tile is a small image e.g.

<img src="https://www.createwithdata.com/images/make-a-data-driven-map/map-tile.png" />

When Leaflet receives each tile it places them in a grid layout to make up the map.



Now set the view location and zoom level of the map using `map.setView()`. The first argument is an array `[latitude, longitude]` and the second argument a zoom level. The higher the zoom level the more zoomed in the map is:

``` javascript
map.setView([55, -2], 6);
```

There should now be a map in the output pane:

<img src="https://www.createwithdata.com/images/make-a-data-driven-map/basemap-1.jpg" />

Note that you can zoom and pan around the map (in a similar manner to Google Maps).



## Styling the map

Although you can change the style of the basemap by choosing a different tile provider (see previous section) you can also style the tiles using CSS filters.

To make the map grayscale add the following to the CSS panel:

``` css
.leaflet-container .leaflet-tile-pane img {
  filter: grayscale(1);
}
```

This'll make the coloured circles we'll add in Part Two stand out more.

<img src="https://www.createwithdata.com/images/make-a-data-driven-map/basemap.jpg" />


Here's the finished code on Codepen:

{% codepen https://codepen.io/createwithdata/pen/ZdZvXY %}




## Wrapping up

We've created a Leaflet map and made it grayscale by adding a CSS rule.

In the next part we'll load in the data (using [D3](https://d3js.org/) and draw each data point on the map.

<img src="https://www.createwithdata.com/images/make-a-data-driven-map/points.jpg" />

In the meantime have a play around with the map. Some things you can try are:

- explore the other tile providers from [Leaflet Provider Demo](https://leaflet-extras.github.io/leaflet-providers/preview)
- resize the map (using CSS)
- style the map (using CSS filters). Other filters include `opacity` and `sepia`.

Happy mapping and I hope to see you in the next part!