<html>
<head>
<title>BGP Communities Web Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js"></script>
<script src='dataset.js'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#map {
width: 960px;
height: 500px;
}
body{
padding: 10px
}
</style>
</head>
<body>
<div id="map"></div>
<div id="controls">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="Facility" checked>
<label class="form-check-label" for="defaultCheck1">
Facility
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="IXP" checked>
<label class="form-check-label" for="defaultCheck1">
IXP
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="City" checked>
<label class="form-check-label" for="defaultCheck1">
City
</label>
</div>
<div class="form-group row" style="padding: 10px;">
<div class="col-xs-2">
<label for="usr">ASN:</label>
<input type="text" class="form-control" id="asn">
</div>
</div>
</div>
<iframe width="600" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTVhdXfYKxqrw8O3rbcp_70whtXNIE3TZq11naL0hrRAEg4bfj9xQPES51a0yZDtwoxlUGijRThdyHO/pubchart?oid=1377460688&format=interactive"></iframe>
<script>
/***********************************************
CREATE DATA OVERLAY
***********************************************/
$(document).ready(function() {
jQuery('#asn').on('input propertychange paste', function() {
map.remove();
$( "body" ).prepend( $( '<div id="map"></div>' ) );
$.fn.createMap();
});
$('.form-check-input').change(function() {
map.remove();
$( "body" ).prepend( $( '<div id="map"></div>' ) );
$.fn.createMap();
});
$.fn.createMap = function() {
var map = L.map('map',{
scrollWheelZoom:false,
//center: [43.64701, -79.39425],
//zoom: 15
}).setView([23.64701, -10.39425], 2);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// specify what the circle markers should look like for open and closed 311 tickets
var markerStyleFacility = {
radius: 4, //size
fillColor: 'blue', fillOpacity: 0.8, // fill styles
color: 'black', opacity: 0.5, weight: 1 // border styles
};
var markerStyleIXP = {
radius: 4, //size
fillColor: 'red', fillOpacity: 0.8, // fill styles
color: 'black', opacity: 0.5, weight: 1 // border styles
};
var markerStyleCity = {
radius: 4, //size
fillColor: 'yellow', fillOpacity: 0.8, // fill styles
color: 'black', opacity: 0.5, weight: 1 // border styles
};
// give each data point a text popup containing the details
function createPopup(feature, layer) {
url_html = "";
if (feature.properties.url != ""){
url_html = "<br /><span class='popupDetails'><a href='"+feature.properties.url+"'>"+feature.properties.name+"</a></span>";
}
else{
url_html = "<br />" + feature.properties.name
}
layer.bindPopup('<span class="popupHeader">Community: ' + feature.properties.community + '</span><br />' +
'<span class="popupDetails">Type: ' + feature.properties.type + '</span>' + url_html) ;
}
var markers = L.markerClusterGroup();
// function to add data points to map layer with proper styling
function addPointToLayer(feature, latlng) {
if (feature.properties.asn == $("#asn").val() || $("#asn").val() == ""){
if(feature.properties.type=='IXP' && document.getElementById("IXP").checked) {
return L.circleMarker(latlng, markerStyleIXP);
}
else if(feature.properties.type=='Facility' && document.getElementById("Facility").checked) {
return L.circleMarker(latlng, markerStyleFacility);
}
else if(feature.properties.type=='City' && document.getElementById("City").checked) {
return L.circleMarker(latlng, markerStyleCity);
}
}
}
// specify how to load the individual features: give each its styling and a text popup
var pointsOptions = {
onEachFeature: createPopup,
pointToLayer: addPointToLayer,
};
// create the layer and add to map
var geojsonLayer = L.geoJson(dataset, pointsOptions);
markers.addLayer(geojsonLayer);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
}
// fit the initial map view to the data points
//map.fitBounds(geojsonLayer.getBounds());
$.fn.createMap();
});
</script>
</body>
</html>