Editable table controlling marker data
Use the handsontable jQuery plugin to control a L.mapbox.featureLayer.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Editable table controlling marker data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.ui-table.handsontable {
background:#fff;
position:absolute;
top:10px;
right:10px;
z-index:100
}
</style>
<div id='table' class='ui-table'></div>
<div id='map'></div>
<!-- jQuery is required for this example. -->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/jquery-migrate-1.2.1.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/jquery-handsontable/0.10.2/jquery.handsontable.full.min.css' rel='stylesheet' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-handsontable/0.10.2/jquery.handsontable.full.min.js'></script>
<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map')
.setView([43.945, 19.380], 5)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));;
// Handsontable changes this data by reference, so when it is edited,
// this copy will be modified in-place.
// http://handsontable.com/demo/understanding_reference.html
var data = [{
lon: 12.493515014648438,
lat: 41.89409955811395,
name: 'Rome',
size: 'large',
color: '#c091e6'
}, {
lon: 28.939361572265625,
lat: 41.01099329360268,
size: 'small',
name: 'Istanbul',
color: '#fa946e'
}];
// Create the layer that will contain these markers: this is used in the
// dataToMarkers function below with .setGeoJSON to update marker data.
var dataLayer = L.mapbox.featureLayer().addTo(map);
// Create the table: see full documentation for this call at
// http://handsontable.com/index.html
$("#table").handsontable({
data: data,
startRows: 7,
startCols: 4,
colHeaders: ['Lon', 'Lat', 'Name', 'Size', 'Color'],
columnSorting: true,
columns: [
{
data: 'lon',
type: 'numeric'
},
{
data: 'lat',
type: 'numeric'
},
{
data: 'name'
},
{
data: 'size',
editor: 'select',
selectOptions: ['small', 'medium', 'large']
},
{
data: 'color'
}
],
minSpareRows: 1,
// Everytime the table is changed, update the markers on the map.
afterChange: dataToMarkers
});
function dataToMarkers() {
// Create a new geojson object that'll represent the table values.
var geojson = { type: 'FeatureCollection', features: [] };
// For each table row, create a marker.
for (var i = 0; i < data.length; i++) {
// Blank rows shouldn't be included - they're easy to detect and skip.
if (data[i].lon === null || data[i].lat === null) continue;
geojson.features.push({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [ data[i].lon, data[i].lat]
},
properties: {
'marker-size': data[i].size,
'marker-color': data[i].color,
'title': data[i].name
}
});
}
dataLayer.setGeoJSON(geojson);
}
</script>
Get a free Mapbox account to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and
replacing the Map ID
with
one of your own from your projects.
Having trouble with JavaScript? Try out Codecademy
or contact our support team.