Bulk-Add Markers to MapBox

README.md

This script allows you to add markers to the MapBox markers interface, in bulk, from a GeoJSON file that contains Point geometries only.

Since it only accepts GeoJSON, you can use OGR, togeojson, or csv2geojson to get usable input data.

This requires you to use the Javascript console of your browser and know elementary Javascript. For instance, a process might look like:

// copy and paste domarkers.js
function domarkers(gj, title, description) { // ... copy and paste domarkers here

// get geojson blob, and then enter your javascript client
var data = { type: 'FeatureSet' // ... copy and paste geojson here

// call domarkers with your data
domarkers(data, 'name', 'description');

This will break with thousands of markers, because browsers break with thousands of markers. That is why we invented UTFGrid. If you have thousands of markers, use TileMill instead.

domarkers.js

// add markers to the MapBox interface
//
// gj is a GeoJSON object. It is not a file URL, it's an object. So,
// copy and paste the JSON blob and assign it to a variable.
//
// title and description specify the properties of the GeoJSON features
// which become title and description in the MapBox map. They default to
// Name and Description. They must be strings.
function domarkers(gj, title, description) {
    gj.features.forEach(function(f) {
        // this only works with point features. multipoints, lines, and so
        // on are not supported.
        if (f.geometry.type && f.geometry.type !== 'Point') return;

        $('.unplaced input[name=title]').val(f.properties[title || 'Name']);
        $('.unplaced textarea[name=description]').val(f.properties[description || 'Description']);

        var p = f.geometry.coordinates;
        $('.unplaced input[name=lon]').val(p[0]);
        $('.unplaced input[name=lat]').val(p[1]);

        // Optional custom styling. Interact with icons, colors, and so on.
        // $('.unplaced .maki-icon.airport').click();
        // if (f.properties.Description.match(/Active/g)) {
        //     $('.unplaced a[data-color="#f63a39"]').click();
        // }

        // This is necessary to place the markers, otherwise the form
        // does not register the fact that its values have been changed.
        $('.unplaced input[name=zoom]').val('0').change().keyup();

        // Add this marker.
        $('a[href=#adding]').click();
    });
    alert('finished adding markers');
}