ParticleMap.js

ParticleMap.js is a JavaScript library for generating point filled maps from GeoJSON files. It is is simple, lightweight and completely dependency free. A conscientious citizen, it weighs in at less than 500 lines. Efficient with HTML Canvas. Batteries included with a ton of customization.

Download Docs

Do cool things like a fancy pulsing circle effect over a city. Just like the movies!


var map = new ParticleMap(data, {
    canvas: canvas,
    padding: 0,
    stretch: false,
    pixelResolution: 5,
    drawPointFunc: function(coords, idx, status) {
        if (status == ParticleMap.prototype.pixelStatusEnum.OUTSIDE)
            return false;
    },
    foregroundColor: '#bababa'
});

var screenCoords = map.getScreenCoordFromMapCoord([lat, long]);
flashyPoint.setPosition(screenCoords);

Or give a shout-out to a special country in your life. It's all super easy to do.


new ParticleMap(data, {
    canvas: canvas,
    padding: 0,
    stretch: false,
    pixelResolution: 5,
    drawPointFunc: function(coords, idx, status) {
        var width = this.canvas.width;
        if (status == ParticleMap.prototype.pixelStatusEnum.INSIDE) {
            if (coords[0] <= width/3) return {color: '#000000'};
            if (coords[0] > width/3 && coords[0] <= (2*width) / 3) return {color: '#ff0000'};
            if (coords[0] > (2 * width) / 3) return {color: '#ffff00'};
        }
    }
});

Reads and parses any valid GeoJSON file. Toss your backyard or a nation into it - you'll have particle delicousness in no time.


var geojson_file = '/world.geo.json/countries/USA/MI.geo.json';
fetchDoc(geojson_file, function(data) {
    data = JSON.parse(data.target.response);
    // grab da mitt
    data.features[0].geometry.coordinates.splice(1, 3);

    new ParticleMap(data, {
        canvas: canvas,
        padding: 0,
        stretch: false,
        pixelResolution: 5,
        foregroundColor: '#00ff00',
        backgroundColor: '#AFF1FA'
    });
});

Download Docs