Map Options

Add custom options components (Flight or React) which display in the map options menu (next to Fit).

Tutorial

Web Plugin

Register the plugin, and component scripts. Then register a file reference to the geojson of countries.

app.registerJavaScript("/org/visallo/examples/map_options/plugin.js", true);
app.registerJavaScriptComponent("/org/visallo/examples/map_options/CountryBorders.jsx");
app.registerFile("/org/visallo/examples/map_options/countries.geojson", "application/vnd.geo+json");

Register Extension

Register the map options extension and point the path the the React component.

visallo.registry.registerExtension('org.visallo.map.options', {
    identifier: 'org-visallo-examples-map_options-countryborders',
    optionComponentPath: 'org/visallo/examples/map_options/CountryBorders'
});

Component

The react component manages the state of the geojson layer (visible/hidden) using a user preference, and uses the OpenLayers API to add/remove the vector layer.

define(['public/v1/api', 'react'], function(visalloApi, React) {
    const key = 'examples-geojson';
    const CountryBorders = React.createClass({
        getInitialState() {
            const visible = visalloData.currentUser.uiPreferences[key] === 'true'
            return { visible }
        },
        componentDidMount() {
            this.createCountryLayer();
        },
        render() {
            const { visible } = this.state;

            return (
                <label>
                    Toggle Country Borders
                    <input type="checkbox" checked={visible} onChange={this.onChange} />
                </label>
            )
        },
        onChange() {
            const { visible } = this.state;
            const newVal = !visible;

            if (visible) {
                this.props.map.removeLayer(this.layer);
            } else {
                this.props.map.addLayer(this.layer);
            }

            visalloData.currentUser.uiPreferences[key] = String(newVal);
            visalloApi.connect()
                .then(c => c.dataRequest('user', 'preference', key, newVal));

            this.setState({ visible: newVal })
        },
        createCountryLayer() {
            if (this.layer) return;
            var { ol, map, cluster } = this.props;
            var styleArray = [new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: 'red',
                width: 2
              })
            })];

            var vector = new ol.layer.Vector({
                source: new ol.source.Vector({
                  url: 'org/visallo/examples/map_options/countries.geojson',
                  format: new ol.format.GeoJSON()
                }),
                style: function(feature, resolution) {
                  return styleArray;
                }
              });

            if (this.state.visible) {
                map.addLayer(vector);
            }
            this.layer = vector;
        }
    });

    return CountryBorders;
});

results matching ""

    No results matching ""