Initial public commit

.gitignore

@@ -0,0 +1,4 @@
+**/*.css.map
+node_modules
+.sass-cache
+**/.DS_Store

Gruntfile.js

@@ -0,0 +1,71 @@
+module.exports = function(grunt) {
+
+    // 1. All configuration goes here 
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+
+        concat: {   
+            js: {
+                src: ['src/js/*.js'],
+                dest: 'dist/pinpoint.js'
+            }
+
+        },
+
+        uglify: {
+            build: {
+                src: 'dist/pinpoint.js',
+                dest: 'dist/pinpoint.min.js'
+            }
+        },
+
+        sass: {
+            dist: {
+                files: {
+                    'dist/pinpoint.css': 'src/scss/main.scss'
+                }
+            },
+            dist_min: {
+                options: {
+                    style: 'compressed',
+                    sourcemap: 'none'
+                },
+                files: {
+                    'dist/pinpoint.min.css': 'src/scss/main.scss'
+                }
+            }
+        },
+
+        watch: {
+            options: {
+                livereload: true,
+            },
+            scripts: {
+                files: ['src/js/*'],
+                tasks: ['concat', 'uglify'],
+                options: {
+                    spawn: false,
+                },
+            },
+            css: {
+                files: ['src/scss/*'],
+                tasks: ['sass'],
+                options: {
+                    spawn: false,
+                }
+            }
+        }
+
+    });
+
+    // 3. Where we tell Grunt we plan to use this plug-in.
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-sass');
+
+
+    // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
+    grunt.registerTask('default', ['concat','uglify','sass']);
+
+};

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Dow Jones
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

Readme.md

@@ -0,0 +1,151 @@
+# Pinpoint
+
+A JavaScript library for creating beautifully simple maps in seconds. Developed at The Wall Street Journal.
+
+- [Example on WSJ.com](http://www.wsj.com/articles/mass-grave-of-boko-haram-victims-discovered-1426867025)
+- [Blog post](http://ejb.github.io/2015/03/21/pinpoint-maps-at-wsj.html)
+
+## Features
+
+- Map settings are stored in a simple JSON format and can be generated using [Pinpoint Editor](https://github.com/dowjones/pinpoint-editor).
+- Fully responsive with touch-friendly "click-to-activate" behaviour.
+- Powered by the awesome [Leaflet.js](http://leafletjs.com).
+
+## Quickstart
+
+Include `pinpoint.js` and `pinpoint.css` on your page.
+
+In terms of HTML, just a single div is needed:
+
+```html
+<div class="map-container"></div>
+```
+
+Then in your JavaScript file:
+
+```js
+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.
+
+option              | type     | default                                    | description
+------------------- | -------- | ------------------------------------------ | ------------------
+element             | string   | "#map-el"                                  | CSS selector for map parent element.
+aspect-ratio        | string   | (required)                                 | The shape of the map: "wide" (3x2), "square" (1x1), or "tall" (5x6)
+lat                 | number   | (required)                                 | Latitude for map centre.
+lon                 | number   | (required)                                 | Longitude for map centre.
+markers             | array    | (required)                                 | Array of markers/icons on map (see below for details).
+zoom                | number   | (required)                                 | Initial zoom level of map.
+hed                 | string   | (blank)                                    | Headline for map (optional).
+dek                 | string   | (blank)                                    | Dek for map (optional).
+note                | string   | (blank)                                    | Note to go below map (optional).
+minimap             | boolean  | false                                      | Set to `true` to enables zoomed-out smaller map in corner.
+minimap-zoom-offset | number   | -5                                         | Zoom level of minimap relative to main map zoom. Should always be below 0.
+basemap             | string   | "http://{s}.tile.osm.org/{z}/{x}/{y}.png"  | Leaflet tile layer [URL template](http://leafletjs.com/reference.html#url-template) (optional)
+basemapCredit       | string   | "Leaflet | © OpenStreetMap contributors"   | Credit for tilelayer. Goes at bottom, below note. (optional)
+creation            | boolean  | false                                      | Set to `true tot enables "creation mode" for use in admin tool.
+dragend             | function | undefined                                  | Anonymous function called on Leaflet `dragend` event (ie. when dragging/panning map).
+zoomend             | function | undefined                                  | Anonymous function called on Leaflet `zoomend` event (ie. when zooming).
+markerdragend       | function | undefined                                  | Anonymous function called on Leaflet marker `dragend` event (ie. when dragging a marker around the map). Only works when `creation` is true.
+
+
+### Marker options
+
+Markers are stored as an array of objects.
+
+option          | type   | default    | description
+--------------- | ------ | ---------- | ------------------
+lat             | number | (required) | Latitude of point.
+lon             | number | (required) | Longitude of point.
+text            | string | (blank)    | Text for marker callout.
+icon            | string | "square"   | Marker icon style: "circle", "square" or "none".
+label           | string | "callout"  | Marker label style: "callout" or "plain".
+label-direction | string | "north"    | Marker label direction. Available directions varies between label styles.
+
+### Example configuration JSON
+
+```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](https://www.npmjs.com) and [grunt](http://gruntjs.com) installed.
+
+- `npm install`
+- `grunt`
+
+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.
+
+## Changelog
+
+v1.0.0
+
+- Initial release
+
+

bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "pinpoint-library",
+  "version": "1.0.0",
+  "authors": [
+    "ejb <[email protected]>"
+  ],
+  "license": "MIT",
+  "main": [
+    "dist/pinpoint.js",
+    "dist/pinpoint.css"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "description": "A JavaScript library for creating beautifully simple maps in seconds.",
+  "moduleType": [
+    "globals"
+  ]
+}