Pinpoint

A JavaScript library for creating beautifully simple maps in seconds, developed at The Wall Street Journal.

• Example on WSJ.com
• Blog post

Features

• Map settings are stored in a simple JSON format and can be generated using Pinpoint Editor.
• Fully responsive with touch-friendly "click-to-activate" behaviour.
• Powered by the awesome Leaflet.js.

Quickstart

Include:

• pinpoint.js
• pinpoint.css
• Leaflet (both the JS and CSS)
• Leaflet Minimap (both the JS and CSS)

In terms of HTML, just a single div is needed:

<div class="map-container"></div>

Then in your JavaScript file:

var options = {
    "element": ".map-container",
    "aspect-ratio": "wide",
    "dek": "",
    "hed": "The U.K.",
    "lat": 51.5049378,
    "lon": -0.0870377,
    "minimap": false,
    "zoom": 4,
    "markers": [
        {
            "lat": 51.5049378,
            "lon": -0.0870377,
            "text": "London"
        }
    ]
};
var map = new Pinpoint( options );

Options

Pinpoint accepts a JavaScript object for configuration.

Marker options

Markers are stored as an array of objects.

Example configuration JSON

{
    "aspect-ratio": "wide",
    "dek": "",
    "hed": "The U.K.",
    "lat": 51.5049378,
    "lon": -0.0870377,
    "minimap": false,
    "minimap-zoom-offset": -5,
    "zoom": 4,
    "markers": [
        {
            "icon": "circle",
            "label": "plain",
            "label-direction": "north",
            "lat": 51.5049378,
            "lon": -0.0870377,
            "text": "London"
        },
        {
            "icon": "circle",
            "label": "plain",
            "label-direction": "north",
            "lat": 53.4779669,
            "lon": -2.0613722,
            "text": "Manchester"
        }
    ]
}

Public methods

• .remove(): Reset map container to empty element.

Compiling dist folder

You must have npm and grunt installed.

• npm install
• grunt (this will also run tests)

Note that the images in src/img are not auto-compiled - if they're changed, the SVG code will need to be copied into pinpoint.js.

Customising styles

The look of the map and its markers is mostly controlled with CSS/SASS. These files can be found in src/scss:

• main: Head and deck, scale line style
• overlay: "Zoom/pan" icon
• markers: Square, circle and plain/invisible marker styles
• marker-label-callout: Callout label with north and south styles
• marker-label-plain: Plain label with N, NE, E, SE, S, SW, W and NW styles
• geojson: Styles for geojson objects

To change the map's basemap/tilelayer, use the basemap configuration variable. See above for more details.

Running tests

Tests are carried out with QUnit. To run tests, either open the HTML files in the test/ folder individually, or install NPM and Grunt (see above for details) and run grunt test.

Changelog

v1.1.1 (July 17, 2015)

• Fixed marker position bug

v1.1.0 (July 17, 2015)

• Removed jQuery dependency

v1.0.1 (July 9, 2015)

• Fix bug when no head or deck
• Throw useful error if Leaflet is missing
• Add basic tests

v1.0.0

• Initial release