Skip to content

Instantly share code, notes, and snippets.

@sdball

sdball/broadbandmap.jquery.js

Created November 18, 2011 21:25
Show Gist options
  • Save sdball/1377802 to your computer and use it in GitHub Desktop.
Save sdball/1377802 to your computer and use it in GitHub Desktop.
Download ZIP
broadband.com jquery javascript plugin
Raw
broadbandmap.jquery.js
(function( $ ){
var settings = {
lat: 38.651198,
lng: -97.976074,
address: '',
minimumDetailZoom: 4,
defaultZoom: 4,
displayLitBuildings: false,
displayCentralOffices: false,
dslHeatmapActive: false,
eocHeatmapActive: false,
displayFiberMap: false,
displayPriceMap: false,
includePricing: false,
includeControls: true,
includeBranding: true,
includeZipCodeSearch: true,
mapTypeControl: true,
detailedLitBuildings: false,
controlsBackgroundColor: '#269FB2'
};
$.fn.broadbandMap = function(options) {
return this.each(function() {
var $this = $(this);
$.extend(settings, options);
// ========================
// = include map controls =
// ========================
if (settings.includeControls) {
var broadbandmap_controls = [];
var cosChecked = settings.displayCentralOffices ? 'checked="checked"' : '';
var litBuildingsChecked = settings.displayLitBuildings ? 'checked="checked"' : '';
var dslCoverageChecked = settings.dslHeatmapActive ? 'checked="checked"' : '';
var eocCoverageChecked = settings.eocHeatmapActive ? 'checked="checked"' : '';
broadbandmap_controls.push('<div id="broadbandmap_controls" style="background-color: ' + settings.controlsBackgroundColor + '; width: ' + $this.width() + 'px; color: white; font: 14px Arial, Helvetica; padding: 4px 0;">');
broadbandmap_controls.push('<input style="margin-bottom: 0; height: 12px; display: inline; margin-left: 12px" type="checkbox" name="centralOffices" id="broadbandmap_controls_centralOffices" class="broadbandmap_controls_layer_toggle" ' + cosChecked + '/>');
broadbandmap_controls.push('<label style="color: white; display: inline;" for="broadbandmap_controls_centralOffices">COs</label>');
broadbandmap_controls.push('<input style="margin-bottom: 0; height: 12px; display: inline; margin-left: 12px" type="checkbox" name="litBuildings" id="broadbandmap_controls_litBuildings" class="broadbandmap_controls_layer_toggle" ' + litBuildingsChecked + '/>');
broadbandmap_controls.push('<label style="color: white; display: inline;" for="broadbandmap_controls_litBuildings">Lit buildings</label>');
broadbandmap_controls.push('<input style="margin-bottom: 0; height: 12px; display: inline; margin-left: 12px" type="checkbox" name="dslCoverage" id="broadbandmap_controls_dslCoverage" class="broadbandmap_controls_layer_toggle" ' + dslCoverageChecked + '/>');
broadbandmap_controls.push('<label style="color: white; display: inline;" for="broadbandmap_controls_dslCoverage">DSL</label>');
broadbandmap_controls.push('<input style="margin-bottom: 0; height: 12px; display: inline; margin-left: 12px" type="checkbox" name="eocCoverage" id="broadbandmap_controls_eocCoverage" class="broadbandmap_controls_layer_toggle" ' + eocCoverageChecked + '/>');
broadbandmap_controls.push('<label style="color: white; display: inline;" for="broadbandmap_controls_eocCoverage">EOC</label>');
if (settings.includeZipCodeSearch) {
broadbandmap_controls.push('<input style="height: 12px; display: inline; margin-left: 24px" type="text" name="broadbandmap_controls_zipcode" id="broadbandmap_controls_zipcode" size="5" maxlength="5" />');
broadbandmap_controls.push('<label style="color: white; display: inline; margin-left: 4px" for="broadbandmap_controls_zipcode">Zip Code</label>');
broadbandmap_controls.push('<button style="margin-left: 4px" id="broadbandmap_controls_update_zipcode">Go!</button>');
}
broadbandmap_controls.push('</div>');
$this.before(broadbandmap_controls.join(''));
$('#broadbandmap_controls_update_zipcode').click(function() {
$('#broadbandmap_controls_update_zipcode').change();
});
$('#broadbandmap_controls_zipcode').change(function() {
$.ajax({
url: 'http://api.broadband.com/zipcode_lookup/latlng/' + $(this).val(),
data: {
format: 'json'
},
dataType: 'jsonp',
jsonp: 'jsonp_callback',
success: function(json) {
$('#broadbandmap_controls_zipcode_error').remove();
if (json.status == 'failure') {
$('#broadbandmap_controls_update_zipcode').after('<span style="margin-left: 8px; color: #f00; font-weight: bold; position: relative; top: 1px" id="broadbandmap_controls_zipcode_error">Not found.</span>');
return;
}
var gmap = $this.data('broadbandMap').gmap;
var zipCenter = new google.maps.LatLng(json.data.lat, json.data.lng);
gmap.setCenter(zipCenter);
gmap.setZoom(10);
}
});
});
// watch for layer toggling
(function(bbmap) {
$('.broadbandmap_controls_layer_toggle').change(function() {
var layers = {};
$('.broadbandmap_controls_layer_toggle').each(function(index) {
layers[this.name] = this.checked;
});
bbmap.trigger('layersToggle', layers);
});
bbmap.bind('layer-loaded', function(event) {
setTimeout(function() {
$('#broadbandmap_controls_ajax_loader').fadeOut('fast');
}, 4000);
});
})($this);
}
$this.bind({
'layerToggle': layerToggle,
'layersToggle': layersToggle
});
// map variables
var markers = [];
var seenCoordinates = {};
var productAreas = {
eoc: {},
dsl: {}
};
var minDetailZoom = settings.minimumDetailZoom;
var defaultZoom = settings.defaultZoom;
var dslHeatmapActive = settings.dslHeatmapActive;
var eocHeatmapActive = settings.eocHeatmapActive;
var loadLitBuildings = settings.displayLitBuildings;
var loadCentralOffices = settings.displayCentralOffices;
var loadFiberMap = settings.displayFiberMap;
var loadPriceMap = settings.displayPriceMap;
var litBuildings01;
var litBuildings02;
var litBuildings03;
var centralOffices;
var dslCoverage;
var eocCoverage;
var fibermap01;
var fibermap02;
var fibermap03;
var broadbandMap;
init();
function init() {
var origin = new google.maps.LatLng(settings.lat, settings.lng);
relativeCenter = origin;
var mapOptions = {
zoom: defaultZoom,
minZoom: minDetailZoom,
center: origin,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: settings.mapTypeControl,
streetViewControl: false,
scaleControl: true,
scrollwheel: false,
disableDoubleClickZoom: false
};
broadbandMap = new google.maps.Map($this.get(0), mapOptions);
$this.data('broadbandMap', {
gmap: broadbandMap,
coDistance: '-',
fiberDistance: '-'
});
// DSL Coverage layer
dslCoverage = new google.maps.FusionTablesLayer(1012330, {
clickable: false,
suppressInfoWindows: true
});
if (dslHeatmapActive) {
dslCoverage.setMap(broadbandMap);
}
// EOC Coverage KML
eocCoverage = new google.maps.FusionTablesLayer(1012138, {
clickable: false,
suppressInfoWindows: true
});
if (eocHeatmapActive) {
eocCoverage.setMap(broadbandMap);
}
// Central Offices Layer
centralOffices = new google.maps.FusionTablesLayer(1012233);
if (loadCentralOffices) {
centralOffices.setMap(broadbandMap);
}
// Lit Buildings KML Layers (fusion tables has a max of 100,000 mappable points per layer)
// detailedLitBuildings contain carrier and npa/nxx data
if (settings.detailedLitBuildings) {
litBuildings01 = new google.maps.FusionTablesLayer(815002);
litBuildings02 = new google.maps.FusionTablesLayer(816600);
litBuildings03 = new google.maps.FusionTablesLayer(816614);
} else {
litBuildings01 = new google.maps.FusionTablesLayer(817304);
litBuildings02 = new google.maps.FusionTablesLayer(817059);
litBuildings03 = new google.maps.FusionTablesLayer(817063);
}
if (loadLitBuildings) {
litBuildings01.setMap(broadbandMap);
litBuildings02.setMap(broadbandMap);
litBuildings03.setMap(broadbandMap);
}
// Fiber Map KML Layers
fibermap01 = new google.maps.FusionTablesLayer(1340901);
fibermap02 = new google.maps.FusionTablesLayer(1340906);
fibermap03 = new google.maps.FusionTablesLayer(1346568);
if (loadFiberMap) {
fibermap01.setMap(broadbandMap);
fibermap02.setMap(broadbandMap);
fibermap03.setMap(broadbandMap);
}
// Pricing Map Layer
pricemap = new google.maps.FusionTablesLayer(1372881);
if (loadPriceMap) {
pricemap.setMap(broadbandMap);
}
}
function layerToggle(e, data) {
var layerName = data.name;
var active = data.active;
var layers = [];
switch (layerName) {
case 'dslCoverage':
dslHeatmapActive = active;
layers.push(dslCoverage);
break;
case 'eocCoverage':
eocHeatmapActive = active;
layers.push(eocCoverage);
break;
case 'litBuildings':
loadLitBuildings = active;
layers.push(litBuildings01);
layers.push(litBuildings02);
layers.push(litBuildings03);
break;
case 'centralOffices':
loadCentralOffices = active;
layers.push(centralOffices);
break;
}
for (var i = 0, ii = layers.length; i < ii; i++) {
if (active) {
layers[i].setMap(broadbandMap);
} else {
layers[i].setMap(null);
}
}
}
function layersToggle(e, data) {
if (data.dslCoverage) {
dslCoverage.setMap(broadbandMap);
} else {
dslCoverage.setMap(null);
}
if (data.eocCoverage) {
eocCoverage.setMap(broadbandMap);
} else {
eocCoverage.setMap(null);
}
if (data.centralOffices) {
centralOffices.setMap(broadbandMap);
} else {
centralOffices.setMap(null);
}
if (data.litBuildings) {
litBuildings01.setMap(broadbandMap);
litBuildings02.setMap(broadbandMap);
litBuildings03.setMap(broadbandMap);
} else {
litBuildings01.setMap(null);
litBuildings02.setMap(null);
litBuildings03.setMap(null);
}
if (data.fiber_map) {
fibermap01.setMap(broadbandMap);
fibermap02.setMap(broadbandMap);
fibermap03.setMap(broadbandMap);
} else {
fibermap01.setMap(null);
fibermap02.setMap(null);
fibermap03.setMap(null);
}
if (data.price_map) {
pricemap.setMap(broadbandMap);
} else {
pricemap.setMap(null);
}
}
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment