require(["esri/map", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/renderers/ClassBreaksRenderer", "esri/renderers/jsonUtils", "dojo/domReady!"], function(Map, FeatureLayer, SimpleRenderer, ClassBreaksRenderer, jsonUtils) { 
    var map = new Map("esri-map", {
      center: [-122, 47.3],
      zoom: 8,
      basemap: "gray",
      smartNavigation: false
    });

    map.on('load', function() {
      map.disableScrollWheelZoom();
    });

    var layer = new FeatureLayer('https://services2.arcgis.com/1UvBaQ5y1ubjUPmd/arcgis/rest/services/River_Routes/FeatureServer/0', {
      mode: FeatureLayer.MODE_ONDEMAND,
      outFields: ['*']
    });

    map.addLayer(layer);

    layer.on('load', function() {
      
      var json = {
        type: 'simple',
        symbol: layer.renderer.toJson().symbol
      }

      malette = new Malette('esri-map', {
        style: json,
        formatIn: 'esri-json',
        formatOut: 'esri-json',
        type: 'line'
      });

      malette.on('style-change', function( style ){
        
        var rend = jsonUtils.fromJson(style);
        layer.setRenderer(rend);
        layer.redraw();

      });

    });

  });