Latest Contributions by TylerWaring

Greetings,  I'm working on a labeling tool that allows the user to set the font family, size, weight variant and style of label before adding it to the map as a graphic's text Symbol. I can set every one of those properties except for the font family. The font family for thegraphic is always set  to "'Helvetica Neue',Helvetica,Arial,sans-serif" no matter what value I put into the "font.setFamily()" method. I have a couple of questions. First where is an authoritative list of fonts values that can be passed to the "font.setFamily()" method. Next, once you have those values, how do you get a graphic's text symbol to display those fonts? I'm assigning the properties of my font like this:   let font = new Font(); font.setVariant(Font.VARIANT_NORMAL); font.setWeight(Font["WEIGHT_BOLDER"]); font.setFamily("impact"); font.setStyle(Font["STYLE_OBLIQUE"]); font.setSize(20); let textSymbol = new TextSymbol(notes, font, color); let textJSON = textSymbol.toJson(); let labelg = new Graphic(graphic.geometry, textSymbol, graphic.attributes); console.log(labelg.symbol.toJson()); layer.add(labelg);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ When I check out the console.log of labelg.symbol.toJson() at this point I get : {size: 15, style: "oblique", weight: "bolder", family: "impact"} . Except for the font size being 15 rather than 20, this is pretty much what I expect. However, when the graphic loads, it is clearly not impact. Upon right clicking on the label in the map and selecting the 'Inspect' menu option to see the HTML of the label in the developer console I see the folowing: <text fill="rgb(0, 0, 0)" fill-opacity="1" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="196" y="394" text-anchor="middle" text-decoration="undefined" rotate="0" kerning="auto" text-rendering="optimizeLegibility" font-style="oblique" font-variant="normal" font-weight="bolder" font-size="20" font-family="impact,Arial" dominant-baseline="alphabetic" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)" fill-rule="evenodd"> <tspan dy="0" x="196" letter-spacing="1px" font-family="'Helvetica Neue',Helvetica,Arial,sans-serif"> Courier New, 20, B, I </tspan> </text>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ The 'font-family' property in the text element is set to 'impact,Arial', however it appears to me that the tspan element is the element that actually styles the font in the map. The tspan element's font-family is set to "'Helvetica Neue',Helvetica,Arial,sans-serif". If I change the tspan's font-family property to 'impact' in the developer console then the font family displays correctly in the map. How do I get the tspan's font-family set correctly using the JavaScript API? Thanks, Tyler ... View more

Greetings,  I've written a react application that requires a SceneView.  About every 20th refresh the application maxes out my memory and crashes. I can write the whole application with a MapView instead and everything is fine. I also get an error each time I load the SceneView: [esri.core.Accessor] Accessor#set Assigning an instance of 'esri.views.ui.DefaultUI' which is not a subclass of 'esri.views.ui.3d.DefaultUI3D' Does this error have anythign to do with the memory being maxed out every so often?  The code I'm working with is :  import React, { Component} from 'react' import EsriLoaderReact from 'esri-loader-react' import MapOverlayPanel from '../../molecules/MapOverlayPanel/MapOverlayPanel' import './ESRIScene.css' class ESRIScene extends Component { constructor(props){ super(props) this.state = { SceneView: null , searchResultGL:null } this.loadMap = this.loadMap.bind(this); } loadMap = ({loadedModules: [WebScene, SceneView, Locate, GraphicsLayer, DefaultUI], containerNode}) => { const self = this let map = new WebScene({ portalItem: { // autocasts as new PortalItem() id: "a4d990eaeea64f62809e74f0d83a4ee2" } }) new SceneView({ container: containerNode ,id:'sv' , map: map , ui: new DefaultUI() , camera: { position: { x: -117.185087, y: 32.715736, z: 300, spatialReference: { wkid: 4326 } }, heading: 90, tilt: 77.5 } }) .when(function(view){ self.setState({SceneView: view}) view.ui.padding = { top: 96, left: 21, right: 21, bottom: 0 } if (window.matchMedia("(min-width: 770px)").matches) { view.ui.components=["zoom", "navigation-toggle", "compass"]; } view.on('click', function(e){ console.log('thi click has arrived: ' + JSON.stringify(e.mapPoint)); }) let searchResultGL = new GraphicsLayer() self.setState({searchResultGL:searchResultGL}); view.map.add(searchResultGL) }) } render() { const options = { url: 'https://js.arcgis.com/4.10/' }; return ( <div className="ESRIScene"> <EsriLoaderReact options={options} modulesToLoad={['esri/WebScene', 'esri/views/SceneView', 'esri/widgets/Locate', 'esri/layers/GraphicsLayer', 'esri/views/ui/DefaultUI']} onReady={this.loadMap} /> <MapOverlayPanel ref ='mapOverlay' sceneView={this.state.SceneView} searchResultGL={this.state.searchResultGL} resultPinDragable={true} /> </div> ); } } export default ESRIScene;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Any words of wisdom will be greatly appreciated.  Thanks,  Tyler  ... View more