iFarm.nl

Main menu:

filler
facebook

Quizzen
  Films
  Acteurs
  Actrices
  Albums
  Asterix
  Kuifje
  Nederlanders
  Belgen

Stripverhalen
  Asterix
  Guust Flater
  Kleine Robbe
  Lucky Luke
  Paling en Ko
  Smurfentaal
  en meer...

Overige
  Grappige nummerplaten
  Molbeurs
  Tour-de-France-spel
  Wie is de Mol?

Recent gelezen

het geheugenpaleis

basisboek social media

the third screen

Op de boekenplank

Gelezen in 2011

Gelezen in 2010

Gelezen in 2009

Gelezen in 2007

Gelezen in 2005/2006

Doorzoek blog

Feeds

Categorieën

Archieven

november 2017
S M T W T F S
« Dec    
 1234
567891011
12131415161718
19202122232425
2627282930  

Archief voor 'internet'

Drawing on maps with Javascript

20141224

In this short tutorial, I will demonstrate how you can draw geometrical figures on maps with Javascript. It took me a lot of effort to figure this out so I thought I should write it down so others could achieve this more easily. If you are in a hurry, you can skip the tutorial and just download the working code that produced the image above.

The goal is to draw a point and a polygon on a map with Javascript. For this purpose we will use the maps provided by OpenStreetMap. Our shapes will be drawn on layers from OpenLayers. We use OpenLayers version 3.0.0. You will need two extra files to get everything working: the base Javascript code of OpenLayers: ol.js (local copy) and the OpenLayers style file ol.css (local copy). Store these in the same directory as the other files of this tutorial.

First we need to create a web page on which the map will be shown:

<!DOCTYPE html>
<html>
<head>
  <title>Map with drawings</title>
  <link rel="stylesheet" href="ol.css" type="text/css">
  <script type="text/javascript" src="ol.js"></script>
  <script type="text/javascript" src="myscript.js" defer="defer">
  </script>
</head>
<body>
  <div id="mapid" style="width:400px; height:225px;"></div>
</body>
</html>

This web file loads three other files: the style file and code from OpenLayers and our own code (see below). Furthermore, it defines an environment in which the map will be drawn (the div with id mapid).

Next, we need code for drawing a base map:

// list containing the different layers of map data
var layers = [];
// create a layer with map data from OpenStreetMap
var OSMbase = new ol.layer.Tile({ source: new ol.source.OSM() })
// add the OpenStreetMap layer to the list of layers
layers.push(OSMbase);

// draw the map with the layers
var map = new ol.Map({
  layers: layers,
  target: 'mapid', // the id of the html environment for the map
  // the definition of the map controls
  // these also need the style file ol.css
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  // center and zoom level of the map
  view: new ol.View({
    center: ol.proj.transform([4.898330,52.367321], 
                               'EPSG:4326', 'EPSG:3857'),
    zoom: 9
  })
});

We create a layer with data from OpenStreetMap and draw the layer on the web page. For that purpose, we need to define the longitude and latitude of the center point of the map. In order to put the point on the right position on the map, its coordinates need to be transformed to another coordinate system (command transform). We also need to specify how far we want to zoom in on the map.

Next we will put a point on the map.

// define a layer with a point
var point = [4.649855,52.367321]; // longitude,latitude
var pointFeatures = new ol.Feature({
  // ol.geom.Point requires single point
  geometry: new ol.geom.Point(point)
    .transform('EPSG:4326', 'EPSG:3857') 
});
var pointSource = new ol.source.Vector({ features: [pointFeatures] });
var pointStyle = new ol.style.Style({
  image: new ol.style.Circle({
    // point fill color and radius
    fill: new ol.style.Fill({color: 'red'}),
    radius: 5
  })
});
var pointLayer = new ol.layer.Vector({
  source: pointSource,
  style: pointStyle
});
layers.push(pointLayer);

For the red point we need to specify its position (longitude and latitude), its radius and its color. The location needs to be transformed to the coordinate system of the map. After all the paramaters have been processed and combined, we have a new layer with a single point. This new layer can be added to our list of layers.

Now we can add a polygon to the map:

// define a layer with a polygon
var polygon = [ [5.033004,52.346782], [5.072143,52.387860], 
                [5.111281,52.346782] ];
var polygonFeatures = new ol.Feature({
  // ol.geom.Polygon requires list of polygons
  geometry: new ol.geom.Polygon([polygon])
    .transform('EPSG:4326', 'EPSG:3857') 
});
var polygonSource = new ol.source.Vector({ features: 
                                             [ polygonFeatures ] });
var polygonStyle = new ol.style.Style({
  // polygon fill color, line color and line width
  // rgba parameters: red(0-255), green(0-255), blue(0-255), 
  //                  transparancy(0-1)
  fill: new ol.style.Fill({ color: 'rgba(0,0,255,0.2)' }),
  stroke: new ol.style.Stroke({ color: 'black', width: 1 })
});
var polygonLayer = new ol.layer.Vector({
  source: polygonSource,
  style: polygonStyle
});
layers.push(polygonLayer);

The polygon is a blue triangle of which we specify the three corner points. These need to be transformed and combined with a fill color and a color and width of the boundary line. In this example the fill color has been been defined with three RGB values and a fourth value which indicates how transparent the polygon is. All the data is combined in a layer containing the polygon.

That’s it! This is the code you need to draw a point and a polygon on a map. An image of the result appears below the title of the post: a base map centered at Amsterdam with a red point to the left and a blue triangle to the right. You can also download the full script or all files used in this tutorial. Good luck with adapting the code to your wishes.

Fraude bij filmwedstrijd Bessensap

Het grootste deel van de stemmen op de winnaar van de NWO filmwedstrijd Bessensap is afkomstig van 1 bron, zo blijkt uit een analyse van de stemmen die werden uitgebracht tijdens de wedstrijd.

Bessensap
Figuur: stemaantallen van de beste zes Bessensapfilmpjes in de periode 7 tot 25 maart 2013 met een duidelijk ander stemverloop voor het winnende filmpje van het Erasmus MC (EMC)

Deze maand heb ik meegedaan aan de filmwedstrijd Bessensap van NWO. In deze competitie konden onderzoekers een filmpje van 1 minuut insturen. NWO zou de filmpjes aan journalisten en andere belangstellenden laten zien. Zij zouden dan de beste vijf filmpjes kiezen en die vijf konden een prijs winnen. Ik achtte mijn kansen op een prijs niet zo groot maar deze competitie leek mij wel een mooie gelegenheid om mijn onderzoek onder een groter publiek bekend te maken.

Ik was verbaasd toen na het verstrijken van de deadline bleek dat de populariteit van de 41 inzendingen zou worden gemeten via YouTubelikes. Zo ging de wedstrijd niet meer over wie het meest relevante onderzoek had gedaan maar over wie de meeste vriendjes had die wilden stemmen. Kennelijk was de organisatie ook niet bekend met het bestaan van websites als BuyYoutubeLikes.com, waar je voor een paar dollar zoveel likes kon kopen als je wilde.

Een groot gemis bij de competitie was een overzicht van de tussenstand. Het leek er niet op dat NWO deze zou aanbieden en ook via YouTube was er niet snel een overzicht te krijgen. Ik heb daarom zelf een programma geschreven dat de stemaantallen ophaalde van YouTube en deze overzichtelijk op 1 webpagina plaatste: ifarm.nl/bessensap2013. De overzichten werden eens per vier uur gemaakt. Met het oog op mogelijke fraude heb ik alle tussenstanden bewaard op de website.

De eerste week van de competitie gebeurde er niet veel bijzonders. Maar in week twee was het mis. Het filmpje van het Erasmus MC (EMC) steeg op 14/15 maart in 24 uur van 46 naar 906 likes, een aantal dat bijna drie keer zo hoog was als het filmpje dat tot dat moment aan de leiding stond. Had dit filmpje misschien de landelijke media gehaald?

Tussenstand Bessensap 15 maart 2013 16:00
Figuur: Tussenstand filmwedstrijd Bessensap op vrijdag 15 maart 2013 16:00. Het filmpje “DNA Code” van het Erasmus MC heeft 50% meer likes dan views.

Het vreemde aan de stijging van het EMC-filmpje was dat het aantal views, het aantal keren dat het filmpje was bekeken, niet evenredig meesteeg. Aan het begin van de stijging op 14 maart 16:00, stond het filmpje op 46 likes en 431 views. 24 uur later stond het op 906 likes en 608 views. Het filmpje was in de tussentijd 177 keer bekeken en had 860 nieuwe likes gekregen. Raar.

Deze statistieken kunnen volgens mij op twee manieren worden verklaard. Ten eerste zouden de likes kunnen zijn gegeven door computersoftware waardoor het filmpje niet geladen en dus niet bekeken werd. Ten tweede zouden de likes kunnen zijn gegeven door mensen die op de like-knop hebben gedrukt binnen enkele seconden na het starten van het filmpje en daarna onmiddellijk de pagina hebben verlaten. Dan wordt waarschijnlijk het bekijken van het filmpje niet geteld.

Beide manieren van uitleg wijzen op stemmen die van 1 persoon afkomstig zijn. Dat iemand meerdere keren op hetzelfde filmpje stemt, is bij dit type competitie moeilijk te voorkomen. Maar als het zoals in dit geval gaat om vele honderden stemmen van 1 persoon dan is dat wel een ernstige vervalsing van de competitieuitslag.

Wie verantwoordelijk is voor de extra stemmen, is moeilijk na te gaan. Iedereen kan op websites als de eerder genoemde BuyYoutubeLikes.com likes kopen voor een willekeurig filmpje, ook als je deze niet zelf op YouTube hebt geplaatst. Het is mogelijk dat de extra likes zijn besteld buiten medeweten van de onderzoeker die verantwoordelijk is voor het filmpje. Maar het maakt niet uit wie het gedaan heeft. Het zou netjes zijn als iemand die dit overkomt zijn inzending zou terugtrekken om ervoor te zorgen dat de competitie eerlijk blijft.

De stijging van het aantal likes van het EMC-filmpje is na klachten bij YouTube gestopt. Maar de verworven likes zijn grotendeels blijven staan. De andere filmpjes konden het gat met dit filmpje niet overbruggen en het filmpje is op de eerste plaats blijven staan. NWO heeft het filmpje inmiddels een prijs toegekend. Zij hebben ook geconstateerd dat er vreemde dingen zijn gebeurd bij het filmpje maar zij konden vals spel niet bewijzen. Ik vind dit vooral jammer voor het filmpje dat nu zesde werd en dat hierdoor een welverdiende prijs misloopt.

Wat hebben we nu geleerd van deze episode? Dat YouTubelikes geen ideale manier zijn om de populariteit van filmpjes te meten? Maar dat wist ik al. Gelukkig zijn ze er bij NWO inmiddels ook achter. Dat vals spel loont? Maar dat is iets wat ik niet wil leren.

Onderzoek doen met Twitter

Vandaag is op YouTube een filmpje verschenen van de website die ik in het afgelopen half jaar bij het Netherlands eScience Center heb gemaakt voor het doen van onderzoek met behulp van Nederlandstalige tweets. In het filmpje laat ik zien hoe je groepen tweets kan samenvatten en visualiseren. Het was een erg leuk project om te doen en de website wordt inmiddels door een paar wetenschappers gebruikt.

Het filmpje van 1 minuut doet mee in de Bessensapcompetitie van de Nederlandse Organisatie voor Wetenschappelijk Onderzoek. Aan de meest populaire filmpjes wordt een prijs toegekend: een verfilming van het gepresenteerde onderzoek door een professionele filmmaker. Er zijn vijf van deze prijzen voor de vijf filmpjes die op YouTube de meeste likes verzamelen.

Hier is mijn filmpje:

Als je het filmpje leuk vindt dan kan je dat aangeven door bij het filmpje op het plaatje met de duim omhoog te klikken. Hiervoor moet je het filmpje op YouTube bekijken en moet je zijn ingelogd op Gmail, Google+, Picasa of YouTube.

Je kan ook een kijkje nemen op de Twitterzoekwebsite: http://twiqs.nl/ Daar kan je opzoeken wanneer en waar bepaalde woorden werden gebruikt op Twitter, met welke woorden ze samen voorkwamen en wie ze gebruikten.

Twitterplaatjes

Gisteren hebben we op het werk ademloos zitten kijken naar de Twitterplaatjes van Eric Fischer. Hij heeft van tweets verzonden via smartphones de locatie en de taal opgezocht en daarna heeft hij de tweets met puntjes op een vlak gezet. Een kaart van de wereld werd daardoor zichtbaar met Europa en daarin Nederland prominent in beeld. De verschillende taalgebieden zijn herkenbaar aan de kleuren. Als je inzoomt dan zie je tweets verstuurd vanaf de boot Harlingen-Terschelling en vanuit de chunnel, en zie je Nederlanders aan de kust van Portugal.

Maar wij verzamelen ook al een tijdje tweets. Wat zou er gebeuren als we onze tweets in een plat vlak zouden plotten? Het zijn weliswaar allemaal tweets in het Nederlands maar toch leuk om uit te proberen. Hier is een eerste resultaat:

20111029

De grijze puntjes zijn 2,5 miljoen Nederlandstalige tweets met locatie-informatie verstuurd in juli-oktober 2011. Dankzij de taalrestrictie scharen zij zich automatisch in de vorm van Nederland met daaronder, minder dicht gevuld, Vlaanderen. De rode puntjes zijn de 18.000 tweets uit dezelfde periode die het woord trein bevatten. Het spoornet van Nederland wordt zo zichtbaar.

We kunnen dit soort kaartjes tekenen dankzij de Twitteraars die hun berichten versturen van smartphones en daarbij de huidige locatie van het apparaat doorgeven. Dit is privacygevoelige informatie en maar 1% van de tweets die we binnenkrijgen bevat dan ook locatie-informatie. Maar we zijn er blij mee.

Website: Foursquare

foursquare Vandaag heb ik de website Foursquare getest. Via deze website kan je interessante plekken in jouw directe omgeving opzoeken. Om dit te doen, moet jouw huidige positie worden geverifieerd met een GPS-signaal. Voor deze verficatie wordt meestal een smartphone gebruikt. Die heb ik niet maar gelukkig kan het ook met een iPad en een app voor de iPhone.

Het begon al meteen goed: ik stond in het centrum van Arnhem bij een stadsplattegrond. Ik wist dat er in de buurt een Albert Heijn was maar ik wist het adres niet en winkels van de Albert Heijn staan niet aangegeven op stadsplattegronden. Dus vroeg ik mijn iPad om op Foursquare de interessante plekken in de buurt op te zoeken. De Albert Heijn verscheen bovenaan de lijst, op 60 meter afstand van de stadsplattegrond met het juiste adres. Gevonden!

Hoewel Foursquare een Amerikaans bedrijf is, zijn er al diverse locaties in Nederland opgenomen in hun database. Als je eenmaal op een bepaalde locatie bent, dan kun je daar via Foursquare registreren dat je er geweest bent, het zogenaamde inchecken. Dat heb ik gedaan voor mijn twee reisdoelen, een sportzaak in Dodewaard en een begraafplaats in Delft. Beide bleken al in de database van Foursquare te staan maar erg druk bezocht waren ze niet, tot op heden 36 en 21 keer, respectievelijk.

In de VS is Foursquare wat populairder dan in Nederland. Maar daar geven bedrijven dan ook voordelen aan klanten die op hun locaties inchecken. Bezoekers van een filiaal van het koffiehuis Starbuck krijgen korting als ze er voor het eerst inchecken via Foursquare. En de persoon die in de laatste twee maanden het vaakst van iedereen in het Starbuckskoffiehuis is ingecheckt, de Foursquareburgemeester, krijgt zelfs een gratis drankje.

Als er dit soort beloningen tegenover staan dan zijn er meer consumenten die door het gebruik van de dienst iets van hun privacy op willen geven. Zou het ooit zover komen in Nederland?

Plaatjes zoeken met TinEye

20100427 Gisteren heb ik eindelijk een website gevonden die een probleem kan oplossen waar ik al een paar jaar tegen aanloop: plaatjes terugvinden. Hoe zit het? Wel, je hebt een plaatje op je computer maar je weet niet wat of wie erop staat. Je vermoedt dat het plaatje ergens online staat maar je weet niet hoe je het kunt vinden. Je kan natuurlijk het plaatje proberen te beschrijven op Google Images: album cover three men red hair globe maar dat geeft zelden een goed resultaat.

Maar daar is dan de prachtige website TinEye.com! Je kan jouw plaatje daar uploaden en dan krijg je binnen een paar seconden plaatjes die erop lijken. Ik heb dat uitgeprobeerd voor een albumcoverquiz waarmee ik bezig was (Album Cover V1 Quiz) en waarvan ik het eerste plaatje niet kon thuisbrengen. Even een screendump gemaakt en opgestuurd naar de website en ik kreeg een link terug naar een pagina van Amazon met daarop een cd van de Thompson Twins. Dat was wat ik zocht!

Deze website gaat mij heel veel hulp bieden bij het oplossen van plaatjesquizzen. Van de 80 vragen van de albumquiz, moest ik er nog 15 maar die heb ik nu allemaal met TinEye terug kunnen vinden. Ik had nog wat plaatjes liggen van andere quizzen maar daarop was de score lager (ongeveer 50%). Het systeem lijkt moeite te hebben met schaalveranderingen in 1 richting (alleen x of alleen y) en het kan gezichten alleen herkennen als het het exacte plaatje van die persoon kan terugvinden. Maar ik ben hier al heel erg blij mee.

Supersized Google

Sinds vandaag heeft Google zijn zoekfont geschikt gemaakt voor slechtzienden. Argh! Gelukkig kunnen Firefoxgebruikers het oude font weer terugkrijgen met behulp van de unsupersizeplugin. Je moet wel eerst GreaseMonkey installeren maar dat is een kwestie van een keer op Add to Firefox klikken en de browser herstarten. Pfew.

Google Squared

20090609 Google heeft een nieuwe zoekmogelijkheid: Google Squared. Hiermee kan je zoeken op categorieën. Als resultaten krijg je een tabel met elementen van de categorie met attributen. Eens kijken of het werkt…

American presidents: Carter, Kennedy, Eisenhower, Taft en Lincoln. Prima.

Tall men: Radhouane Charbib, Brad Garrett, Semmy Schilt, Carel
Struycken en Matthew McGrory. Lengtes tussen 2.04 en 2.35: prima.

South American animals: giant anteater, macaw, jaguar, anaconda en
sloth. Uitstekend! Vorige week lieten ze hier bij jaguar nog een foto
van een auto zien maar dat is inmiddels verbeterd.

Countries: Turkmenistan, Nepal, Ireland, Kiribati en
Denemarken. Allemaal goed natuurlijk maar de keuze van deze landen is
wel curieus. Volgens welk criterium zouden ze zijn gesorteerd?

Furniture: cabinet, hutch, storage, chairs en chair. Jammer van storage en twee keer chair.

Ancestors of Jesus: Matthew 1:19, Go to mobile site, Contemporary English Version, Next Chapter en Listen to this passage. Oei, nu heb ik het hem echt te moeilijk gemaakt.

Dutch people: Geography, Hugo Grotius, Maurice of Nassau, Desiderius Erasmus en Frans Hals. Dit moet beter kunnen. Ah, je kan zelf dingen toegevoegen? Hup, Geography eruit en Balkenende erbij!

Waarom is de informatie van Wikipedia niet gebruikt? Enfin, het werkt al aardig maar er is zeker nog ruimte voor verbetering.

Drents woordenboek

20090603 Vanmiddag was de officiele presentatie van de online versie van het Drents Woordenboek ontwikkeld door vijf Groningse studenten in een Informatiekundecollege dat ik dit semester heb gegeven. De kersverse Commissaris van de Koningin van Drenthe, Jacques Tichelaar, verrichte de openingshandeling. De presentatie was goed bezocht en de reacties waren enthousiast. Erik, Gerwin, Harmen, Jelke en Lars hebben prima werk afgeleverd!

Reportage van RTV Drenthe

Big Brother

Google Gisteren ontdekte ik tot mijn verbazing dat mijn Usenetpostings van begin jaren ’90 waren geïndexeerd door Google (opgericht in 1998). Vandaag werd ik via Wikipedia verwezen naar Google News voor een pagina uit een lokale krant van 24 oktober 1951! Hoe ver zouden ze hiermee gaan?