Sample reactive Leaflet code for Zeppelin

reactive_map.js

<!-- place this in an %angular paragraph -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />
<div id="map" style="height: 800px; 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', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
        maxZoom: 12,
        minZoom: 3
    }).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(); -- if you want to only show new data clear the layer first
            angular.forEach(newValue, function(tweet) {
                var marker = L.marker([ tweet.loc.lat, tweet.loc.lon ])
                  .bindPopup(tweet.user + ": " + tweet.tweet)
                  .addTo(geoMarkers);
            });
        })
    });
}

if (window.locationWatcher) {
    // clear existing watcher otherwise we'll have duplicates
    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>

spark_streaming.scala

// place this in a Spark paragraph
import org.apache.spark.streaming._
import org.apache.spark.streaming.scheduler.StreamingListener
import org.apache.spark.streaming.scheduler.StreamingListenerBatchCompleted
import org.apache.spark.streaming.twitter._

case class Loc(lat: Double, lon: Double)

case class Tweet(timestamp: java.util.Date, user: String, tweet: String, loc: Loc)

val ssc = new StreamingContext(sc, Seconds(2))

val input = TwitterUtils.createStream(ssc, None)

input.foreachRDD(rdd => {
    val df = rdd
      .filter(_.getGeoLocation() != null)
      .map(s => Tweet(
          s.getCreatedAt,
          s.getUser.getName,
          s.getText,
          Loc(s.getGeoLocation.getLatitude, s.getGeoLocation.getLongitude)))
    
    var items = df.collect
    
    z.angularBind("locations", items) // this is what sends the data to the frontend
})

ssc.start()

Super dope- thanks!

Awesome!

Thanks for this, I was able to get d3.js working in zeppelin based on this approach

How would you feed the data from zeppelin to the plotChart function?

I think above code to be updated, doesnt wotk now with following error.
error: object twitter is not a member of package org.apache.spark.streaming import org.apache.spark.streaming.twitter._

Great work! I followed this pattern for a project recently. One alternative you might consider is using getScript() from jquery to lead leaflet.

if (!window.L) { 
    // leaflet (L) hasn't loaded, so load it
    $.getScript('https://unpkg.com/leaflet@1.0.3/dist/leaflet.js', initMap;
} else {
    // leaflet is already loaded, so initialize the map
    initMap();
}

WOW, great work!

oh, similarly as @sameerast mentioned: twitter isn't available at EMR Zeppelin as for now :-/
but the map is atleast shown, it would be nice to get an idea how to place markers on a map now and how to show some custome routes :)