Does anyone have a sample of using the current map scale to change the font size on a labelLayer? All my maps are state-wide, which requires a small font size. Once you zoom in a bit, the font ends up too small.
I can envision how to do this, but I hoped that someone already had some code written that they were satisfied with the results.
Solved! Go to Solution.
I'm surprised there was no one who has played with this, but I couldn't find very many examples at all with scaleDependentRenderers, especially for labelLayer. It took some fiddling, but I came up with something that was satisfactory for my purposes. Hopefully this will benefit someone else.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.14/esri/css/esri.css"> <style type="text/css"> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script type="text/javascript" src="//js.arcgis.com/3.14/"></script> <script type="text/javascript" > var map; require([ "dojo/on", "dojo/dom", "esri/map", "esri/dijit/Scalebar", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/FeatureLayer", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/TextSymbol", "esri/renderers/SimpleRenderer", "esri/renderers/ScaleDependentRenderer", "esri/layers/LabelLayer", "esri/Color", "dojo/domReady!" ], function( on,dom,Map, Scalebar,Extent,SpatialReference, FeatureLayer, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, SimpleRenderer,ScaleDependentRenderer, LabelLayer, Color ) { map = new Map("map", { center: [-92.593, 38.5], zoom: 7, basemap:'gray' }); var labelField = "STATE_NAME"; // create a renderer for the states layer to override default symbology var statesColor = new Color("#666"); var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5); var statesSymbol = new SimpleFillSymbol("solid", statesLine, null); var statesRenderer = new SimpleRenderer(statesSymbol); // create a feature layer to show country boundaries var statesUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"; var states = new FeatureLayer(statesUrl, { id: "states", outFields: [labelField] }); states.setRenderer(statesRenderer); map.addLayer(states); // create a text symbol to define the style of labels var statesLabel = new TextSymbol().setColor(statesColor); statesLabel.font.setSize("14pt"); statesLabel.font.setFamily("arial"); var statesLabelRenderer = new SimpleRenderer(statesLabel); var labels = new LabelLayer({ id: "labels" }); // tell the label layer to label the states feature layer // using the field named "STATE_NAME" labels.addFeatureLayer(states, statesLabelRenderer, "{" + labelField + "}"); // add the label layer to the map map.addLayer(labels); var greenLine = new SimpleLineSymbol("solid", new Color("#00ff45"), 1); var countyUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3"; var counties = new FeatureLayer(countyUrl, { id:"counties", outFields: ["NAME"] }); var countyRenderer = new SimpleRenderer(greenLine); counties.setRenderer(countyRenderer); map.addLayer(counties); var countyTextColor = new Color("#000000"); var countySymbolSm = new TextSymbol(); countySymbolSm.font.setSize("6pt"); countySymbolSm.setColor(countyTextColor); countySymbolSm.font.setFamily("arial"); var countySmRenderer = new SimpleRenderer(countySymbolSm); var countySymbolMed = new TextSymbol(); countySymbolMed.font.setSize("11pt"); countySymbolMed.font.setFamily("arial"); countySymbolMed.setColor(countyTextColor); var countyMedRenderer = new SimpleRenderer(countySymbolMed); var countySymbolLg = new TextSymbol(); countySymbolLg.font.setSize("16pt"); countySymbolLg.font.setFamily("arial"); countySymbolLg.setColor(countyTextColor); var countyLgRenderer = new SimpleRenderer(countySymbolLg); var countyScaleDependent = new ScaleDependentRenderer({ rendererInfos: [{ renderer: countySmRenderer, minZoom: 7, maxZoom: 7 }, { renderer: countyMedRenderer, minZoom: 8, maxZoom: 10 }, { renderer: countyLgRenderer, minZoom: 11, maxZoom: 15 }] }); var coLabels = new LabelLayer({id:"coLabels", minScale:5000000}); coLabels.addFeatureLayer(counties,countyScaleDependent,"{NAME}") map.addLayer(coLabels); on (map,'extent-change', function (evt){ dom.byId('mapInfo').innerHTML= "lods: " + map.getLevel()+ ", scale:" + map.getScale(); }); }); </script> </head> <body> <div id="mapInfo"></div> <div id="map"></div> </body> </html>
I'm surprised there was no one who has played with this, but I couldn't find very many examples at all with scaleDependentRenderers, especially for labelLayer. It took some fiddling, but I came up with something that was satisfactory for my purposes. Hopefully this will benefit someone else.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.14/esri/css/esri.css"> <style type="text/css"> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script type="text/javascript" src="//js.arcgis.com/3.14/"></script> <script type="text/javascript" > var map; require([ "dojo/on", "dojo/dom", "esri/map", "esri/dijit/Scalebar", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/FeatureLayer", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/TextSymbol", "esri/renderers/SimpleRenderer", "esri/renderers/ScaleDependentRenderer", "esri/layers/LabelLayer", "esri/Color", "dojo/domReady!" ], function( on,dom,Map, Scalebar,Extent,SpatialReference, FeatureLayer, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, SimpleRenderer,ScaleDependentRenderer, LabelLayer, Color ) { map = new Map("map", { center: [-92.593, 38.5], zoom: 7, basemap:'gray' }); var labelField = "STATE_NAME"; // create a renderer for the states layer to override default symbology var statesColor = new Color("#666"); var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5); var statesSymbol = new SimpleFillSymbol("solid", statesLine, null); var statesRenderer = new SimpleRenderer(statesSymbol); // create a feature layer to show country boundaries var statesUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"; var states = new FeatureLayer(statesUrl, { id: "states", outFields: [labelField] }); states.setRenderer(statesRenderer); map.addLayer(states); // create a text symbol to define the style of labels var statesLabel = new TextSymbol().setColor(statesColor); statesLabel.font.setSize("14pt"); statesLabel.font.setFamily("arial"); var statesLabelRenderer = new SimpleRenderer(statesLabel); var labels = new LabelLayer({ id: "labels" }); // tell the label layer to label the states feature layer // using the field named "STATE_NAME" labels.addFeatureLayer(states, statesLabelRenderer, "{" + labelField + "}"); // add the label layer to the map map.addLayer(labels); var greenLine = new SimpleLineSymbol("solid", new Color("#00ff45"), 1); var countyUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3"; var counties = new FeatureLayer(countyUrl, { id:"counties", outFields: ["NAME"] }); var countyRenderer = new SimpleRenderer(greenLine); counties.setRenderer(countyRenderer); map.addLayer(counties); var countyTextColor = new Color("#000000"); var countySymbolSm = new TextSymbol(); countySymbolSm.font.setSize("6pt"); countySymbolSm.setColor(countyTextColor); countySymbolSm.font.setFamily("arial"); var countySmRenderer = new SimpleRenderer(countySymbolSm); var countySymbolMed = new TextSymbol(); countySymbolMed.font.setSize("11pt"); countySymbolMed.font.setFamily("arial"); countySymbolMed.setColor(countyTextColor); var countyMedRenderer = new SimpleRenderer(countySymbolMed); var countySymbolLg = new TextSymbol(); countySymbolLg.font.setSize("16pt"); countySymbolLg.font.setFamily("arial"); countySymbolLg.setColor(countyTextColor); var countyLgRenderer = new SimpleRenderer(countySymbolLg); var countyScaleDependent = new ScaleDependentRenderer({ rendererInfos: [{ renderer: countySmRenderer, minZoom: 7, maxZoom: 7 }, { renderer: countyMedRenderer, minZoom: 8, maxZoom: 10 }, { renderer: countyLgRenderer, minZoom: 11, maxZoom: 15 }] }); var coLabels = new LabelLayer({id:"coLabels", minScale:5000000}); coLabels.addFeatureLayer(counties,countyScaleDependent,"{NAME}") map.addLayer(coLabels); on (map,'extent-change', function (evt){ dom.byId('mapInfo').innerHTML= "lods: " + map.getLevel()+ ", scale:" + map.getScale(); }); }); </script> </head> <body> <div id="mapInfo"></div> <div id="map"></div> </body> </html>
Tracy,
I have worked with ScaleDependentRenderer, and this tutorial helped me and they have similar example, like you have come up with:
Labeling features client-side | Guide | ArcGIS API for JavaScript
Yes, that's the one I used. I thought the use of scales in the renderer was confusing, since I think in terms of levels, so I switched it.