Soccer field diagram in JS – jQuery soccerField.js

Programming JavaScript and having fun with kids? Here is a simple idea.

Soccer field diagram with players and positions

Do you love sport? My 7-year-old son loves football (soccer), as well he is always interested about the things I do on my computer. Some time ago I started showing him programming basics and fun with coding. This simple jQ plugin was a great thing to start. Now we are training Python programming, not only JS 🙂

soccerField.js is a jQuery plugin used to illustrate team formations that dynamically display players and their positions(roles) on a soccer(football) field diagram with lots of configuration options.

Have some fun! Soccer field diagram - jQuery soccerField.js
Have some fun! Soccer field diagram – jQuery soccerField.js


For usage include jquery, plugin itself (jquery.soccerfield.js), basic stylesheet (soccerfield.css) and one of themes (soccerfield.default.css):


To see an example simply clone/download the repo, go to the demo folder and launch index.html

Available options (example with comments):

var options =  {
  // options for soccer field
  field: {
    // soccer field width; default: 960px
    width: "960px",
    // soccer field height; default: 600px
    height: "600px",
    // img for soccer field default: 'img/soccerfield_green.png'
    img: 'img/soccerfield_green.png',
    // load page with hidden field; default:false
    startHidden: true,
    // animate field appearance with fade; default: false
    animate: true,
    // time for fadeIn 
    fadeTime: 1000,
    // reveal field automatically on load (default:true), 
    // if set to false needs extra 
    // $"soccerfield").revealField() call
    // callback on soccer field reveal
    onReveal: function () {
  // options for players
  players: {
    // font size for player names in pixels (default 16)
    font_size: 16,
    // reveal players or load with players not hidden; default: true
    reveal: true,
    // reveal simultaneously (default: true); 
    // if false  - players reveal one by one after selected timeout
    sim: false,
    // timeout between players reveal in sim:false mode
    timeout: 1000,
    // time for fadeIn players animation
    fadeTime: 2000,
    // player img, no img if false (default: false)
    img: 'img/soccer-player.png',
    // callback after all players revealed
    onReveal: function () {
      alert("players revealed!");

Data format requirements (example):

var data = [
  {name: 'Gianluigi Buffon', position: 'C_GK'},
  {name: 'Leonardo Bonucci', position: 'LC_B'},
  {name: 'Giorgio Chiellini', position: 'C_B'},
  {name: 'Andrea Barzagli', position: 'RC_B'},
  {name: 'Daniele De Rossi', position: 'C_DM'},
  {name: 'Alessandro Florenzi', position: 'L_M'},                
  {name: 'Emanuele Giaccherini', position: 'LC_M'},
  {name: 'Marco Parolo', position: 'RC_M'},
  {name: 'Antonio Candreva', position: 'R_M'},
  {name: 'Éder', position: 'LC_F'},
  {name: 'Leo Messi', position: 'RC_F', img: 'img/argentina_flag.png'},

Options / possible positions

Position consists of two parts, divided by underscore sign “_”.

Left part id for “y” position:

L – Left

LC- Left-Center

C – Center

RC – Right-Center

R – Right

Right part is for “x” or “soccer” position:

GK – GoalKeeper

B – Back

DM – Defending Midfielder

M – Midfielder

AM – Attacking MidFielder

F – Forward

We can combine these positions.


Methods are available through $“soccerfield”) attribute:

revealField() – reveals field and players

revealPlayers() – reveals hidden players

destroy() – destroys instance of plugin


We are able to assign picture individually for each player using img key in our data array. If img is not set – the plugin will pick up one from the options.players.img.

License: MIT



See also

Web Audio framework – Tone.js

Interactive-Image – a jQuery plugin to embed interactive images

Terminal dashboards with ASCII art and JavaScript

JavaScript animation library – aniJS