Building A New Mapping Tool
Elliot Bentley
We <3 maps at The Wall Street Journal
Existing web map template
Existing map editing tool
Design proposal
New map template
Early prototype
New editor
Example in situ
Open source: dowjones.github.io/pinpoint
Demo time!
Thanks for listening!
@elliot_bentley
dowjones.github.io/pinpoint

Elliot Bentley – Building the news: In-house tools for the newsroom

Editor's Notes

  • #2 Case study of building a specific tool
  • #3 Huge demand for maps at WSJ Two full time cartographers based in NYC, making beautiful maps like these Specialist skill with complicated software
  • #4 Existing map template Off-style Pop-ups are a bad experience for readers Frequently misused - used as pseudo-galleries Not responsive, and scrolljacking an issue
  • #5 Existing map tool Fiddly, time-consuming experience for editors
  • #6 Wrote up with consultation from cartographers
  • #7 Split into: Leaflet-powered frontend JavaScript library, developed first... Position and features specified by JSON object WSJ style, including scale bar Mobile-friendly click-to-activate behaviour
  • #8 Angular based editing tool Live preview of map - Cartographers helped define look of map and restrict options to essentials - Guerilla testing: quickstart, dragging markers
  • #9 http://www.wsj.com/articles/ongoing-shooter-operation-reported-at-radisson-blu-hotel-in-mali-1448011876 Now used regularly, often as placeholders before cartographers can replace with superior map
  • #10 Open sourcing took an extra week of work Extracting Journal styles and configuration Writing documentation and producing promo site