Skip to content

Instantly share code, notes, and snippets.

@randerzander
Forked from granturing/reactive_map.js
Last active April 3, 2016 06:16
Show Gist options
  • Save randerzander/fb4a4ff1fcb84f9304b9 to your computer and use it in GitHub Desktop.
Save randerzander/fb4a4ff1fcb84f9304b9 to your computer and use it in GitHub Desktop.
Sample reactive Leaflet code for Zeppelin
%angular
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />
<div id="map" style="height: 500px; width: 100%"></div>
<script type="text/javascript">
function initMap() {
var map = L.map('map').setView([30.00, -30.00], 3);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var geoMarkers = L.layerGroup().addTo(map);
var el = angular.element($('#map').parent('.ng-scope'));
angular.element(el).ready(function() {
window.locationWatcher = el.scope().compiledScope.$watch('locations', function(newValue, oldValue) {
geoMarkers.clearLayers();
angular.forEach(newValue, function(event) {
if (event)
var marker = L.marker([event.values[1], event.values[2]]).bindPopup(event.values[0]).addTo(geoMarkers);
});
})
});
}
if (window.locationWatcher) { window.locationWatcher(); }
// ensure we only load the script once, seems to cause issues otherwise
if (window.L) {
initMap();
} else {
console.log('Loading Leaflet library');
var sc = document.createElement('script');
sc.type = 'text/javascript';
sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js';
sc.onload = initMap;
sc.onerror = function(err) { alert(err); }
document.getElementsByTagName('head')[0].appendChild(sc);
}
</script>
//Paste in empty note
val map_pings = sqlContext.sql("select concat('AP: ', ssid) as desc, lat, lng from hotspots")
z.angularBind("locations", map_pings.collect())
@randerzander
Copy link
Author

make sure your Zeppelin build includes this change

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment