The JavaScript blog.


libraries data maps tutorial sponsored-content geoip

Introduction to SimpleMaps

Posted on .

Interactive maps are a great way to visualize geographic data or improve website navigation. Now that SVG is supported by all modern browsers, it has become a popular format for interactive maps. Vector maps scale beautifully and are an attractive and lightweight alternative to Google Maps and OpenStreetMap.

SimpleMaps is a commercial interactive map library. It adds region-level zooming, responsiveness, legacy browser support, latitude/longitude calibration, mobile-friendly tooltips and more to an otherwise static SVG file. If you'd prefer to implement these features on your own, it also offers a free library of web-optimized SVG maps (MIT licensed).

This tutorial will demonstrate what is possible with SimpleMaps and how to get started. To begin, go to http://simplemaps.com/world and download the world map trial. Open test.html in a web browser to view the map.


The map consists of two JavaScript files: worldmap.js and mapdata.js. The vector paths and the map logic are stored in the worldmap.js file. All customizations to the map are stored in the mapdata.js file. The map can be easily customized by making changes to the mapdata.js file in a text editor and refreshing the browser.

The mapdata.js file contains defaults that can be overwritten for individual countries. For example, to make all countries red, you would simply set:

state_color: 'red',  

in the main_settings object. To override that default and make the USA blue, you'd simply add:

color: 'blue',  

to the US state_specific object. The description property for each country accepts HTML which will be displayed in the tooltip upon hover or (when a mobile device is detected) click.

To speed up the customization process, SimpleMaps offers an online customization tool that makes it easy to customize properties quickly using a spreadsheet. Countries, locations, and regions can all be customized using this Excel-like interface. Changes to the map are reflected in real time.


All customizations are automatically saved to the mapdata.js file. This makes it easy to switch between the convenience of the spreadsheet editor and the control of making changes directly to the JavaScript object. It is even possible to edit the JavaScript code online using the "Code" tab.


When you are finished, you can install the map on a webpage by embedding both scripts and adding a target <div>:

<script type="text/javascript" src="mapdata.js"></script>  
<script type="text/javascript" src="worldmap.js"></script>  
<div id="map"></div>  

To fully integrate SimpleMaps with other web page elements you can utilize its JavaScript API. This makes it possible to update the map, listen for map events, and dynamically zoom around the map.

All around, SimpleMaps aims to simplify the process of creating interactive maps while retaining the flexibility that has made SVG maps so popular.


libraries ui maps keyboard react

React: HotKeys, Google Maps, Dataminr's UI Components

Posted on .


Chris Pearce sent in a library for handling hotkeys in React (GitHub: Chrisui/react-hotkeys, License: MIT, npm: react-hotkeys). There's a blog post with more details on the project:

With the ability to monitor the 'focus state' of particular elements (where the element may not neccassarily be a direct focus target but simply within the parent tree) it makes it very easy to bind contextual hotkeys.

And using @ccampbell's excelent mousetrap library we are able to declare our hotkeys with very inutitive syntax.

Combining all this you get react-hotkeys which provides a declarative way of binding hotkeys to your React application.

The library itself provides the HotKeys element, which has a keyMap attribute. You can bind keys with names like del and backspace to handlers in your React application.

The library aims to take the pain out of defining key mappings, knowing when certain components are 'in focus' and which hotkey handlers in the hierarchy should be called while providing a minimal API and getting out the way for the most part.

Correctly handling focus is one of those details that many web applications get wrong, so if you're building anything relatively complex then react-hotkeys should help.

React Components for Google Maps

Wrapping Google Maps in React seems like a common problem, but is also a good example of a non-trivial case for creating React components. Zach Pratt sent in the first of a series of articles about React and Google Maps: React Components for Google Maps – Part 1.

Building React components for use with google maps can present some challenging problems for those who aren’t aware of the basics/quirks of developing with google maps. I aim to shed some light on the fundamentals of how to get the two to play nicely together, and to encourage developing the components in a way that will promote testability.

Part 2 includes code for extending google.maps.OverlayView and the React component for managing the map overlay.

Dataminr's React Components

Armaan Ahluwalia sent in several React components that have been developed at Dataminr. The react-components repository (GitHub: dataminr/react-components, License: MIT) includes components for a table, search, pie chart, and modal windows. There's a demo that shows each of the components with some sample data.

The components are all documented and have sample code, so it's pretty easy to get them working in your own projects. I also noticed that each component has tests as well, which is interesting if you've ever wondered how to write tests for redistributable components.


libraries graphics testing maps modules

fake-identity, Leaflet.FreeDraw

Posted on .


fake-identity (GitHub: travishorn / fake-identity, License: MIT, npm: fake-identity) by Travis Horn is a library for generating fake identities. You can use Identity.generate to create a single fake object, or Identity.generate(n) to get an array of n objects.

Here's an example of the output:

  firstName: "Amelia",
  lastName: "Wright",
  emailAddress: "awright@example.com",
  phoneNumber: "(555) 555-0155",
  street: "7327 Central Avenue",
  city: "Oxford",
  state: "TX",
  zipCode: "75045",
  dateOfBirth: Fri Jul 20 1962 00:00:00,
  sex: "female",
  company: "Contoso Pharmaceuticals",
  department: "Legal"

I find I have to do this quite often for testing. I usually use Faker to make users -- in fact, I had to do this very task today! I think fake-identity would have made my job easier in this case, because the schema I'm using is similar.



Leaflet.FreeDraw (GitHub: Wildhoney / Leaflet.FreeDraw, License: MIT) by Adam Timberlake is a library for Leaflet that adds support for creating polygons.

Use Leaflet.draw for drawing pre-defined polygons and linear shapes – Leaflet.FreeDraw's selling point is that it allows you to freely draw a polygon like Zoopla. Hulls are also supported to normalise polygons when users draw an insane polygon – currently Leaflet.FreeDraw supports Brian Barnett's Graham Scan module and my adaptation of the concave hull algorithm.

The readme is pretty solid, and explains how to handle polygon mutation, intersection, and elbow creation. The demo allows you to draw and edit polygons, with planes flying over the map.

I actually saw a similar polygon drawing UI widget on Ikea's solar panel quote page today. You can draw a polygon over your house so it can use the shape to estimate how well solar panels should work for your property.


video maps angularjs

Route360, ngVideo

Posted on .



The Route360 JavaScript API (GitHub: route360 / r360-js, License: MIT, Bower: route360) by Henning Hollburg and Daniel Gerber is a library for Leaflet that adds some cool features:

  • Generate polygons for reachable areas based on a point on the map
  • Supported for walk, car, bike and transit routing
  • Map controls: travel time slider, date and time chooser, and travel type chooser
  • Routing information from source to destination, including travel time and transit trips
  • Support for elevation data

This is a snippet of the polygon API:

var cpl = r360.route360PolygonLayer();  

var travelOptions = r360.travelOptions();  
travelOptions.setTravelTimes([300, 600,900, 1200, 1500, 1800]);

r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons) {  


ngVideo (GitHub: Wildhoney / ngVideo, License: MIT) by Adam Timberlake is a set of AngularJS directives for working with video. Videos are wrapped in an ng-video container:

<section class="video" ng-video>  

And should contain a video element. It includes a service which you can use to attach videos:

myApp.controller('VideoController', ['$scope', 'video', function($scope, video) {  
  video.addSource('mp4', 'http://www.example.com/alice-in-wonderland.mp4');

The project includes a lot of other directives for handling buffering, UI controls, data about play position and elapsed time, full screen support, and playlists.


html5 games maps webgl

ViziCities, Flappy Bird in HTML5

Posted on .



ViziCities (Demo, GitHub: robhawkes / vizicities, License: MIT) by Robin Hawkes and Peter Smart is a WebGL 3D city and data visualisation platform. It uses OpenStreetMap, and aims to overlay animated data views with 3D city layouts.

The developers have created some visualisations of social data, traffic simulation, and public transport.

It uses Three.js, D3, Grunt, and some stalwarts like Moment.js and Underscore.js.

Flappy Bird in HTML5 with Phaser

Thomas Palef, who has been making one HTML5 game per-week, has created a tutorial for making Flappy Bird in HTML5 and Phaser. The cool thing about the tutorial is he reduces Flappy Bird to its basic parts -- collision detection, scoring, and the player controls. Instead of worrying about whether or not the graphics are stolen from Mario, you can just follow along and learn how a game like this works.