{"id":401152,"date":"2019-01-11T04:54:00","date_gmt":"2019-01-11T12:54:00","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=401152"},"modified":"2020-01-29T01:44:14","modified_gmt":"2020-01-29T09:44:14","slug":"sketch-your-city-with-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript","title":{"rendered":"Sketch your city with ArcGIS API for JavaScript"},"author":7011,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[25781,26451,549072],"industry":[],"product":[36831],"class_list":["post-401152","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-3d","tag-cartography","tag-esrirdzurich","product-js-api-arcgis"],"acf":{"short_description":"Learn how to create an interactive 3D city sketch with ArcGIS API for JavaScript.","flexible_content":[{"acf_fc_layout":"content","content":"

When I say that I am a cartographer some people ask me if I draw the maps. Just for fun I reply that I do, but I actually only create web maps…so no pen and paper\/drawing pad involved. However, lately I stretched the art in cartography and I tried to recreate the look and feel of an old 3D city sketch (with ArcGIS API for JavaScript<\/a> though!). Have a look below at the result, looks like hand-drawn, right? Click on the image to open the interactive 3D web scene where you can move around, zoom and tilt!<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":405002,"id":405002,"title":"new-developments","filename":"new-developments.png","filesize":1700816,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/new-developments.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\/new-developments","alt":"","author":"7011","description":"","caption":"","name":"new-developments","status":"inherit","uploaded_to":401152,"date":"2019-01-10 09:08:17","modified":"2019-01-10 09:08:17","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1427,"height":672,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/new-developments-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/new-developments-300x141.png","medium-width":300,"medium-height":141,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/new-developments-768x362.png","medium_large-width":768,"medium_large-height":362,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/new-developments-1024x482.png","large-width":1024,"large-height":482,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/new-developments.png","1536x1536-width":1427,"1536x1536-height":672,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/new-developments.png","2048x2048-width":1427,"2048x2048-height":672,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/new-developments-826x389.png","card_image-width":826,"card_image-height":389,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/new-developments.png","wide_image-width":1427,"wide_image-height":672}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/JSAPI_demos\/sketch-the-city\/index.html?id=6e0c71260845493ea65b56cc8a3ca5d5"},{"acf_fc_layout":"content","content":"

In this blog post I’ll show you how you can load and visualize your own city with this sketch style (no JavaScript involved) and how I built the app (some JavaScript involved).<\/p>\n"},{"acf_fc_layout":"content","content":"

So how can you sketch your city?<\/h2>\n

If you don’t have a 3D model of your city, search the Living Atlas<\/a> for existing web scenes<\/a> of cities. Get the item id<\/code> of the web scene and load the application with the id<\/code> as a url parameter. For example, if you want to view a web scene with the id<\/code> of 9eea926653b84bc093760d4b08d84190<\/code> then load the application like this: https:\/\/ralucanicola.github.io\/JSAPI_demos\/sketch-the-city\/index.html?id=9eea926653b84bc093760d4b08d84190<\/a>. If you don’t find a web scene of your city in the Living Atlas, try to see if your city has an open data portal where they published a 3D model of the buildings.<\/p>\n

If you have a 3D model of the buildings publish it as a scene layer to ArcGIS Online. Have a look at this awesome blog post by Russ<\/a> on how to publish scene layers in ArcGIS Online<\/a>. Once your scene layer is up and running, go to SceneViewer<\/a> and create a web scene containing the scene layer. Here’s a short tutorial on how to create a web scene with SceneViewer<\/a>. Tip: add some slides to your web scene to mark the points of interest in your city. They will show up like this:<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":405162,"id":405162,"title":"slides","filename":"slides.png","filesize":265226,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/slides.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\/slides","alt":"","author":"7011","description":"","caption":"","name":"slides","status":"inherit","uploaded_to":401152,"date":"2019-01-10 11:14:23","modified":"2019-01-10 11:14:23","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1268,"height":152,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/slides-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/slides-300x36.png","medium-width":300,"medium-height":36,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/slides-768x92.png","medium_large-width":768,"medium_large-height":92,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/slides-1024x123.png","large-width":1024,"large-height":123,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/slides.png","1536x1536-width":1268,"1536x1536-height":152,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/slides.png","2048x2048-width":1268,"2048x2048-height":152,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/slides-826x99.png","card_image-width":826,"card_image-height":99,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/slides.png","wide_image-width":1268,"wide_image-height":152}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Once you save the web scene, use the web scene item id<\/code> as a url parameter: https:\/\/ralucanicola.github.io\/JSAPI_demos\/sketch-the-city\/index.html?id=your_webscene_id<\/code>.<\/p>\n"},{"acf_fc_layout":"content","content":"

I’d love to see what the 3D sketch of your city looks like, so just post an image or a link on Twitter<\/a> \ud83d\ude42<\/p>\n

Here are some screenshots of cities that I visualized with the Sketch the city<\/a> app:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":405222,"id":405222,"title":"san-francisco","filename":"san-francisco.png","filesize":1760344,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/san-francisco.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\/san-francisco","alt":"","author":"7011","description":"","caption":"Golden Gate, San Francisco","name":"san-francisco","status":"inherit","uploaded_to":401152,"date":"2019-01-10 12:50:14","modified":"2019-01-10 12:52:24","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1393,"height":776,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/san-francisco-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/san-francisco-300x167.png","medium-width":300,"medium-height":167,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/san-francisco-768x428.png","medium_large-width":768,"medium_large-height":428,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/san-francisco-1024x570.png","large-width":1024,"large-height":570,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/san-francisco.png","1536x1536-width":1393,"1536x1536-height":776,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/san-francisco.png","2048x2048-width":1393,"2048x2048-height":776,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/san-francisco-826x460.png","card_image-width":826,"card_image-height":460,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/san-francisco.png","wide_image-width":1393,"wide_image-height":776}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/JSAPI_demos\/sketch-the-city\/index.html?id=8cc1826ea7b448da9b1ca2aa9946e056"},{"acf_fc_layout":"image","image":{"ID":405212,"id":405212,"title":"paris","filename":"paris.png","filesize":1742391,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/paris.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\/paris","alt":"","author":"7011","description":"","caption":"Arc de Triomphe and Eiffel Tower, Paris","name":"paris","status":"inherit","uploaded_to":401152,"date":"2019-01-10 12:50:05","modified":"2019-01-10 12:51:20","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1389,"height":776,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/paris-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/paris-300x168.png","medium-width":300,"medium-height":168,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/paris-768x429.png","medium_large-width":768,"medium_large-height":429,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/paris-1024x572.png","large-width":1024,"large-height":572,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/paris.png","1536x1536-width":1389,"1536x1536-height":776,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/paris.png","2048x2048-width":1389,"2048x2048-height":776,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/paris-826x461.png","card_image-width":826,"card_image-height":461,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/paris.png","wide_image-width":1389,"wide_image-height":776}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/JSAPI_demos\/sketch-the-city\/index.html?id=52b69ab1909d4f60801e9131555e8926"},{"acf_fc_layout":"image","image":{"ID":405252,"id":405252,"title":"empire-state-building","filename":"empire-state-building.png","filesize":1890484,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/empire-state-building.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\/empire-state-building","alt":"","author":"7011","description":"","caption":"Empire State Building, New York","name":"empire-state-building","status":"inherit","uploaded_to":401152,"date":"2019-01-10 13:21:44","modified":"2019-01-10 13:22:15","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1393,"height":772,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/empire-state-building-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/empire-state-building-300x166.png","medium-width":300,"medium-height":166,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/empire-state-building-768x426.png","medium_large-width":768,"medium_large-height":426,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/empire-state-building-1024x568.png","large-width":1024,"large-height":568,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/empire-state-building.png","1536x1536-width":1393,"1536x1536-height":772,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/empire-state-building.png","2048x2048-width":1393,"2048x2048-height":772,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/empire-state-building-826x458.png","card_image-width":826,"card_image-height":458,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/empire-state-building.png","wide_image-width":1393,"wide_image-height":772}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/JSAPI_demos\/sketch-the-city\/index.html?id=9eea926653b84bc093760d4b08d84190"},{"acf_fc_layout":"image","image":{"ID":405192,"id":405192,"title":"berlin","filename":"berlin.png","filesize":1638313,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/berlin.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\/berlin","alt":"","author":"7011","description":"","caption":"Berlin Palace and Alexanderplatz, Berlin","name":"berlin","status":"inherit","uploaded_to":401152,"date":"2019-01-10 12:49:48","modified":"2019-01-10 12:53:42","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1390,"height":749,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/berlin-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/berlin-300x162.png","medium-width":300,"medium-height":162,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/berlin-768x414.png","medium_large-width":768,"medium_large-height":414,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/berlin-1024x552.png","large-width":1024,"large-height":552,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/berlin.png","1536x1536-width":1390,"1536x1536-height":749,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/berlin.png","2048x2048-width":1390,"2048x2048-height":749,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/berlin-826x445.png","card_image-width":826,"card_image-height":445,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/berlin.png","wide_image-width":1390,"wide_image-height":749}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/JSAPI_demos\/sketch-the-city\/index.html?id=fa3ac1d65f174050ad31009feaaa9974"},{"acf_fc_layout":"content","content":"

How can you create this visualization?<\/h2>\n

Here are the 3 steps I needed to create the old canvas style:<\/p>\n

> Set a renderer with sketch edges on the SceneLayer<\/p>\n

The SceneLayers<\/a> are drawn with sketch edges<\/a> and semi-transparent white faces. This is the renderer<\/a> that I apply to each SceneLayer<\/a> in the WebScene<\/a>:<\/p>\n

layer.renderer = {\r\n   type: \"simple\"<\/span>, \/\/ autocasts as new SimpleRenderer()<\/span>\r\n   symbol: {\r\n     type: \"mesh-3d\"<\/span>,\r\n     symbolLayers: [{\r\n       type: \"fill\"<\/span>,\r\n       material: {\r\n         color: [255<\/span>, 255<\/span>, 255<\/span>, 0.1<\/span>],\r\n         \/\/ if buildings are textured, don't display the textures<\/span>\r\n         colorMixMode: \"replace\"<\/span>\r\n       },\r\n       \/\/ set dark sketch edges<\/span>\r\n       edges: {\r\n         type: \"sketch\"<\/span>,\r\n         color: [0<\/span>, 0<\/span>, 0<\/span>, 0.8<\/span>],\r\n         size: 1<\/span>,\r\n         extensionLength: 2<\/span>\r\n       }\r\n     }]\r\n   }\r\n };<\/code><\/pre>\n
> Set a background image<\/p>\n
body<\/span> {\r\n\u00a0\u00a0background-image<\/span>: url('.\/background-pencil.jpg'<\/span>);\r\n\u00a0\u00a0background-size<\/span>: cover;\r\n}\r\n<\/code><\/pre>\n
>Set a transparent background on the SceneView<\/p>\n
const<\/span> view = new<\/span> SceneView({\r\n  container: \"viewDiv\"<\/span>,\r\n  map: webscene,\r\n  alphaCompositingEnabled: true<\/span>,\r\n  environment: {\r\n    background: {\r\n      type: \"color\"<\/span>,\r\n      color: [0<\/span>, 0<\/span>, 0<\/span>, 0<\/span>]\r\n    },\r\n    starsEnabled: false<\/span>,\r\n    atmosphereEnabled: false<\/span>\r\n  },\r\n  ui: {\r\n    components: [\"attribution\"<\/span>]\r\n  }\r\n});\r\n<\/code><\/pre>\n
And this was the main gist of the app.<\/p>\n
Have fun 3D sketching!<\/p>\n"}],"authors":[{"ID":7011,"user_firstname":"Raluca","user_lastname":"Nicola","nickname":"Raluca Nicola","user_nicename":"raluca_zurich","display_name":"Raluca Nicola","user_email":"RNicola@esri.com","user_url":"https:\/\/raluca-nicola.net\/","user_registered":"2018-03-02 00:19:07","user_description":"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.","user_avatar":""}],"related_articles":[{"ID":267652,"post_author":"7011","post_date":"2018-07-12 08:39:02","post_date_gmt":"2018-07-12 15:39:02","post_content":"","post_title":"City visualizations on the edge with ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"city-visualizations-on-the-edge-with-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2021-04-19 09:19:22","post_modified_gmt":"2021-04-19 16:19:22","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=267652","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":335612,"post_author":"6601","post_date":"2018-10-29 09:00:36","post_date_gmt":"2018-10-29 16:00:36","post_content":"","post_title":"Edge styles in urban environments","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"edge-styles-in-urban-environments","to_ping":"","pinged":"","post_modified":"2021-04-19 09:25:13","post_modified_gmt":"2021-04-19 16:25:13","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=335612","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/card3.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/NYC_Banner.jpg"},"yoast_head":"\nSketch your city with ArcGIS API for JavaScript<\/title>\n<meta name=\"description\" content=\"Learn how to create an interactive 3D city sketch with ArcGIS API for JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sketch your city with ArcGIS API for JavaScript\" \/>\n<meta property=\"og:description\" content=\"Learn how to create an interactive 3D city sketch with ArcGIS API for JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-29T09:44:14+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\"},\"author\":{\"name\":\"Raluca Nicola\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4\"},\"headline\":\"Sketch your city with ArcGIS API for JavaScript\",\"datePublished\":\"2019-01-11T12:54:00+00:00\",\"dateModified\":\"2020-01-29T09:44:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D\",\"cartography\",\"EsriRDZurich\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\",\"name\":\"Sketch your city with ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-01-11T12:54:00+00:00\",\"dateModified\":\"2020-01-29T09:44:14+00:00\",\"description\":\"Learn how to create an interactive 3D city sketch with ArcGIS API for JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sketch your city with ArcGIS API for JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4\",\"name\":\"Raluca Nicola\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg\",\"caption\":\"Raluca Nicola\"},\"description\":\"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.\",\"sameAs\":[\"https:\/\/raluca-nicola.net\/\",\"https:\/\/www.linkedin.com\/in\/raluca-nicola-cartography\/\",\"https:\/\/x.com\/nicolaraluk\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Sketch your city with ArcGIS API for JavaScript","description":"Learn how to create an interactive 3D city sketch with ArcGIS API for JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"Sketch your city with ArcGIS API for JavaScript","og_description":"Learn how to create an interactive 3D city sketch with ArcGIS API for JavaScript.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2020-01-29T09:44:14+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript"},"author":{"name":"Raluca Nicola","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4"},"headline":"Sketch your city with ArcGIS API for JavaScript","datePublished":"2019-01-11T12:54:00+00:00","dateModified":"2020-01-29T09:44:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript"},"wordCount":8,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D","cartography","EsriRDZurich"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript","name":"Sketch your city with ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-01-11T12:54:00+00:00","dateModified":"2020-01-29T09:44:14+00:00","description":"Learn how to create an interactive 3D city sketch with ArcGIS API for JavaScript.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/sketch-your-city-with-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Sketch your city with ArcGIS API for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4","name":"Raluca Nicola","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg","caption":"Raluca Nicola"},"description":"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.","sameAs":["https:\/\/raluca-nicola.net\/","https:\/\/www.linkedin.com\/in\/raluca-nicola-cartography\/","https:\/\/x.com\/nicolaraluk"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich"}]}},"text_date":"January 11, 2019","author_name":"Raluca Nicola","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/01\/NYC_Banner.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":25781,"name":"3D","slug":"3d","term_group":0,"term_taxonomy_id":25781,"taxonomy":"post_tag","description":"","parent":0,"count":342,"filter":"raw"},{"term_id":26451,"name":"cartography","slug":"cartography","term_group":0,"term_taxonomy_id":26451,"taxonomy":"post_tag","description":"","parent":0,"count":558,"filter":"raw"},{"term_id":549072,"name":"EsriRDZurich","slug":"esrirdzurich","term_group":0,"term_taxonomy_id":549072,"taxonomy":"post_tag","description":"","parent":0,"count":96,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2689,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":362,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/401152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7011"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=401152"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/401152\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=401152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=401152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=401152"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=401152"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=401152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you’re curious check out the application code on Github<\/a>. Otherwise just play around with Sketch the city<\/a> app.<\/p>\n
I want to make the background<\/a> of the SceneView<\/a> transparent so that the background image that I’ve just set shows up. For that I disabled the atmosphere and the stars and I’ve set the background transparency to 0<\/code>.alphaCompositingEnabled<\/a><\/code> should be also set to true<\/code> at initialization time:<\/p>\n
I’ve set a background image with the texture of an old paper on the document body<\/code>. With a SceneView<\/a> with a transparent background, it will look like the buildings are drawn on the old canvas.
\nSetting the following CSS on the body makes the image cover the whole area of the body displayed on the screen:<\/p>\n