GeoDrawer Custom Controllers Demo

Home | See the basic example | See the advanced example

This is a more advanced example.

Almost every controller of the library can be customized, in order to increase the field of applicability of the library. Maybe you have to use it in an already developed interface, so you can use your own controllers and all the events are binded automatically.

With a bit of bootstrap, FontAwesome and friends, you can build your preferred interface.

In this example I've used bootstrap 4-dev along with a custom jQuery version (the library will use that one).

js code:

var cb = function () {
    var mymap = new geodrawer.Map('#map-canvas', {
        tools: {
            point: {
                options: {
                    maxItemsAllowed: 5
                },
                ctrl: '#point-ctrl'
            },
            circle: {
              ctrl: '#circle-ctrl'
            }
        },
        clearMapCtrl: '#clear-ctrl',
        exportMapCtrl: '#export-ctrl',
        exportMapCb: function (data) {
          alert('data: ' + JSON.stringify(data));
        },
        tipsMapCtrl: '#tips-ctrl',
    });
    mymap.render();
}

geodrawer.ready(cb);
        

css code:

To manage the active state of the tools controllers

.geodrawer-selected {
  background: red !important;
}