OPW Project Summary

Project-’UploadWizard:OSM embedding’ 

This project is about enhancing the image upload process for Wikimedia Commons.The main goal of the OSM  embedding project is to provide map interface to the UploadWizard. We can not expect each and every uploader to know exact location where image being uploaded was taken, or to use location enabled camera/phone to take the image.  With introduction of map interface, uploader can easily choose location coordinates for uploaded images.
Prototype is at http://uploadwizard-osm.bitnamiapp.com/mediawiki/Special:UploadWizard [ username/password is mediawiki/mw ]
Detailed project description can be found at  https://www.mediawiki.org/wiki/UploadWizard_OSM_map_embedding
Functioning of embedded map :
  • On valid coordinates/location inputs widget first loads a static map which on ‘click’ will initialize leaflet powered dynamic map.
  • Dynamic updation of coordinate fields and location field on leaflet map interaction and vice versa
  • ‘ type’ or ‘importance’ specific zoom for various kinds of locations on geocoding

OPW Internship Updates (Week 10,11 Highlights)

Week 10 ( Feb 13 – Feb 19 )

TARGET: Wrap up geocoding.


  • add rate-limiting to the events so that the browser does not download three static map images when you type “132″
  • add a text input where the user can enter an address, which then moves the map to that position (if the address lookup was successful)[geocoding and reverse geocoding]


Feb 13:

  • geocoding using Control.OSMGeocoder.js successfully added to mw.GeoMap.js , but working on implementing geocoding without the plugin
  • Updated dependency chain of currently open changes
  • First step towards geocoding and reverse geocoding -change:112342

Feb 14Finally “close to done” patch set of Change: 107892- embedding static map to UploadWizard with spinner animation & debouncing
Feb 15: JSON investigation time
Feb 16: coding function to perform geocoding
Feb 17: coding function to perform reverse geocoding

Feb 18:Going through Labs-vagrant and Help :Instances
Feb 19Setting up everything

Week 11 ( Feb 20 – Feb 26 )


Labs-Vagrant Instance
  • create an instance (just go with the defaults)
  • configure it to use the vagrant role
  • log in to that instance via SSH
  • enable the uploadwizard vagrant role


Feb 20: resolving “ssh instance” issues
Feb 21:  ssh investigation
Feb 22: ssh key forwarding issue
Feb 23I-00000a79.pmtpa.wmflabs and preparing another patch set under change: 109263
Feb 24: setup web proxy, learning more about labs-vagrant and mediawiki vagrant
Feb 25: A back to basics day..going through mediawiki coding conventions
Feb 26: Fixing 107892 and 109263

OPW Internship Updates (Week 8,9 Highlights)

Week 8 ( Jan 30 – Feb 05 )


  • To do Proper Documentation using JSDuck and upload newer patch sets
  • Start working on geocoding


Jan 30: uploaded a new patch set under change : 107892 including documentation as per jsduck format (first attempt with jsduck documentation)
Jan 31: Rebasing changesets, reporting and documenting code(more jsduck)
Feb 01: Improving changesets, resolving jsduck error in parsing
Feb 02: Uploaded another patchset under change 107892
Feb 03: Uploaded another patchset under change 109263
Feb 04: Uploaded another patchset under change109263
Feb 05: Resolving problem with the “Copy information to all uploads below …” within change 107892

Week 9 ( Feb 06 – Feb 12 )


  • fix the problem with the “Copy information to all uploads below …” link
  • add rate-limiting to the events so that the browser does not download three static map images when you type “132″
  • for the static map, give the user some simple feedback that the image is loading


Feb 06: Had a google hangout with mentor, discussed next steps
Feb 07: .trigger() and custom events in jQuery [investigation]
Feb 08: spinner animation and debouncing
Feb 09: Better control over choosing right type of map [WIP] change : 112342
Feb 10: adding custom event ‘uw-copy’ to UploadWizard and resolving error:jquery-on-gets-uncaught-range-error-maximum-call-stack-size-exceeded
Feb 11: Had a google hangout with mentor, discussed next steps and progress
Added a new patch set under change:107892 which does the following

  • added spinner animation
  • custom event to resolve conflict during “copy all informations to all uploads below” step

Feb 12: geocoding and reverse geocoding

OPW Internship Updates (Week 6,7 Highlights)

Week 6 ( Jan 16 – Jan 22 )


  • Start adding following features one by one to UploadWizard , commit changes on gerrit!
1.Static Map
2.Leaflet dynamic map


Jan 16:Committed change set to embed static map to UploadWizard
Jan 17:Working on CSS file
Jan 18: Coding rest of the rough working prototype.
Jan 19: Learning about advanced gerrit usage
Jan 20: Adding leaflet files to UploadWizard and working on dynamic map
Jan 21‘No value provided for {s} variable’ error resolving
Jan 22: Completed coding functions to perform dynamic map- static map initializing, deinitializing, plotting input coordinates on both kind of maps (output screencast )


Week 7 ( Jan 23 – Jan 26 )


  • Patchset division
  • complete mapViewToInputs function
  • Add controls so that user can switch between static map and dynamic map


Jan 23:Submitted patchset which adds leaflet script to UploadWizard
Jan 24Submitted patch set which introduces static map and leaflet map on UploadWizard
Functions added:

  • Static map initialization
  • Static map de-initialization
  • leaflet map initialization
  • leaflet map de-initialization
  • plotting input coordinates to leaflet map
  • updating input coordinates from leaflet map

Jan 25:Going through JSDuck format for documentation
Jan 26:Making changes as per reviews and some learning related to split a submitted change

A cool CSS trick to achieve line break.

We all are familiar with <br/> tag in HTML . As we know HTML should be about content and CSS  about display , and if we prefer to keep it that way we should definitely try CSS alternatives for <br/> tag.  To achieve such a line break there is a cool CSS trick.

Suppose content which comes after the line break is within a ‘div’ element having class name as ‘class-name’ .Within your CSS file add the following lines in order to achieve line break.

.class-name :  before {
content :    ‘\a’ ;
white-space :    pre ;

And voila! Line break is achieved.. :)

I took my first step … ;)


Its been two days since my internship began.. Ever since my acceptance into OPW Round 7 I have been planning on tackling the project entrusted to me.. Well my project is “OpenStreetMap Embedding to UploadWizard (UploadWizard is an extension to MediaWiki)” ..

This project is about enhancing the image upload process for Wikimedia Commons. Commons is an image hosting site which is used by Wikipedia and a bunch of other sites, as a central location to store free images, which can be reused anywhere without needing to worry about copyright. Commons has millions of images and Wikipedia editors need to be able to find quickly the right ones for their articles, so it is important to store various metadata with the image which will help navigation – topic of the image, when it was made and so on. This metadata is usually stored in a complex template language that is specific to MediaWiki, and the sight of which usually makes people to flee in terror. Since we cannot expect image authors to learn to write something like that, Commons has a tool called UploadWizard which creates all the code for you, after you fill out a bunch of forms. The main goal of the OSM map embedding project would be to provide map interface & the integration with external databases to the UploadWizard.

N0w there are many ways to do this project.. But I chose a method that was worth experimenting..  I started off  with an introduction of a link in UploadWizard  which can point the coordinates of Uploaded image on OSM …  Soon I will replace the link with a map widget with beautiful features .. And yes, complex coding is involved..  ;)

I wrote my first patchset  and its up for reviewing .. and this is my first step.. :) .. Maybe once I have completed the project I might feel that this step is insignificant.. :P .. But still this is my  first little step.. :) .. :D