Tutorial to map your tweets

After draining William’s knowledge and energy this afternoon … (thank you sooo much!!) … I managed to do some pretty awesome stuff with SlippyMapper and Twitter.

I am posting the whole code here for everyone to get what you need from it but basically it has several steps on it.

Firstly we need to traverse the twitter JSON file, which can already be a challenge. For that you can check Angela’s awesome tutorial here.

When you already have managed to get the data from your json file you might realize that you have tons of tweets and you just want to filter some of them.

This code filters the tweets that have location (coordinates) on them but you could apply it for some other variables (I guess). The code then creates a new file with only the tweets that fulfill the requirement of your conditional.

import json
# filering out the tweets that do not have coordinates and write them in a file
def filterTweets():
    with open('tweetswithlocations.json', 'w+') as f:
        with open('CatalanReferendum_all.json') as file:
            for row in file:
                data=json.loads(row)
                geo = data['geo']
            
                if geo is not None:
                    tosave = json.dumps(data)
                    f.write(tosave + '\n')
                    print(tosave)

When you have the new file you can then start mapping!!

Basically this code is doing several things.

1. Rendering the slippymapper map for the whole world
2. Getting the latitude and longitude of each tweet to place a marker on that position.
3. Adding data to that marker. In this case it is the text of the tweet but it could be anything else.
4. Making it interactive by only displaying the data (tweet texts) when you hover over the markers.
5. Creating an interactive zoom with the mouse. The map zooms in towards that direction when you left click a marker and zooms out when you right click.

So, if you are interested in doing any of these things just check the code! I tried to explain every step within the code, I hope it is clear.

import spatialpixel.mapping.slippymapper as slippymapper
import json
from filteringwithlocation import *
def setup():
    size(1000, 800, P2D)
# creating the zoom variable to be able to make the zoom interactive later 
    global world, zoom
    # setting up the initial zoom to 2
    zoom = 2
    # connecting the variable world with slippymapper and setting the location and zoom
    world = slippymapper.SlippyMapper(0, 0, zoom, 'carto-dark', width, height)
    
    withLocations = []
    
    # opening json and making processing read the titter json file by rows
    with open('tweetswithlocations.json') as file:
        for row in file:
            data=json.loads(row)        
                     
    # appending the tweets data in withLocations
            withLocations.append(data)
                                                         
    # getting the latitude and langitude as separate values from the twitter file
    for tweet in withLocations:
        lat, lon = tuple(tweet['geo']['coordinates'])
        print(lat,lon)
        
    # getting the text of the tweet from the twitter file   
        TweetText=(tweet['text'])
        
    # adding the Datamrker with the text embeded         
        world.addMarker(lat, lon, TweetMarker({'text':TweetText}))
     
    world.render()
    
def draw():
    background(255)
    world.draw()
    
    # writing the title
    textSize(18)
    text('#Catalonia, #CatalanReferendum, #Catalan Independence, Catalan', 50,50)
# creating a class for the DataMarker with the text of the tweet as the data of the marker     
class TweetMarker(slippymapper.DataMarker):
    def drawMarker(self, x, y, marker):
        txt = self.data['text']
   
    # making the marker interactive. When you hover the market you get the text      
        if dist(x, y, mouseX, mouseY) < 7:
            # setting the marker text as the tweets text and its position and color
            marker.fill(255)
            marker.text(txt, 10, height - 200)
        
        marker.stroke(255)
        marker.ellipse(x, y, 5, 5)
# creating the zoom interaction with the mouse
def mouseClicked():
    global world, zoom
    lon = world.xToLon(mouseX)
    lat = world.yToLat(mouseY)
    
  # making zoom in
    if mouseButton == LEFT:
        zoom += 1
        # defining maximum zoom in
        if zoom > 18:
            zoom = 18
# making zoom out
    elif mouseButton == RIGHT:
        zoom -= 1
        # defining maximum zoom out
        if zoom < 1:
            zoom = 1
    
    
    world.setCenter(lat, lon)
    world.setZoom(zoom)
    world.render()

Credits to William. Thanks again!

If you spot any mistake or you have an idea of how to improve the code or explain it better, please, let me know and I will try to improve it as fast as I can.

Here you can get an idea of what the code does: