Using voila with the C++ kernel and interactive widgets


In [ ]:
#include <iostream>
#include <string>

#include "xwidgets/xoutput.hpp"

#include "xleaflet/xmap.hpp"
#include "xleaflet/xdraw_control.hpp"
#include "xleaflet/xbasemaps.hpp"

namespace nl = nlohmann;

In [ ]:
// Create map widget
auto water_color = xlf::basemap({"OpenStreetMap", "France"});

auto map = xlf::map_generator()
    .layers({water_color})
    .center({47, 363})
    .zoom(5)
    .finalize();

map

In [ ]:
// Create output widget to log draw events
xw::output out;
out

In [ ]:
// Options for the draw control
nl::json polyline_options = {
    {"shapeOptions", {
        {"color", "#6bc2e5"},
        {"weight", 8},
        {"opacity", 1.0}
    }}
};

nl::json polygon_options = {
    {"shapeOptions", {
        {"fillColor", "#6be5c3"},
        {"color", "#6be5c3"},
        {"fillOpacity", 1.0}
    }},
    {"drawError", {
        {"color", "#dd253b"},
        {"message", "Oups!"}
    }},
    {"allowIntersection", false}
};

nl::json circle_options = {
    {"shapeOptions", {
        {"fillColor", "#efed69"},
        {"fillOpacity", 1.0},
        {"color", "#efed69"}
    }}
};

nl::json rectangle_options = {
    {"shapeOptions", {
        {"fillColor", "#fca45d"},
        {"fillOpacity", 1.0},
        {"color", "#fca45d"}
    }}
};

In [ ]:
// Log last action
void print_draw_event(std::string action, xeus::xjson geo_json)
{
    // Capturing the stdout with the output widget 
    auto guard = out.guard();
    std::cout << action << " a " 
        << geo_json["geometry"]["type"]
        << std::endl;
}

In [ ]:
// Add the draw control and event logger
auto draw_control = xlf::draw_control_generator()
    .polyline(polyline_options)
    .polygon(polygon_options)
    .circle(circle_options)
    .rectangle(rectangle_options)
    .finalize();

draw_control.on_draw(print_draw_event);
map.add_control(draw_control);

In [ ]: