Mapnificent Documentation

About

Mapnificent is a web app that displays interactive layers on a map of Berlin. It's also a framework for canvas-powered geographical overlays. Read my blog post It's Mapnificent about how Mapnificent works and how it compares to its inspiration Mapumental.

The source code for Mapnificent is currently licensed under Creative Commons BY-NC-SA. You can find the code on GitHub.

Your Layers from Open Data

If you have built a cool layer that uses Open Data to visualize something mapnificent (see below on how to do that), then please send the necessary files to mail@mapnificent.de and I will include them in the online version.

Adding Layers

Mapnificent is supposed to be extensible with layers — layers you are supposed to contribute!

A layer consists of a JavaScript file that contains the layer logic and optionally a JSONP file that contains the layer data.

Layer logic

The layer logic must be encapsulated in a JavaScript Module constructor that should close over a mapnificent reference that should be given as a parameter:

Mapnificent.addLayer("awesomeLayer", function(mapnificent){
    /* mapnificent.createLayer returns a default Layer object */
    var that = mapnificent.createLayer(); 
    that.idname = "awesomeLayer";
    // tabid will be overriden with "custom" when loaded live
    that.tabid = "someTabId"; 
    var privateVariable, someValue = "default";
    var privateFunction = function(e){
        if (LOCK){return;}
        LOCK = true;
        mapnificent.trigger("redraw");
        LOCK = false;
    };
    that.getTitle = function(){
        return "Awesome Layer";
    };
    that.activate = function(){
        /* if empty can be left out */
    };
    that.deactivate = function(){
        /* if empty can be left out */
    };
    that.getDrawingLevel = function(){
        return 3; // defaults to 20 if not set
    };
    that.setup = function(dataobjs, controlcontainer, options){
        /* stores layerdata in private variable */
        crimes = dataobjs[0];
        // adds custom html to designated container
        jQuery(controlcontainer).append('hello');
        // override from options
        someValue = options.someValue || someValue; 
    };
    that.redraw = function(ctx){
        /* Converts a geographical point to a canvas coordinate */
        var p = mapnificent.getCanvasXY({"lat": 52, "lng": 12});
        ctx.save();
        ctx.fillRect(p.x, p.y, 20,20);
        ctx.restore();
    };
    return that; //don't forget that
});
                

Mapnificent provides some handy methods. One has been used in this example: getCanvasXY converts geographic coordinates into coordinates that map to the canvas.

Some other useful methods and values:

Layer Data

Layer data should be in its own file and formatted like so:

Mapnificent.addLayer("awesomeLayer", [DataObject1, DataObject2]);
                

Remember the dataobjs in your setup method? Here is the array that will be passed.

Final step

Instantiate a mapnificent instance and add the layers like so:

var mapnificent = Mapnificent();        // get a new mapnificent instance
mapnificent.addLayer("urbanDistance"); // add "urbanDistance" layer
$(document).ready(function(){
    mapnificent.initMap("map"); // "map" is id of map container div
});
                

The Mapnificent function takes also options:

var mapnificent = Mapnificent({"mapStartCenter": 
        {"lat": 51.500515, "lng": -0.128317},
    "northwest": {"lat":51.713416, "lng":-0.560303}, // bounds of overlay
    "southeast": {"lat":51.273944, "lng":0.346069},
    "mapStartZoom": 12, // start zoom
    "layerSettings": { // These settings are passed to the respective layer
        "urbanDistance": 
            {"defaultStartAtPosition": {"lat": 51.4945146, "lng": -0.146578}
             , "darkOverlayColor": "rgba(0,0,0,0.75)"
             , "colorMaxGradientColor" : 120
            }
        }
    });
                

If anything goes wrong, check JavaScript Console, that everything is named right and read the mapnificent source code (it's not really long or complicated).