The JavaScript blog.


google-maps react polymer services ui libraries

Isomorphic Google Maps, MyScriptJS

Posted on .

Isomorphic Google Maps

Ivan Starkov sent in an isomorphic Google Maps component for React (GitHub: istarkov/google-map-react, License: MIT, npm: google-map-react). It provides several useful features, including rendering any React component over maps, lazy loading of the Google Maps API, and isomorphic rendering.

By rendering maps on the server, you can improve search engine visibility, and render maps without requiring JavaScript in the browser. Naturally you could also do other cool stuff with server-side libraries that would otherwise be made difficult in the browser.

The ability to render any React component over a map means you make dynamic map features that feel very fast -- Ivan's library calculates the co-ordinates independently of Google Maps, so you can treat your React code separately instead of worrying too much about how it relates to Google Maps.

Now every object on the map can be hovered (however, you can still use css hover selectors if you want). If you try zooming out here example, you will still be able to hover on almost every map marker.

This algorithm allows you to tweak hover probability of map objects, for example making some objects "more hoverable". distance_hover example with different hover probabilities

The main example shows a map combined with fast infinite scrolling, SVG icons, and balloons made with React.


MyScript is a service for handwriting and handwritten shape recognition. Gregory Pakosz sent in some Polymer MyScript components for interacting with the service. The components are built with MyScriptJS, and they cover things like mathematical expression and text recognition.

MyScript Web Components

The demos on the MyScript Web Components homepage are interactive, so if you select the <myscript-math> example and press play you should be able to draw some equations and see the results.


libraries testing typescript react google-maps

React Google Maps, TypeScript Tests

Posted on .

React Google Maps

React Google Maps

React Google Maps (GitHub: tomchentw/react-google-maps, License: MIT, Bower: react-google-maps, npm: react-google-maps) by Tom Chen is a React component for creating Google Maps. It has a mixin called GoogleMapsMixin that you can use to create React components for your own maps.

Tom has posted some examples that demonstrate things like click events and geolocation. These examples are based on Google's developer documentation so you can see how React compares to the original Google APIs.

TypeScript Data Structures and Tests

Adrien Cadet sent in some TypeScript projects: Ludivine, a TypeScript data structure library, and Oscar, a test harness.

Ludivine has a wiki that describes each of the interfaces and classes. For example, LinkedList inherits from several interfaces to implement a linked version of IList.

Oscar has a getting started guide that explains how to create tests and test suites:

class MyTestClass extends UnitTestClass {  
    firstTest() : void {
        // ... AAA stuff

    secondTest() : void {
        // ... another AAA stuff

This example is for testing a class called UnitTestClass. Each method that ends in Test will be run by the test suite runner.