Leaflet / Mapbox Popup Info's as Table
HTML
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.css">
Leaflet / Mapbox
Popup Info's as Table
<div id='map'></div>
CSS
body {
margin:0;
padding:0;
}
#map {
position:absolute;
top:calc(0% + 20px);
bottom:0;
width:100%;
overflow:auto;
position:fixed;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
height:300px;
overflow:scroll;
overflow-y:auto;
word-wrap: normal;
max-width:45%;
}
.info h4 {
margin: 0 0 5px;
color: #2b4eb6;
font: 18px Arial, Helvetica, sans-serif;
font-weight: bold;
}
th {
text-align:left;
vertical-align:top;
}
JavaScript
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([38, -95], 5);
L.mapbox.featureLayer()
.loadURL('http://cida-test.er.usgs.gov/ngwmn-geoserver/ngwmn/wms?service=WFS&version=1.0.0&request=GetFeature&typeName=ngwmn:central_region_gw_models&outputFormat=json&crs=4326')
//http://cida-eros-ngwmnqa.er.usgs.gov:8081/ngwmn-geoserver/ngwmn/wms
//.loadURL('https://api.myjson.com/bins/3rqk5')
.on('click', handleClick)
.on('ready', collectLayers)
.addTo(map);
var layers = [];
var info = L.control({
position: 'bottomleft'
});
info.update = function (html) {
//console.log(html);
this._div.innerHTML = '<h4>Central Region Groundwater Models</h4>';
if (null != html) {
this._div.innerHTML += '<span style="float:right"><input type="button" id="clear" value="Reset Selection" onclick="map.removeControl(info); info.addTo(map); resetStyles();resetMapControls();map.setView([38, -95], 5)"></span>'
this._div.innerHTML += html;
}
if (null == html) {
this._div.innerHTML += 'Click a boundary on the map to review more details about the model.';
}
};
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.addTo(map);
map.attributionControl.addAttribution('Groundwater Model Data <a href="http://cida.usgs.gov/">US Geological Survey</a>');
//Right click on the map activated, resets things
map.on('contextmenu', function (e) {
map.removeControl(info);
info.addTo(map);
resetStyles();
resetMapControls();
//map.setView([38, -95], 5)
});
// This is the default style of layers when the user isn't interacting
// with the map
var quiet = {
fillColor: '#3399FF',
fillOpacity: 0.2,
color: 'white',
opacity: 0.6,
weight: 1,
dashArray: 0
};
// The style of a layer that's been filtered to but not the specific
// shape the user selected
var medium = {
fillColor: '#D6EBFF',
fillOpacity: 0.4,
...