-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add siteinfo based status map (#506)
* started modifying the status page to use a leaflet map; removed link to neubot central server that is now offline * start at converting status map to use open tiles & siteinfo * WIP - basic mapbox replacement for status map * WIP - clustered version of status map * trying to get props of cluster children * update new status map with basic clusters, show props of cluster leaves * style cluster css * make popups show/hide on hover, not click * switching back to show/hide on click, removed cluster zoom on click * replaced local copy of sitegeo.json with updated copy in GCS * updates per reviewer's comments * added local sitegeo file for previewing to avoid cors issues. will change on final commit before merging after review session2 * add missing semi-colon * add notes on using the infrastructure map * update url for siteinfo data
- Loading branch information
critzo
authored
Aug 29, 2019
1 parent
c2bffe3
commit 7799249
Showing
8 changed files
with
2,949 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| <script> | ||
| mapboxgl.accessToken = 'pk.eyJ1IjoibS1sYWIiLCJhIjoiY2p3eWtxOXZ4MDFkMzQ5cG95ODFhbWJieiJ9.9G1YGnkme4goR0Ly3kqovA'; | ||
| var map = new mapboxgl.Map({ | ||
| container: 'map', | ||
| style: 'mapbox://styles/mapbox/dark-v10', | ||
| center: [12,25], | ||
| zoom: 0.8 | ||
| }); | ||
|
|
||
| var url = 'https://siteinfo.mlab-oti.measurementlab.net/v1/sites/geo.json'; | ||
|
|
||
| map.on('load', function () { | ||
|
|
||
| const tenG = ['==', ['get','uplink'], '10g']; | ||
| const oneG = ['==', ['get','uplink'], '1g']; | ||
|
|
||
| map.addSource("mlab-sites", { | ||
| type: "geojson", | ||
| data: url, | ||
| cluster: true, | ||
| clusterRadius: 10, | ||
| clusterMaxZoom: 15, | ||
| clusterProperties: { | ||
| 'oneG': ['+', ['case', oneG, 1, 0]], | ||
| 'tenG': ['+', ['case', tenG, 1, 0]], | ||
| } | ||
| }); | ||
| map.addLayer({ | ||
| "id": "clusters", | ||
| "type": "circle", | ||
| "source": "mlab-sites", | ||
| "filter": ["has", "point_count"], | ||
| "paint": { | ||
| "circle-radius": [ | ||
| "step", | ||
| ["get", "point_count"], | ||
| 5, | ||
| 2, | ||
| 10, | ||
| 6, | ||
| 15 | ||
| ], | ||
| "circle-color": [ | ||
| "step", | ||
| ["get","point_count"], | ||
| "#deebf7", | ||
| 2, | ||
| "#9ecae1", | ||
| 6, | ||
| "#3182bd" | ||
| ]} | ||
| }); | ||
| map.addLayer({ | ||
| "id": "cluster-count", | ||
| "type": "symbol", | ||
| "source": "mlab-sites", | ||
| "filter": ["has", "point_count"], | ||
| "layout": { | ||
| "text-field": "{point_count_abbreviated}", | ||
| "text-font": ["DIN Offc Pro Medium", | ||
| "Arial Unicode MS Bold"], | ||
| "text-size": 12 | ||
| } | ||
| }); | ||
| map.addLayer({ | ||
| "id": "unclustered-point", | ||
| "type": "circle", | ||
| "source": "mlab-sites", | ||
| "filter": ["!", ["has", "point_count"]], | ||
| "paint": { | ||
| "circle-radius": 5, | ||
| "circle-color": "#deebf7", | ||
| "circle-stroke-width": 1, | ||
| "circle-stroke-color": "#000" | ||
| } | ||
| }); | ||
|
|
||
| var clusterPopup = new mapboxgl.Popup({ | ||
| className: 'cluster-popup' | ||
| }); | ||
| var pointPopup = new mapboxgl.Popup({ | ||
| className: 'point-popup' | ||
| }); | ||
|
|
||
| map.on('click','clusters', function(e) { | ||
| var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] }); | ||
| var clusterId = features[0].properties.cluster_id, | ||
| point_count = features[0].properties.point_count, | ||
| clusterSource = map.getSource('mlab-sites'); | ||
| clusterNodes = clusterSource.getClusterLeaves(clusterId, point_count, 0, function(err, aFeatures){ | ||
| var desc = ""; | ||
| for (c=0; c < aFeatures.length; c++) { | ||
| desc += "<div class='pod-popup'><h4>"+aFeatures[c].properties.city+" - "+ | ||
| aFeatures[c].properties.name+" - "+aFeatures[c].properties.uplink+"</h4>"+ | ||
| aFeatures[c].properties.provider + " ("+aFeatures[c].properties.asn+")<br>"+ | ||
| "IPv4 Prefix: "+aFeatures[c].properties.ipv4_prefix; | ||
| if (aFeatures[c].properties.ipv6_prefix != null) { | ||
| desc += "<br>IPv6 Prefix: "+aFeatures[c].properties.ipv6_prefix; | ||
| } | ||
| desc += "</div>"; | ||
| } | ||
| var coordinates = e.lngLat; | ||
| while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { | ||
| coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; | ||
| } | ||
| clusterPopup.setLngLat(coordinates).setHTML(desc).addTo(map); | ||
| }); | ||
| }); | ||
|
|
||
| map.on('click','unclustered-point', function(e) { | ||
| var coordinates = e.features[0].geometry.coordinates.slice(); | ||
| var description = "<h4>" + e.features[0].properties.city + " - " + | ||
| e.features[0].properties.name + " - "+ e.features[0].properties.uplink +"</h4>" + | ||
| e.features[0].properties.provider + " ("+e.features[0].properties.asn + ")<br>" + | ||
| "IPv4 Prefix: " + e.features[0].properties.ipv4_prefix; | ||
| if (e.features[0].properties.ipv6_prefix != null ) { | ||
| description += "<br>IPv6 Prefix: " + e.features[0].properties.ipv6_prefix; | ||
| } | ||
|
|
||
| while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { | ||
| coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; | ||
| } | ||
| pointPopup.setLngLat(coordinates).setHTML(description).addTo(map); | ||
| }); | ||
|
|
||
| map.on('mouseenter','clusters', function (e) { | ||
| map.getCanvas().style.cursor = 'pointer'; | ||
| }); | ||
| map.on('mouseleave','clusters', function () { | ||
| map.getCanvas().style.cursor = ''; | ||
| }); | ||
| map.on('mouseenter','unclustered-point', function (e) { | ||
| map.getCanvas().style.cursor = 'pointer'; | ||
| }); | ||
| map.on('mouseleave','unclustered-point', function () { | ||
| map.getCanvas().style.cursor = ''; | ||
| }); | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| div.pod-popup { | ||
| width: 175px; | ||
| display: block; | ||
| float: left; | ||
| padding: 5px; | ||
|
|
||
| } | ||
| .cluster-popup { | ||
| width: 400px; | ||
| } | ||
| .cluster-popup div.mapboxgl-popup-content { | ||
|
|
||
| } | ||
| div.mapboxgl-popup-content { | ||
| max-width: 400px; | ||
| max-height: 200px; | ||
| overflow-y: scroll; | ||
| overflow-x: scroll; | ||
| background: rgba(255,255,255,0.85); | ||
| border-radius: 10px; | ||
| color: black; | ||
| } | ||
| div.mapboxgl-popup-content h4 { | ||
| font-weight: bold; | ||
| font-size: 1.2em; | ||
| color: black; | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.