champagne anarchist | armchair activist

Leaflet

Embedding tweets in Leaflet popups

I just created a map showing where so-called Biro’s (small cars) are parked on the pavement and annoying people. Twitter has quite a few photos of the phenomenon. In some cases, finding their location took a bit of detective work.

First you’ll need the embed code for the tweet. You can get it manually from the Twitter website, but if you want to automate your workflow, use a url like the one below. It’ll download a bit of json containing the embed code:

https://publish.twitter.com/oembed?url=https://twitter.com/nieuwsamsterdam/status/958761072214896640

When trying to embed the tweets in Leaflet popups, I ran into a few problems:

  • When popups open, the markers didn’t properly move down. As a result, most of the popup would be outside the screen. The problem and how to solve it are described here.
  • Twitter embed code contains a script tag to load a widget. Apparently you can’t execute javascript by adding it directly to the html for the popup content, but you can add it using a selector (cf here).

Here’s the code that’ll solve both problems:

map.on('popupopen', function(e) {
    $.getScript("https://platform.twitter.com/widgets.js");
    var px = map.project(e.popup._latlng); 
    px.y -= e.popup._container.clientHeight;
    map.panTo(map.unproject(px),{animate: true});
});

You may also want to do something about the width of the popups, because otherwise they will obscure most of the map on mobile screens and it will be difficult to close a popup (which you can normally do by clicking outside of the popup). You can change the width of embedded tweets, but this will not change the width of the popup itself. A simple solution is to give popups a maxWidth of 215 (.bindPopup(html, {maxWidth: 215})).

Of course, you could also vary maxWidth depending on screen width, but I think 215px works well on all screens. Further, embedded tweets appear to have a minimum width of about 200px, so if you want popups narrower than 215px you’ll have to figure out a way to fix that.

If you embed tweets, Twitter can track people who visit your webpage. Add <meta name="twitter:dnt" content="on"> to your page and Twitter promises they won’t track your visitors. I wasn’t sure whether this should be put in the web page itself or in the html content of the popups (I opted for both).

If the popups have a somewhat spartan look and do not contain photos: Good for you! You’re probably using something like Firefox with tracking protection enabled. This blocks sites which have been identified as ‘engaging in cross-site tracking of users’ - including, apparently, platform.twitter.com.

Beautiful relief maps from Stamen

At Nathan Yau’s Flowing Data, I read that Stamen Terrain maps are now available globally, not just for the United States. Stamen uses Open Street Map and their tiles can be used with Leaflet.

One thing about relief maps is that they rub it in how embarrassingly flat the Netherlands are. For example, here’s the Oude Holleweg near Nijmegen (the nearby Van Randwijckweg was in this year’s Giro). It’s just a 70 meter height difference, but with gradients around 14% it’s one of the most challenging climbs in the Netherlands. Apparently, cyclists are not allowed to ride it downhill because that’s considered dangerous (update: I checked, it’s true, descending is not allowed). But if you look at the map, it doesn’t seem all that impressive.

Be that as it may, the Stamen Terrain maps «sure are pretty to look at», as Yau put it. Even when there’s hardly any elevation to show.

Users versus programmers: lon,lat or lat,lon

Somebody at Mapbox wrote a blog post in which he makes the case that longitude should go first: almost all data formats (including Google’s KML) and all open source software (except Leaflet) use this order. Also, it’s the logical order if you include altitude (XYZ), he argues.

Of course, it can’t be that simple, as this debate on Stack Overflow illustrates. It seems that programmers prefer lon,lat while people who use maps - seafarers, Google Maps users - expect lat,lon. As one commenter puts it:

Good rule of thumb: if you know what a tuple is and are programming, you should be using lon,lat. I would even say this applies if your end user (say a pilot or a ship captain) will prefer to view the output in lat,lon. You can switch the order in your UI if necessary, but the overwhelming majority of your data (shapefiles, geojson, etc.) will be in the normal Cartesian order.

Another good rule of thumb: always check.

Pretentieuze instellingsnamen

Ik weet zeker dat ik erover gelezen heb, al weet ik niet meer waar: instellingen die een pseudohistorische fantasienaam aannemen, al dan niet na een fusie. Vaak namen waar ‘ae’ in voorkomt, of eventueel ‘ck’ of ‘gh’. Het komt trouwens niet alleen voor bij instellingen (‘Daelzicht’), maar ook bijvoorbeeld bij kantoorpanden (Rivierstaete).

Zou het vaak voorkomen? Een deel van het antwoord vind je op de kaart.

[Update] - Hier wordt het verschijnsel ook al aan de kaak gesteld!

[Update 2] - Wijkteam Balboa/Kortenaer (Cordaan) treft geen blaam.

Hoe exporteer je fietsknooppunten naar je Garmin

Fietsknooppunten zijn handig. Je kijkt van te voren langs welke knooppunten je wilt fietsen, schrijft de nummers op een briefje en dat plak je met doorzichtige tape op de bovenbuis van je frame. Maar soms missen er bordjes en raak je de weg kwijt. In het ergste geval raak je hopeloos verstrikt in een troosteloze buitenwijk van Almere.

De oplossing is simpel: exporteer de route naar je Garmin (die moet dan wel navigatie hebben). Hier wordt het helder uitgelegd. De auteur schakelt de kaarten op de Garmin uit. Ik niet, waardoor het nog simpeler wordt. Hier zijn de stappen:

  • Ga naar de routeplanner van de Fietsersbond.
  • Klik op de knop «LF en knooppunten» en zoom in totdat de knooppunten zichtbaar worden.
  • Klik op het knooppunt waar je wil starten en klik in de popup op «Van».
  • Klik op elk knooppunt waar je langs wil fietsen en klik in de popup op «Via».
  • Klik op het knooppunt waar je wil eindigen en klik in de popup op «Naar».
  • Klik op de groene knop «Plan route».
  • Klik in de linkerbalk op «GPS» en in het volgende scherm «GPX bestand».
  • Het bestand wordt opgeslagen in je computer. Sluit de Garmin via de usb aan op je computer, gooi het bestand in de map «Garmin/NewFiles» en ontkoppel de Garmin weer.

Je Garmin maakt er automatisch een course van. Dit is op een Mac, misschien dat het met Windows anders werkt. En voor de geeks: hier las ik hoe je je GPX-file weer op een Leaflet kaart kan tonen.

Pages