tmcw/index.html

## index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Identify overlapping polygons</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.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-y:scroll;
    max-width:75%;
}
.info h4 {
    margin: 0 0 5px;
    color: #2b4eb6;
    font: 18px Arial, Helvetica, sans-serif;
    font-weight: bold;
}
th {
    text-align:left;
}
}
</style>
</head>
<body>


<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>

<style>
.leaflet-popup { width:240px; }
.leaflet-popup button {
    float:right;
    height:30px;
    line-height:10px;
}
</style>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
.setView([38, -95], 4);

var modelData = L.mapbox.featureLayer()
    .loadURL('modelData2.js')
    .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(); "></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>');

// 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.4,
    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,
    opacity: 1,
    weight: 1
};

// The specific shape selected
var loud = {
    fillColor: '#FFFF00',
    fillOpacity: 0.8,
    opacity: 0.2,
    weight: 3,
    dashArray: '3'
};

function collectLayers() {
    this.eachLayer(function(layer) {
        layers.push({
            name: layer.feature.NAME,
            layer: layer
        });
    });
    resetStyles();
}

// When the user resets the map by closing the popup, reset styles
function resetStyles() {
    for (var i = 0; i < layers.length; i++) {
        layers[i].layer.setStyle(quiet);
    }
}

map.on('popupclose', function() {
    resetStyles();
});

function handleClick(e) {
    var html = '';
    // look through each layer in order and see if the clicked point,
    // e.latlng, overlaps with one of the shapes in it.
    for (var i = 0; i < layers.length; i++) {
        var match = leafletPip.pointInLayer(
                // the clicked point
                e.latlng,
                // this layer
                layers[i].layer,
                // whether to stop at first match
                false);
        // if there's overlap, add some content to the popup: the layer name
        // and a table of attributes
        if (match.length) {
            html += match.length + ' matched at that location.<br/><br/>';
            html += propertyTable(layers[i].layer.feature.properties);
            html += '<button onclick="resetStyles();highlightMatch(this)" data-layer="' + i +
                '" data-latlng="' +
                [e.latlng.lat, e.latlng.lng] +
                '">highlight</button></strong>';
        }
    }
    if (html) {
        //map.openPopup(html, e.latlng);
        info.update(html);
    }
    // MKH suppress the default pop-up that comes with mapbox from opening, as we're using the info div
    e.layer.closePopup();
}

// To highlight a layer, we make all other layers quiet and then re-run
// the point in polygon match on that layer
function highlightMatch(that) {
    var layer = layers[that.dataset.layer].layer,
        latlng = L.latLng(that.dataset.latlng.split(','));

    for (var i = 0; i < layers.length; i++) {
        if (layers[i].layer == layer) {
            var match = leafletPip.pointInLayer(latlng, layers[i].layer, true);
            layers[i].layer.eachLayer(function(shape) {
                if (match[0] == shape) {
                    // the one shape that is matched becomes loud and clear
                    shape.setStyle(loud);
                } else {
                    shape.setStyle(medium);
                }
            });
        } else {
            layers[i].layer.setStyle(quiet);
        }
    }
}

// create a simple table from the properties in a feature, like the
// name of a state or district
function propertyTable(o) {
    var t = '<table>';
    for (var k in o) {
        var j=k;
        if (k=='URL') {
            t+= '<tr><th>' + k + '</th><td><a href='+o[k]+' target="_blank">'+o[k]+'</a></td></tr>';
        }
        else {
            if (k=='AUTHORS') {
                k='Authors';
            }
            if (k=='title') {
                k='Title';
            }
            if (k=='STATE') {
                k='Coverage';
            }
            if (k=='REPORT_SER') {
                k='Report';
            }
            if (k=='YEAR') {
                k='Year';
            }
            t += '<tr><th>' + k + ':</th><td>' + o[j] + '</td></tr>';
        }
    }
    t += '</table>';
    return t;
}
</script>


</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Identify overlapping polygons</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	.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-y:scroll;
	max-width:75%;
	}
	.info h4 {
	margin: 0 0 5px;
	color: #2b4eb6;
	font: 18px Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
	th {
	text-align:left;
	}
	}
	</style>
	</head>
	<body>


	<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>

	<style>
	.leaflet-popup { width:240px; }
	.leaflet-popup button {
	float:right;
	height:30px;
	line-height:10px;
	}
	</style>
	<div id='map'></div>
	<script>
	var map = L.mapbox.map('map', 'examples.map-i86nkdio')
	.setView([38, -95], 4);

	var modelData = L.mapbox.featureLayer()
	.loadURL('modelData2.js')
	.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(); "></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>');

	// 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.4,
	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,
	opacity: 1,
	weight: 1
	};

	// The specific shape selected
	var loud = {
	fillColor: '#FFFF00',
	fillOpacity: 0.8,
	opacity: 0.2,
	weight: 3,
	dashArray: '3'
	};

	function collectLayers() {
	this.eachLayer(function(layer) {
	layers.push({
	name: layer.feature.NAME,
	layer: layer
	});
	});
	resetStyles();
	}

	// When the user resets the map by closing the popup, reset styles
	function resetStyles() {
	for (var i = 0; i < layers.length; i++) {
	layers[i].layer.setStyle(quiet);
	}
	}

	map.on('popupclose', function() {
	resetStyles();
	});

	function handleClick(e) {
	var html = '';
	// look through each layer in order and see if the clicked point,
	// e.latlng, overlaps with one of the shapes in it.
	for (var i = 0; i < layers.length; i++) {
	var match = leafletPip.pointInLayer(
	// the clicked point
	e.latlng,
	// this layer
	layers[i].layer,
	// whether to stop at first match
	false);
	// if there's overlap, add some content to the popup: the layer name
	// and a table of attributes
	if (match.length) {
	html += match.length + ' matched at that location.<br/><br/>';
	html += propertyTable(layers[i].layer.feature.properties);
	html += '<button onclick="resetStyles();highlightMatch(this)" data-layer="' + i +
	'" data-latlng="' +
	[e.latlng.lat, e.latlng.lng] +
	'">highlight</button></strong>';
	}
	}
	if (html) {
	//map.openPopup(html, e.latlng);
	info.update(html);
	}
	// MKH suppress the default pop-up that comes with mapbox from opening, as we're using the info div
	e.layer.closePopup();
	}

	// To highlight a layer, we make all other layers quiet and then re-run
	// the point in polygon match on that layer
	function highlightMatch(that) {
	var layer = layers[that.dataset.layer].layer,
	latlng = L.latLng(that.dataset.latlng.split(','));

	for (var i = 0; i < layers.length; i++) {
	if (layers[i].layer == layer) {
	var match = leafletPip.pointInLayer(latlng, layers[i].layer, true);
	layers[i].layer.eachLayer(function(shape) {
	if (match[0] == shape) {
	// the one shape that is matched becomes loud and clear
	shape.setStyle(loud);
	} else {
	shape.setStyle(medium);
	}
	});
	} else {
	layers[i].layer.setStyle(quiet);
	}
	}
	}

	// create a simple table from the properties in a feature, like the
	// name of a state or district
	function propertyTable(o) {
	var t = '<table>';
	for (var k in o) {
	var j=k;
	if (k=='URL') {
	t+= '<tr><th>' + k + '</th><td><a href='+o[k]+' target="_blank">'+o[k]+'</a></td></tr>';
	}
	else {
	if (k=='AUTHORS') {
	k='Authors';
	}
	if (k=='title') {
	k='Title';
	}
	if (k=='STATE') {
	k='Coverage';
	}
	if (k=='REPORT_SER') {
	k='Report';
	}
	if (k=='YEAR') {
	k='Year';
	}
	t += '<tr><th>' + k + ':</th><td>' + o[j] + '</td></tr>';
	}
	}
	t += '</table>';
	return t;
	}
	</script>


	</body>
	</html>