in-map

Technical Concept

The technical concept can now be found in the wiki

Instructions

• Add mapbox to requirejs' paths: https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox
• Require 'jquery.inMap'.

Example:

define(['jquery', 'jquery.inMap'], function ($, inmap) {
    var map = $('#basic_map').inMap('noxoc.iie3m4pe');
    map.addMarker([53.5, 8.3]);
    map.addMarker({
        position: [40, 8],
        title: 'Some title',
        description: 'Some description'
    });
});

A map can also be directly initialized with markers.

var markers = [{
        position: [10, 20]
    }, {
        position: [20, 10],
        title: 'Some Title',
        description: 'The Description'
    }, {
        position: [30, 20],
        title: 'Some Title',
        // can also take HTMLNodes for the description
        description: $('.sample_content')[0];
    }];

var map = $('#basic_map').inMap('noxoc.iie3m4pe', markers);

Rough Roadmap

0.1 marker

• Basic initialisation of map via $(element).inMap(map_id)
• Add build tools to generate docs and minified versions
• Add simple markers through simplified API wrapper
• Add more advanced markers
• Add markers with the content of a dom-node as infowindows
• Add multiple markers with addMarkers([])
• Add markers on initialisation with JSON

0.2 zooming

• zoom to specific points: .setZoom(args)
• zoom at a specific marker: .zoomAt(i)
• cycle through markers: .zoomPrev(args) and .zoomNext(args);
• set bounds to view all markers: .zoomAll(args)

0.3 countries

• provide a method to add country data (geojson) to map
• handle mouse events on feature layers
• highlight countries: .highlight('DEU')
• auto-highlight countries with markers

0.4 enhanced zooming

• zooming on markers opens its tooltip
• zooming on a marker sets the view bounds to the country the marker is in.
• provide a way to set the offset that's taken into account when zooming

0.5 marker clustering

• allow grouping markers into clusters at low zoom levels