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:
- mapnificent.getDistanceInKm({"lat":52.0, "lng":13.0}, {"lat":52.4, "lng":14.0}) returns the distance between to geographical points in kilometers
- mapnificent.inRange({"lat":52.0, "lng":13.0}) returns true if geographic position is in the layer area.
- mapnificent.getDrawingContext() returns the drawing context of the canvas.
- mapnificent.showMessage("My message") shows a message briefly to the user. Only use if really necessary.
- mapnificent.hasCompositing returns true if most compositing operations are available (a lot are currently broken in webkit).
- mapnificent.bind("myEvent", function(){}) A really simple event handling for mapnificent. Current events are only "redraw" and "setPosition" (both of which you already are automatically subscribed to via redraw and calculate)
- mapnificent.trigger("myEvent") triggers the event and fires every function previously bound to that event.
- mapnificent.env is an object and contains all options that can be set with mapnificent and other useful values like widthInKm of the canvas etc. Inspect it to see what else is in there.
- mapnificent.map is the map instance (currently Google Maps). You may use their API, but be aware that the map engine may be subject to change.
- mapnificent.createMarker(position, options)returns a marker instance.
- mapnificent.addEventOnMarker(event, marker, callback)binds an event like "click" to marker and fires callback when event happens.
- mapnificent.removeMarker(marker)removes marker from map.
- mapnificent.getAddressForPoint(latlng, callback)makes a geocoding lookup.
- mapnificent.DegToRadFactor, mapnificent.RadToDegFactor, mapnificent.circleRadians are always useful. Not subject to change.
- The jQuery object is available.
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).