map – Terence Eden’s Blog

Minimum Viable Clustered-Marker Globe using OpenFreeMap and MapLibre GL

@edent — Tue, 14 Jan 2025 12:34:14 +0000

I love OpenFreeMap it is a quick, easy, and free way to add beautiful maps to your Open Source projects. With the latest release of MapLibre-GL I wanted to see if there was an easy way to use both to make an interactive globe with clustered markers.

Spoiler alert: yes!

Basic Globe

Here's a basic example which I've trimmed down from this example.

When you load the below code, you'll get a globe which you can spin and zoom. Nifty!



    
        Globe Projection using OpenFreeMap

Adding Markers

In most respects, this acts like a normal MapLibre GL map. To add a marker, add this code:

const marker = new maplibregl.Marker()
    .setLngLat([12.345, 54.321])
    .addTo(map);

GeoJSON Clusters

Now for the big one! On OpenBenches we display markers and clusters of markers. On a flat map, it looks like this:

We want to turn it into this beauty:

https://shkspr.mobi/blog/wp-content/uploads/2025/01/b169e7bb1cfc045f.mp4

Here's the code, adapted from the tutorial:

const map = new maplibregl.Map({
    container: "map",
    style: "https://tiles.openfreemap.org/styles/liberty",
    zoom: 2,
    center: [0.123, 51.2345],
    pitch: 0,
    canvasContextAttributes: { antialias: true }
});

map.on('style.load', () => {
    map.setProjection({
        type: 'globe',
    });
});

//  Load GeoJSON
async function load_GeoJSON() {
    const response = await fetch( "geo.json" )
    var benches_json = await response.json();
    return benches_json;
}

//  Asynchronous function to add custom layers and sources
async function addCustomLayersAndSources() {
    //  Get the data
    var geo_data = await load_GeoJSON();
    //  Load the GeoJSON
    if (!map.getSource('geo_data')) {
        map.addSource('geo_data', {
            type: 'geojson',
            data: geo_data,
            cluster: true,
            clusterMaxZoom: 17, // Max zoom to cluster points on
            clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
        });
    }

    //  Custom point marker
    if ( map.listImages().includes("marker-icon") == false ) {
        var image = await map.loadImage('/marker.png');
        map.addImage('marker-icon', image.data);
    }

    //  Add the clusters
    if (!map.getLayer('clusters')) {
        map.addLayer({
            id: 'clusters',
            type: 'circle',
            source: 'geo_data',
            filter: ['has', 'point_count'],
            paint: {
                // Use step expressions (https://maplibre.org/maplibre-style-spec/expressions/#step)
                // with three steps to implement three types of circles:
                //   * Blue, 20px circles when point count is less than 100
                //   * Yellow, 30px circles when point count is between 100 and 750
                //   * Pink, 40px circles when point count is greater than or equal to 750
                'circle-color': [
                    'step', ['get', 'point_count'],
                        '#51bbd655',
                    100, '#f1f07555',
                    750, '#f28cb155'
                ],
                'circle-radius': [
                    'step', ['get', 'point_count'],
                        20,
                    100, 30,
                    750, 40
                ],
                'circle-stroke-width': [
                    'step', ['get', 'point_count'],
                        1,
                    100, 1,
                    750, 1
                ],
                'circle-stroke-color': [
                    'step', ['get', 'point_count'],
                        '#000',
                    100, '#000',
                    750, '#000'
                ],
            }
        });

        //  Show number of markers in each cluster
        map.addLayer({
            id: 'cluster-count',
            type: 'symbol',
            source: 'geo_data',
            filter: ['has', 'point_count'],
            layout: {
                'text-field': '{point_count_abbreviated}',
                'text-font': ['Noto Sans Regular'],
                'text-size': 25
            }
        });

        //  Show individual markers
        map.addLayer({
            id: 'unclustered-point',
            source: 'geo_data',
            filter: ['!', ['has', 'point_count']],
            type: 'symbol',
            layout: {
                "icon-overlap": "always",
                'icon-image': 'marker-icon',  // Use the PNG image
                'icon-size': .1              // Adjust size if necessary
            }
        });
    }
}

//  Start by drawing the map
map.on('load', async () => {
    await addCustomLayersAndSources();
});

Obviously, there's a lot more you can do - but I hope this shows just how quickly you can get a clustermap working on a globe.

You can now buy my South Up, Aotearoa Centred, Equal-Earth Projection Map

@edent — Fri, 01 Dec 2023 12:34:45 +0000

I'm delighted to announce that I've actually finished a project!

Over the last few years, I've been designing a custom map. As per the credo of the "Organization of Cartographers for Social Equality", this map uses the Equal Earth projection to ensure proportional land-mass size, the South is at the up, and - of course - the globe has been rotated to 150°.

I've had it printed and I think it looks glorious!

Hanging on the wall

You can buy these maps from RedBubble.

Details

Buy

This is a large poster - I recommend buying the 120cm by 60cm version. It needs to be that size in order to make the country names legible. The cost per poster depends on your locale and whatever promotions RedBubble are doing.

These are not limited editions! I will print off as many as people order. Each one comes with a small inscription in the corner saying what the map is, and some other metadata.

As per below, you can download the assets in vector or raster format if you'd like to try printing them yourself.

Disclaimer

Maps are contentious. Some countries don't recognise other countries. Some borders are disputed. Some people clamour for reunification, some for secession. Some countries have a name given to them by their colonial oppressors. Some have been renamed by mad tyrants. Some countries have multiple names in different languages. Some are still fighting bloody wars in order to be recognised. Flags also suffer from the same problem.

The good news is that this is not an official map - my choices have no geopolitical consequences. The even better news is that the code behind the map is open source - so you can redraw it to your heart's content.

I have used the borders from Natural Earth, the country names from OpenStreetMap, and flags from Twemoji. If you dislike any of those, please direct your complaints to them.

Bugs

There are a few of things which have left me slightly dissatisfied.

By convention, most maps use Shaded Relief with the light coming from North-West. However, because this map is flipped, it cause an optical illusion which make mountains look like ravines and vice-versa. As noted:

Viewing images that do not conform to this convention may show a form of convex–concave ambiguity. Wikipedia page on "Top-Left" lighting

If you know how to redrawing or recalculate the shade, please let me know.

Secondly, in their default placement, country names and flags overlap. For example:

I manually adjusted the placement to keep labels and flags roughly in the right place without overlapping. I think I was accurate, but if you spot any mistakes - or know how to automate this - please let me know.

Non-Contiguous countries aren't handled well. For example, Alaska is unlabelled because it physically separated from the rest of the USA. The same is true of overseas territories like the Canary Islands and French Guiana.

The various seas, oceans, and other bodies of water aren't labelled.

I'm sure you will spot a few other errors. Either leave a comment here or raise an issue on GitHub.

How

This was a multi-stage process - mostly involving R.

Background

The background image comes from "Color terrain art without type halos". It's a TIFF which has been rotated and converted to PNG.

mogrify -rotate 180 Equal-Earth-Physical-Relief-No-Halos-150E.tif 
convert Equal-Earth-Physical-Relief-No-Halos-150E.tif EE-SU.png

Country Names

Natural Earth only provides country names in English ☹ - but it also provides 2 character ISO codes. So I grabbed the country codes and names from OpenStreetMap and merged them into the data set using R.

The Code

This produces the country borders and names onto an SVG.

Manual placement

I used Boxy to edit the SVG and place all names in roughly the right place.

Conversion

Inkscape was used to open the resultant SVG at 72dpi. I then used Gimp to autocrop, canvas expanded to 16000x9000, and saved as an uncompressed PNG.

The Emoji wouldn't import to either Gimp or Inkscape. So I viewed the file in Firefox and then printed it to a PDF. That PDF was cropped using pdfcrop and then imported to Gimp.

Some print shops require CMYK colour spaces - convert Export.png -colorspace cmyk Print-CMYK.tif

Copyright

All of the Equal Earth data has this copyright:

The Equal Earth Physical Wall Map is in the public domain. You may use the map any way you like, including modifying the content, reproducing it on any type of media, republishing it, and selling it for profit. Consider the map as yours. By downloading and using this map you agree that the map author (Tom Patterson) is not legally responsible for any errors that the map may contain. You are solely responsible for all problems that may arise from reuse of the map and its redistribution to third parties. Tom Patterson does not endorse the individuals or organizations that may use the map, nor does he endorse their positions on various issues.

It builds on Natural Earth, which is also public domain.

The Emoji flags are either CC BY or MIT - depending on whether you think SVGs are images or code.

In a similar spirit, the code that I've used to create my variation of the map, and the resultant output, is also hereby placed in the public domain. You may treat it as CC0.

South Up, Aotearoa Centred, Equal Earth Projection Map by Terence Eden is marked with CC0 1.0 Universal

Download

You can download all the code and assets from GitHub.

Buy

Running a Shortest Splitline Algorithm on the UK - and other mapping adventures

@edent — Sun, 11 Sep 2022 11:34:13 +0000

How do you fairly split a country into electoral subdivisions? This is a difficult problem. Whatever you choose, you'll piss off someone. A politician will be annoyed that their loyal voters are no longer in their district. And voters will be annoyed that they're now lumped in with people from the wrong side of the tracks. This is a very human problem. So let's ignore all the human aspects and run an impartial⁰ and unbiased¹ algorithm on the issue!

The Splitline Algorithm is, conceptually, very simple:

Divide the entire map in half based on population.
Repeat (1) for each half.
Once you have reached the target number of voters in each segment, stop.

There's an excellent paper about how to apply this to the USA's districts.

But, I couldn't find anything which applied the algorithm to the UK. So I thought I'd give it a go for fun².

First, start with the Office for National Statistics' Population Density Map

Before we even begin, there are a few obvious issues. Firstly, the map isn't contiguous. So what happens to the Shetland Isles (population 22,000) and the Isle of Wight (population 140,000)? There are, on average, 100,000 people to every MP³. Do Shetland Islanders want to be lumped together with 78k other people from the mainland who might not necessarily share their values? Do the people from the Isle of Wight want to be split in half with one half being tied to non-islanders?

The second (related) issue is NI. I'm not going to get into the long history there⁴. But I think it is fair to say that an algorithmic segmentation might cause a few raised eyebrows. So I'm going to concentrate on England, Scotland, and Wales for this section.

Here's a really naïve (and inaccurate) split based on eyeballing it.

Applying the algorithm again, and we can split the area into four equal population parts:

Repeat a few hundred times and you have equal population constituencies.

You could slice the country into long horizontal strips. That would be equal - but not necessarily practical.

OK, that's enough mucking around, time to try applying it for real.

Getting the data

The first question is what resolution of population do you want? Using country-level population density isn't fine-grained enough. Using existing constituency data is just going to replicate the existing boundaries. Like this:

So... street level?

ONS have local authority level data - which isn't quite granular enough for my purposes.

Instead, I downloaded a 1.2GB CSV from Data for Good at Meta (previously Facebook). The data looks like this:

"Lat","Lon","Population"
"50.62069444448494","-2.023750000001619","0.785894169690091"
"54.91486111115504","-1.378472222223325","3.3208914089403367"
"52.725416666708846","0.11152777777786699","1.116925979478443"
"52.72736111115329","0.12402777777787699","1.116925979478443"
"52.779583333375555","0.100694444444525","1.3609065999360417"

They have a GeoTIFF which renders the whole of the UK like this:

Zooming in to Edinburgh, shows the city is well-populated but not the countryside around it.

London, however, is dense. With occasional pockets of emptiness.

(Notes to self, to make a GeoTIFF into a browseable web map, run:

gdal_translate -of VRT -ot Byte -scale population_gbr_2019-07-01.tif temp.vrt

Then:

gdal2tiles.py temp.vrt

Finally, change to the newly generate directory and run python3 -m http.server 9000 and - hey presto - web maps!)

Python and Pandas Oh My!

import pandas as pd
df = pd.read_csv("population_gbr_2019-07-01.csv")
total_population = df['Population'].sum()

Gets us a total population of 66,336,531. Which looks right to me! Let's say we want 100,000 people (not voters) per constituency. That'd give us 663 areas - which is about what the UK has in the House of Commons⁵.

OK, which way do we want to split these data? A proposal by Brian Langstraat suggests splitting only in the horizontal and vertical directions.

First, let's sort the data South to North.

df = df.sort_values(by = 'Lat', ignore_index = True)

Which gives us

                Lat       Lon  Population
0         49.864861 -6.399306    0.573312
1         49.868194 -6.393472    0.573312
2         49.874306 -6.369583    0.573312
3         49.884306 -6.342083    0.573312
4         49.886528 -6.341806    0.573312
...             ...       ...         ...
19232801  60.855417 -0.886250    0.109079
19232802  60.855417 -0.885694    0.109079
19232803  60.855417 -0.885417    0.109079
19232804  60.855694 -0.884861    0.109079
19232805  60.855972 -0.884028    0.109079

Now we need to add up the Population until we reach total_population / 2 - that will tell us where to make the first cut.

half_population = total_population / 2
index = 0
cumulative_total = 0
for x in df["Population"] :
     if (cumulative_total >= half_population):
             print(str(index))
             break
     else :
             cumulative_total += x
             index += 1

That tells us that the row which is halfway through the population is 8,399,921.

df.iloc[8399921]

Gives us a Latitude of 52.415417 - which is Huntington. So a properly bisected map of the UK's population looks like:

50% of the population live above the black line, 50% live below it.

Let's take the top half and split it vertically.

df = df[8399921:]
df = df.sort_values(by = 'Lon', ignore_index = True)
total_population = df['Population'].sum()
half_population = total_population / 2
index = 0
cumulative_total = 0
for x in df["Population"] :
     if (cumulative_total >= half_population):
             df.iloc[index]
             break
     else :
             cumulative_total += x
             index += 1

Which gives us 52.675972,-2.082917 - an industrial estate in Wolverhampton.

In this map, 25% of the total population live to the East of the black line, and 25% to the West:

And this is where we start to see one of the problems with the naïve splitting algorithm. A chunk of Aberdeen has been sliced off from its neighbours. We can see that there will be a likely constituency of Shetlands, a bit of Aberdeen, and a slice of North-East England. These may not share common needs!

Straight-line slicing bisects otherwise "natural" groupings of people. Sure, gerrymandering is bad - but this sort of divvying up makes for the strangest bedfellows.

Shortest Splitline

The Shortest Splitline Algorithm doesn't is similar to the above but, rather than restricting itself to vertical and horizontal lines, looks for the line with the shortest distance which contains 50% of the population.

A Different Approach - South Up Algorithm

Let's just start at the bottom left of the map and work our way up.

Here's the South West (Scilly Isles not shown⁶.):

Let's plot everything, just to make sure the data are all there:

import matplotlib.pyplot as plt
df.plot(x="Lon", y="Lat", kind="scatter", c="black")
plt.show()

OK! Let's grab the first 100,000 people.

df = df.sort_values(by = ['Lat', 'Lon'], ignore_index=True)
target = 100000
index = 0
cumulative_total = 0
for x in df["Population"] :
     if (cumulative_total >= target):
             df.iloc[index]
             break
     else :
             cumulative_total += x
             index += 1

area = df[:index]

area.plot(x="Lon", y="Lat", kind="scatter", c="black")
plt.show()

Which results in:

Hurrah! Scillies and South West England! Exactly 100,000 people live in that area.

Let's do the next few in different colours

df = df.sort_values(by = ['Lat', 'Lon'], ignore_index=True)
df['Colour'] = pd.Series(dtype="U") # Add a Unicode string column for colour
target = 100000
index = 0
cumulative_total = 0

#   There is probably a much more efficient way to do this loop
for x in df["Population"] :
     if (cumulative_total <= target):
             df.Colour.iloc[index] = "mistyrose"
     elif (cumulative_total > target and cumulative_total <= target * 2):
             df.Colour.iloc[index] = "peru"
     elif (cumulative_total > target * 2 and cumulative_total <= target * 3):
             df.Colour.iloc[index] = "mediumpurple"
     elif (cumulative_total > target * 3 and cumulative_total <= target * 4):
             df.Colour.iloc[index] = "olivedrab"
     elif (cumulative_total > target * 4):
             break
     cumulative_total += x
     index += 1

area = df[:index]

area.plot(x="Lon", y="Lat", kind="scatter", c="Colour")
plt.show()

That's (mostly) going South to North, so we get those unnatural looking stripes which have weird incongruent chunks.

Bubble Split Algorithm

Rather than drawing lines, let's use a "Bubble Split" approach. Starting in, for example, the most South Westerly point in the dataset and then growing to its neighbours until it hits a population of 100,000.

This will use's SciPy's KDTree Algorithm

from scipy import spatial
import pandas as pd
import matplotlib.pyplot as plt
import numpy as np
df = pd.read_csv("population_gbr_2019-07-01.csv")
df = df.sort_values(by = ['Lat', 'Lon'], ignore_index=True)
points = df[["Lat", "Lon"]].to_numpy()
kdtree = spatial.KDTree(points)

# To find the nearest neighbour of a specific point:
kdtree.query( [59.1,-6.2] )[1]

counter = 1
population = 0
target = 100

while (population <= target):
   nearest_index = kdtree.query( [59.1,-6.2], [counter] )[1]
   population += df.loc[nearest_index, "Population"].values[0]
   counter += 1

population

Looping through is very slow and crawls to a halt after a few thousand iterations. So let's cheat. This grabs the nearest million points and finds their total population.

nearest_million = kdtree.query( [59.1,-6.2], 1000000 )[1]
df["Population"].iloc[ nearest_million ].sum()

There's no way to iterate through the results, so its easiest to grab a bunch and iterate through that instead.

counter = 0
population = 0 
target = 100000

while (population <= target):
    end     = (counter + 1) * 10000
    start   =  counter * 10000
    population += df["Population"].iloc[ nearest_million[start:end] ].sum()
    print("On " + str(end) + " Pop: " + str(population))
    counter += 1

These can now be plotted using:

indices = kdtree.query( [59.1,-6.2], end )[1]
to_plot = df.iloc[ indices ]

KDTrees are not designed to be altered - so deleting nodes from them is impossible. Instead, the nodes have to be deleted from the data, and then a new KDTree constructed.

index_to_delete = kdtree.query( [59.1,-6.2], end )[1]
df = df.drop(index = index_to_delete)
points = df[["Lat", "Lon"]].to_numpy()
kdtree = spatial.KDTree(points)

Bounding Boxes

Drawing a box around some points is useful. It provides a geographic border and also means we don't need to worry about map colouring algorithms.

For this, we'll use SciPy's ConvexHull algorithm:

import matplotlib.pyplot as plt
from scipy.spatial import ConvexHull, convex_hull_plot_2d
import numpy as np

indices = kdtree.query( [x,y], end )[1]

area = df.iloc[ indices ]

s_array = area[["Lat", "Lon"]].to_numpy()
hull = ConvexHull(s_array)
plt.plot(s_array[:,0], s_array[:,1], 'o') # Remove this to only display the hull

for simplex in hull.simplices:
    plt.plot(s_array[simplex, 0], s_array[simplex, 1], 'k-')

plt.show()

Here's the result - can you spot what I did wrong?

Putting it all together

This scrap of code reads the data, sorts it, constructs a KDTree, starts at the South West tip, finds the 100,000 people nearest to that point, and draws a bounding box around them:

#   Import the libraries
import pandas as pd
import matplotlib.pyplot as plt
from scipy import spatial
from scipy.spatial import ConvexHull, convex_hull_plot_2d
import numpy as np

#   Read the data
df = pd.read_csv("population_gbr_2019-07-01.csv")

#   Sort the data
df = df.sort_values(by = ['Lat', 'Lon'], ignore_index=True)

#   Create KDTree
points = df[["Lat", "Lon"]].to_numpy()
kdtree = spatial.KDTree(points)

#   Most South Westerly Point
sw_lat, sw_lon = points[0]

#   Get first 100,000 people
counter = 0
population = 0 
increment = 5000
target = 100000

while (population <= target):
    end     = (counter + 1) * increment
    start   =  counter * increment
    population += df["Population"].iloc[ nearest_million[start:end] ].sum()
    print("On " + str(end) + " Pop: " + str(population))
    counter += 1

#   Get the index numbers of the points with 100,000 people
indices = kdtree.query( [sw_lat, sw_lon], end )[1]

#   A separate DataFrame for drawing
to_plot = df.iloc[ indices ]

#   Flip Lat & Lon, because Lon is the X Co-ord, Lat is Y Co-ord
plot_array = to_plot[["Lon", "Lat"]].to_numpy()

#   Calculate the bounding box
hull = ConvexHull(plot_array)

#   Plot the points
plt.plot(plot_array[:,0], plot_array[:,1], 'o') # Remove this to only display the hull

#   Draw the hull
for simplex in hull.simplices:
    plt.plot(plot_array[simplex, 0], plot_array[simplex, 1], 'k-')

#   Display the plot
plt.show()

Which produces:

Running that a few more times gives this (sorry for chopping off the Scilly Isles):

Can you see why I call this "Bubble Split"?

Already we can see the limits to this approach. The orange-coloured subdivision has a little incongruent bit across the estuary of the River Fal.

Here's the (hugely inefficient and slow) code to generate 40 areas of roughly 100,000 people:

#   Import the libraries
import pandas as pd
import matplotlib.pyplot as plt
from scipy import spatial
from scipy.spatial import ConvexHull, convex_hull_plot_2d
import numpy as np

def get_100k_people(df, nearest_million) :
    counter = 0
    population = 0 
    increment = 1000
    target = 100000

    while (population <= target):
        end     = (counter + 1) * increment
        start   =  counter * increment
        population += df["Population"].iloc[ nearest_million[start:end] ].sum()
        #print("On " + str(end) + " Pop: " + str(population))
        counter += 1

    return end

def plot_hull(df, indices) :
    #   A separate DataFrame for drawing
    to_plot = df.iloc[ indices ]

    #   Flip Lat & Lon, because Lon is the X Co-ord, Lat is Y Co-ord
    plot_array = to_plot[["Lon", "Lat"]].to_numpy()

    #   Calculate the bounding box
    #hull = ConvexHull(plot_array)

    #   Plot the points
    plt.plot(plot_array[:,0], plot_array[:,1], 'o', markersize=1) # Remove this to only display the hull

    #   Draw the hull
    #for simplex in hull.simplices:
    #    plt.plot(plot_array[simplex, 0], plot_array[simplex, 1], 'k-')

#   Read the data
df = pd.read_csv("population_gbr_2019-07-01.csv")

#   Sort the data
df = df.sort_values(by = ['Lat', 'Lon'], ignore_index=True)

for areas in range(40):
    #   Create KDTree
    points = df[["Lat", "Lon"]].to_numpy()
    kdtree = spatial.KDTree(points)

    #   Most South Westerly Point
    sw_lat, sw_lon = points[0]

    #   Get the nearest 1 million points
    nearest_million = kdtree.query( [sw_lat, sw_lon], 1000000 )[1]

    #   How many points contain a cumulative total of 100k people
    end = get_100k_people(df, nearest_million)

    #   Get the index numbers of those points
    indices = kdtree.query( [sw_lat, sw_lon], end )[1]

    #    Draw
    plot_hull(df, indices)

    #   Delete used Indices
    df = df.drop(index = indices)
    df = df.reset_index(drop = True)

#   Display the plot
plt.show()

Other Choices

I made the rather arbitrary choice to start in the South West and proceed Northwards. What if, instead, we start with the point with the lowest population density and work upwards.

Here's a video of the sequence:

https://shkspr.mobi/blog/wp-content/uploads/2022/08/small-to-large.mp4

As you can see, it starts off pretty well, but the final few areas are randomly distributed throughout the map. I kinda like the idea of a meta-constituency of small villages. But I'm not sure if that's practical!

This next video starts with the highest population density and works downwards:

https://shkspr.mobi/blog/wp-content/uploads/2022/09/large-to-small.mp4

NB, there's no guarantee that the generated images will have dimensions be divisible by two - so here's some hacky ffmpeg code to crop the images! ffmpeg -framerate 1 -pattern_type glob -i '*.png' -c:v libx264 -r 30 -pix_fmt yuv420p -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4

Or, to scale the video to 1280 wide ffmpeg -framerate 1 -pattern_type glob -i '*.png' -c:v libx264 -r 30 -pix_fmt yuv420p -vf scale=1280:-2 output.mp4

Algorithms aren't neutral

It's tempting to think that computer code is neutral. It isn't. Even something as seemingly innocuous as choosing a starting point can cause radical change. It may be aesthetically pleasing to draw straight lines on maps - but it can cause all sorts of tension when communities are divided, or combined, against their will⁷.

It's a fun exercise to take population density data and play around with it algorithmically. It shows the power and the limitations of automated decision making.

LOL! ↩︎
Even bigger LOL! ↩︎
This is a personal blog. I don't work for the Boundary Commission. I do not have the power to enact this. ↩︎
It is, of course, a lot more complicated than that. ↩︎
Go watch the entirely accurate documentary "Derry Girls". ↩︎
Look, OK, it's complicated. There are conventions about The Speaker and all sorts of other electoral gubbins. This is just a fun weekend exercise. Let's not get hung up on it. ↩︎
Sorry Scilly Isles! I had a lovely holiday there. You should go visit! ↩︎
See, for example, the entire history of colonialism. ↩︎

Reprojecting Satellite Maps

@edent — Mon, 02 Aug 2021 11:03:35 +0000

Regular readers know, I'm Creating an "Organization of Cartographers for Social Equality" map. I've already had some success using an existing NZ Centric, Equal Earth Map. And I've programmatically created a correctly projected map with R.

But is it possible to do this with Satellite imagery? YES!

Install `gdal`

For this to work, you'll need GDAL - the Geospatial Data Abstraction Library. They're a handy set of tools for getting and manipulating maps.

Get the data

Sentinel-2 launched in 2015:

The Copernicus Sentinel-2 mission comprises a constellation of two polar-orbiting satellites placed in the same sun-synchronous orbit, phased at 180° to each other. It aims at monitoring variability in land surface condition

You can browse the maps on https://s2maps.eu/ and - best of all - the images are licenced under Creative Commons!

To download the data, run:

gdal_translate -of JPEG -outsize 1600 900 \
   "WMS:https://tiles.maps.eox.at/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=s2cloudless-2019&SRS=EPSG:4326&BBOX=-180.000000,-90.000000,180.000000,90.000000&FORMAT=image/jpeg&TILESIZE=256&OVERVIEWCOUNT=17&MINRESOLUTION=0.0000053644180298&TILED=true" \
   1600x900.jpeg

That downloads the map in EPSG:4326 projection, saves a JPG, and an XML file with metadata.

To see which different versions of the data are available, run:

gdalinfo "WMS:https://tiles.maps.eox.at/?SERVICE=WMS&"

See this StackOverflow answer for details.

Re-project the data

OK, we now have the data in WGS84 format. Let's squish it around into a different projection. In this case, Equal Area Cylindrical (cea), centred roughtly on New Zealand, and South side up:

gdalwarp -s_srs EPSG:4326 \
 -t_srs "+proj=cea +lon_0=146 +x_0=0 +y_0=0 +lat_ts=45 +ellps=WGS84 +datum=WGS84 +units=m +no_defs +axis=wsu" \
 -r near \
 -of PNG \
 1600x900.jpg out.png

Result

Click to embiggen.

🄯 CC BY-NC-SA "Sentinel-2 cloudless - https://s2maps.eu by EOX IT Services GmbH (Contains modified Copernicus Sentinel data 2020)"

Other Sources

There are a few other sources you can use.

Natural Earth provides great imagery.

NASA's World View gives realtime-ish satelite images.

More resources on the EOS blog.

Force Directed Graph of the London Tube Map - including CrossRail!

@edent — Sun, 14 Feb 2021 12:30:13 +0000

Force Directed Graphs of the London Underground have been done many times before - but I think I'm the first person to add the new Elizabeth Line (CrossRail).

I've also created a JSON graph of all of London's rail services - including DLR, Trams, C2C, ThamesLink etc.

Demo

Play with it yourself
Grab the code from GitLab
I've also created a version with every London station and train line.

Limitations

This is a quick weekend hack - don't expect polished code or performance!
"Overlapping" lines don't show. So where a route is served by multiple lines, you'll only see one of them.
Zoom is a bit shonky.
Relies on an older version of D3 (V5).

Background

Drawing the Tube map as a graph is a popular pastime. See these prior arts:

"Force-directed graph of tube lines" by Martin Zaltz Austwick (2011)
"Graph Drawing by Weighted Constraint Relaxation" (2017)
"What would the London Tube Map look like if Data Scientists designed it?" by Keith McNulty (2018)
"Going Underground: Graphing and Pathfinding London Tube Lines" by Joe Depeau (2019)
And many others.

I forked some code from Massimo Santini.

Chris Bell maintains an excellent CSV of all London stations and their connections

The official colours for each line can be found in TfL's colour branding guide and in hex versions at Oliver O'Brien's site.

What's next

Possible ideas - feel free to contribute on GitLab.

Experiment with different layout algorithms.
Weight links according to speed, distance, business, or some other metric.
Better colour options for non-TfL lines.
More efficient code.