DailyJS

Sponsored Content This post is about a commercial product that we think will appeal to DailyJS readers.

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>:

HotKeys

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.

fake-identity

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.

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

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.

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.