AleksueiR/testSymbols-enhanced.html

## testSymbols-enhanced.html
<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>Test Page</title>
  <style>
    .layerTile {
      position: absolute;
    }
  </style>
</head>

<body>
  <div id='map' style='height:90%; width: 100%;'></div>
  <p id='mess' />
  <script src='dist/geoapi.min.js'></script>
  <script>
    geoapi('http://js.arcgis.com/3.14/', window).then(function (api) {
            // uniqueValue renderer
            var layer = new api.layer.FeatureLayer('http://maps-cartes.ec.gc.ca/ArcGIS/rest/services/Oilsands/MapServer/0');

            // simple renderer
            //var layer = new api.layer.FeatureLayer('http://maps-cartes.ec.gc.ca/ArcGIS/rest/services/E2MS_Atlantic_region_data/MapServer/0');

            // class breaks renderer
            //var layer = new api.layer.FeatureLayer('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/AssessorsValueAnalysis/MapServer/2');

            // sample pseudo function returning an icon for a specific feature
            function getLegendSymbol(feature, renderer) {

                var image = '_defaultImage_';

                switch (renderer.type) {
                        case 'simple':
                            image = renderer.symbol.imageData; // here you would run svg symbol generator if there is no image

                            break;

                        case 'uniqueValue':
                            var fieldArray = ['field1', 'field2', 'field3'];
                            var graphicKey = fieldArray
                                .map(field => (feature.attributes[renderer[field]] || '').toString())
                                .join('');

                            renderer.uniqueValueInfos.forEach(uvi => {
                                 if (uvi.value === graphicKey) {
                                     image = uvi.symbol.imageData;  // here you would run svg symbol generator if there is no image
                                 }
                            });
                            break;

                        case 'classBreaks':
                            var gVal = feature.attributes[renderer.field];

                            var lower = renderer.minValue;

                            if (gVal >= lower) {

                                // a trick to prime the first loop iteration
                                // the first low value is inclusive.  every other low value is exclusive.
                                // if we have entered this else bracket, we know we are not below the first lower limit.
                                // so we reduce lower by 1 to make the first exclusive test inclusive
                                var upper = lower - 1;

                                renderer.classBreakInfos.every(classBreak => {
                                    lower = upper;
                                    upper = classBreak.classMaxValue;
                                    if ((gVal > lower) && (gVal <= upper)) {
                                        image = classBreak.symbol; // .imageData; // here you would run svg symbol generator if there is no image
                                        return false; // break loop
                                    }
                                    return true; // keep looping
                                });
                            }
                            break;

                    }

                    return image;
            }

            layer.on('load', function(evt) {

                // a hacky way to get a renderer; render should be retrieved by esriBundle.esriRequest call
                var drawInfo = JSON.parse(layer._json).drawingInfo;
                var renderer = drawInfo.renderer;

                var fData = api.attribs.loadLayerAttribs(layer);

                fData.then(data => {
                    // loop through data and fetch symbol for each feature
                    data[data.indexes[0]].features.forEach(feature => {
                        var symbol = getLegendSymbol(feature, renderer);

                        console.log(symbol);
                        console.log(feature);

                  });
                }, error => {
                    console.warn(error);
                });
            });
        });
  </script>
  <img id="mine" width="32px" height="32px" border="1px" hspace="20" vspace="20" />
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset='utf-8'>
	<title>Test Page</title>
	<style>
	.layerTile {
	position: absolute;
	}
	</style>
	</head>

	<body>
	<div id='map' style='height:90%; width: 100%;'></div>
	<p id='mess' />
	<script src='dist/geoapi.min.js'></script>
	<script>
	geoapi('http://js.arcgis.com/3.14/', window).then(function (api) {
	// uniqueValue renderer
	var layer = new api.layer.FeatureLayer('http://maps-cartes.ec.gc.ca/ArcGIS/rest/services/Oilsands/MapServer/0');

	// simple renderer
	//var layer = new api.layer.FeatureLayer('http://maps-cartes.ec.gc.ca/ArcGIS/rest/services/E2MS_Atlantic_region_data/MapServer/0');

	// class breaks renderer
	//var layer = new api.layer.FeatureLayer('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/AssessorsValueAnalysis/MapServer/2');

	// sample pseudo function returning an icon for a specific feature
	function getLegendSymbol(feature, renderer) {

	var image = '_defaultImage_';

	switch (renderer.type) {
	case 'simple':
	image = renderer.symbol.imageData; // here you would run svg symbol generator if there is no image

	break;

	case 'uniqueValue':
	var fieldArray = ['field1', 'field2', 'field3'];
	var graphicKey = fieldArray
	.map(field => (feature.attributes[renderer[field]] \|\| '').toString())
	.join('');

	renderer.uniqueValueInfos.forEach(uvi => {
	if (uvi.value === graphicKey) {
	image = uvi.symbol.imageData; // here you would run svg symbol generator if there is no image
	}
	});
	break;

	case 'classBreaks':
	var gVal = feature.attributes[renderer.field];

	var lower = renderer.minValue;

	if (gVal >= lower) {

	// a trick to prime the first loop iteration
	// the first low value is inclusive. every other low value is exclusive.
	// if we have entered this else bracket, we know we are not below the first lower limit.
	// so we reduce lower by 1 to make the first exclusive test inclusive
	var upper = lower - 1;

	renderer.classBreakInfos.every(classBreak => {
	lower = upper;
	upper = classBreak.classMaxValue;
	if ((gVal > lower) && (gVal <= upper)) {
	image = classBreak.symbol; // .imageData; // here you would run svg symbol generator if there is no image
	return false; // break loop
	}
	return true; // keep looping
	});
	}
	break;

	}

	return image;
	}

	layer.on('load', function(evt) {

	// a hacky way to get a renderer; render should be retrieved by esriBundle.esriRequest call
	var drawInfo = JSON.parse(layer._json).drawingInfo;
	var renderer = drawInfo.renderer;

	var fData = api.attribs.loadLayerAttribs(layer);

	fData.then(data => {
	// loop through data and fetch symbol for each feature
	data[data.indexes[0]].features.forEach(feature => {
	var symbol = getLegendSymbol(feature, renderer);

	console.log(symbol);
	console.log(feature);

	});
	}, error => {
	console.warn(error);
	});
	});
	});
	</script>
	<img id="mine" width="32px" height="32px" border="1px" hspace="20" vspace="20" />
	</body>

	</html>