{"id":307722,"date":"2018-08-30T10:26:28","date_gmt":"2018-08-30T17:26:28","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=307722"},"modified":"2018-08-30T10:55:38","modified_gmt":"2018-08-30T17:55:38","slug":"migrating-web-apps-from-google-to-arcgis-adding-a-shape","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape","title":{"rendered":"Migrating Web Apps from Google to ArcGIS: Adding a Shape"},"author":4271,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37101],"tags":[27491,214052],"industry":[],"product":[36831,36601],"class_list":["post-307722","blog","type-blog","status-publish","format-standard","hentry","category-announcements","tag-jsapi4","tag-migrate-from-google","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Fourth post in a series related to migrating Google Maps apps to the ArcGIS API for JavaScript","flexible_content":[{"acf_fc_layout":"content","content":"<p>This is the fourth post in a blog series covering the basic topics related to migrating your app built with the Google Maps JavaScript API to the\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/\">ArcGIS API for JavaScript<\/a>\u00a0(JavaScript API). The series covers the following topics:<\/p>\n<ul>\n<li><a href=\"http:\/\/esriurl.com\/fromgoogletoesrijs\" target=\"_blank\" rel=\"noopener\">Getting Started: Displaying a marker with a popup<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-directions-and-routing\/\">Getting directions and displaying a route<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-searching-and-geocoding\/\">Searching and Geocoding<\/a><\/li>\n<li>Adding a shape<\/li>\n<\/ul>\n<p>In this post, we\u2019ll do an overview on adding a shape to the map.<\/p>\n<p><strong>Getting started<\/strong><\/p>\n<p>To get started with ArcGIS, sign up for the\u00a0<a href=\"https:\/\/developers.arcgis.com\/sign-up\">ArcGIS Developer Program<\/a>\u00a0at no cost. This account will get you access to the JavaScript API, 1,000,000 basemaps and geosearch (e.g. interactive find and zoom) transactions per month, access to a wide selection of rich content and services hosted in ArcGIS Online, unlimited non-revenue generating apps deployed, and quite a bit more for free. More information can be found in the first\u00a0<a href=\"http:\/\/esriurl.com\/fromgoogletoesrijs\" target=\"_blank\" rel=\"noopener\">blog<\/a>\u00a0of this series.<\/p>\n<p><strong>Create a basic mapping app<\/strong><\/p>\n<p>Check out the\u00a0<a href=\"http:\/\/esriurl.com\/fromgoogletoesrijs\" target=\"_blank\" rel=\"noopener\">Getting Started blog<\/a>\u00a0for an overview on how to load the JavaScript API and create a map.<\/p>\n<p><strong>Adding a polyline<\/strong><\/p>\n<p>Shapes such as polylines, polygons, and circles are defined by their geometry and either a default symbol or custom symbol.\u00a0Optionally, you can assign attribute information to each shape and attach a popup that displays the attributes. In this overview, we will simply add a polyline to the map without attributes.<\/p>\n<p>To add a polyline to the map with Google you create an array of two or more latitude and longitude coordinates which define a series of line segments, or path, passing through each coordinate in the order they are listed. The polyline is then added to the map.<\/p>\n<pre><code style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> map = <span style=\"color: #333; font-weight: bold;\">new<\/span> google.maps.Map(<span style=\"color: #0086b3;\">document<\/span>.getElementById(<span style=\"color: #d14;\">'map'<\/span>), {\r\n  zoom: <span style=\"color: #008080;\">3<\/span>,\r\n  center: {lat: <span style=\"color: #008080;\">21.4691<\/span>, lng: -<span style=\"color: #008080;\">78.6569<\/span>}\r\n});\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> polylineCoordinates = [\r\n  {lat: <span style=\"color: #008080;\">25.774<\/span>, lng: -<span style=\"color: #008080;\">80.190<\/span>},\r\n  {lat: <span style=\"color: #008080;\">18.466<\/span>, lng: -<span style=\"color: #008080;\">66.118<\/span>},\r\n  {lat: <span style=\"color: #008080;\">32.321<\/span>, lng: -<span style=\"color: #008080;\">64.757<\/span>}\r\n\r\n];\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> polyline = <span style=\"color: #333; font-weight: bold;\">new<\/span> google.maps.Polyline({\r\n  path: polylineCoordinates\r\n});\r\n\r\npolyline.setMap(map);\r\n<\/code><\/pre>\n<p>To create a polyline in the ArcGIS API for JavaScript the pattern is similar. The geometry of a polyline consists of an array of two or more latitude and longitude coordinates which defines the polyline path. To display a polyline on the map, create a graphic with the polyline geometry, set a simple line symbol on the graphic, then add it to a graphics layer.<\/p>\n<pre><code style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\"><span style=\"color: #0086b3;\">require<\/span>([\r\n  <span style=\"color: #d14;\">\"esri\/Map\"<\/span>,\r\n  <span style=\"color: #d14;\">\"esri\/views\/MapView\"<\/span>,\r\n  <span style=\"color: #d14;\">\"esri\/layers\/GraphicsLayer\"<\/span>\r\n\r\n], <span style=\"color: #333; font-weight: bold;\">function<\/span>(\r\n  Map, MapView, GraphicsLayer\r\n) {\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> graphicsLayer = <span style=\"color: #333; font-weight: bold;\">new<\/span> GraphicsLayer();\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> map = <span style=\"color: #333; font-weight: bold;\">new<\/span> <span style=\"color: #0086b3;\">Map<\/span>({\r\n    basemap: <span style=\"color: #d14;\">\"streets-vector\"<\/span>,\r\n    layers: [graphicsLayer]\r\n  });\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> view = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n    center: {latitude: <span style=\"color: #008080;\">21.4691<\/span>, longitude: -<span style=\"color: #008080;\">78.6569<\/span>},\r\n    container: <span style=\"color: #d14;\">\"viewDiv\"<\/span>,\r\n    map: map,\r\n    zoom: <span style=\"color: #008080;\">3<\/span>\r\n  });\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> polylineGraphic = {\r\n    geometry: {\r\n      type: <span style=\"color: #d14;\">\"polyline\"<\/span>,\r\n      paths: [\r\n        [-<span style=\"color: #008080;\">80.190<\/span>, <span style=\"color: #008080;\">25.774<\/span>],\r\n        [-<span style=\"color: #008080;\">66.118<\/span>, <span style=\"color: #008080;\">18.466<\/span>],\r\n        [-<span style=\"color: #008080;\">64.757<\/span>, <span style=\"color: #008080;\">32.321<\/span>]]\r\n    },\r\n    symbol: {\r\n      type: <span style=\"color: #d14;\">\"simple-line\"<\/span>\r\n    }\r\n  };\r\n\r\n  graphicsLayer.add(polylineGraphic);\r\n});\r\n<\/code><\/pre>\n<p>For a step-by-step tutorial on creating a shape, assigning attributes, and attaching a popup, check out this <a href=\"https:\/\/developers.arcgis.com\/labs\/javascript\/display-point-line-and-polygon-graphics\/\">DevLab<\/a>.<\/p>\n<p><strong>Interactively draw a shape<\/strong><\/p>\n<p>An alternative to predefining a shape in code is to allow the end user to interactively draw a shape using the sketch tool. To do this, initialize an instance of the sketch tool and listen for the create-complete event. In your event handler, create a new graphic using the polyline geometry and add it to a graphics layer:<\/p>\n<pre><code style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\"><span style=\"color: #0086b3;\">require<\/span>([\r\n  <span style=\"color: #d14;\">\"esri\/views\/MapView\"<\/span>,\r\n  <span style=\"color: #d14;\">\"esri\/Map\"<\/span>,\r\n  <span style=\"color: #d14;\">\"esri\/widgets\/Sketch\/SketchViewModel\"<\/span>,\r\n  <span style=\"color: #d14;\">\"esri\/layers\/GraphicsLayer\"<\/span>,\r\n], <span style=\"color: #333; font-weight: bold;\">function<\/span>(\r\n  MapView, Map,\r\n  SketchViewModel, GraphicsLayer\r\n) {\r\n\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ GraphicsLayer to hold graphics created via sketch view model<\/span>\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> graphicsLayer = <span style=\"color: #333; font-weight: bold;\">new<\/span> GraphicsLayer();\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> map = <span style=\"color: #333; font-weight: bold;\">new<\/span> <span style=\"color: #0086b3;\">Map<\/span>({\r\n    basemap: <span style=\"color: #d14;\">\"streets-vector\"<\/span>,\r\n    layers: [graphicsLayer]\r\n  });\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> view = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n    container: <span style=\"color: #d14;\">\"viewDiv\"<\/span>,\r\n    map: map,\r\n    zoom: <span style=\"color: #008080;\">3<\/span>\r\n  });\r\n\r\n  view.when(<span style=\"color: #333; font-weight: bold;\">function<\/span>() {\r\n    <span style=\"color: #333; font-weight: bold;\">const<\/span> sketchViewModel = <span style=\"color: #333; font-weight: bold;\">new<\/span> SketchViewModel({\r\n      view: view,\r\n      layer: graphicsLayer\r\n    });\r\n\r\n    sketchViewModel.on(<span style=\"color: #d14;\">\"create-complete\"<\/span>, <span style=\"color: #333; font-weight: bold;\">function<\/span>(event){\r\n      graphicsLayer.add({\r\n        geometry: event.geometry,\r\n        symbol: sketchViewModel.graphic.symbol\r\n      });\r\n    });\r\n\r\n    sketchViewModel.create(<span style=\"color: #d14;\">\"polyline\"<\/span>);\r\n\r\n  });\r\n});\r\n<\/code><\/pre>\n<p>The sketch tool can be used to create a variety of geometry types. If you\u2019d like to see it in action, check out the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sketch-geometries\/index.html\">sketch temporary geometries<\/a> sample.<\/p>\n<p><strong>Next Steps &amp; more resources<\/strong><\/p>\n<p>There are a variety of resources for learning about the ArcGIS API for JavaScript and maximizing your productivity when building your web apps:<\/p>\n<ul>\n<li>Learn more about <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/intro-graphics\/index.html\">adding shapes on the map<\/a> and what you can do with the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Sketch-SketchViewModel.html\">Sketch tool<\/a>.<\/li>\n<li>Experiment with the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/playground\/index.html\">symbol playground<\/a> to interactively style symbols for the shapes you add to your map.\u00a0After designing a symbol, you can copy the code and paste it into your app.<\/li>\n<li>Explore hundreds of\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/index.html\">samples<\/a>\u00a0in a live sandbox for playing around with the code, a\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/index.html\">guide<\/a>\u00a0focused on key topics about developing with the API, and the\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/index.html\">API reference<\/a>.<\/li>\n<li>Try out some ArcGIS API for JavaScript\u00a0<a href=\"https:\/\/developers.arcgis.com\/labs\/browse\/?topic=any&amp;product=JavaScript\">DevLabs<\/a>, which are step by step tutorials for learning how to develop with the API.<\/li>\n<\/ul>\n"}],"authors":[{"ID":4271,"user_firstname":"Julie","user_lastname":"Powell","nickname":"Julie Powell","user_nicename":"julie-powell","display_name":"Julie Powell","user_email":"julie_powell@esri.com","user_url":"","user_registered":"2018-03-02 00:15:51","user_description":"Julie Powell is Principal Product Manager for Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. \r\nJulie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"},{"ID":3801,"user_firstname":"Andy","user_lastname":"Gup","nickname":"andygup","user_nicename":"andygup","display_name":"Andy Gup","user_email":"agup@esri.com","user_url":"http:\/\/www.andygup.net","user_registered":"2018-03-02 00:15:25","user_description":"I spend a ton of time outdoors and when not on a mountain somewhere I'm a Sr. Product Engineer for the ArcGIS Maps SDK for JavaScript. I work on ES modules, 3rd party JavaScript frameworks, and other cool mapping-related goodies.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/andy_gup_thumb4-1.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":[{"ID":300452,"post_author":"3801","post_date":"2018-08-17 16:12:31","post_date_gmt":"2018-08-17 23:12:31","post_content":"","post_title":"Migrating Web Apps from Google to ArcGIS: Directions and Routing","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"migrating-web-apps-from-google-to-arcgis-directions-and-routing","to_ping":"","pinged":"","post_modified":"2018-08-30 10:29:38","post_modified_gmt":"2018-08-30 17:29:38","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=300452","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":304002,"post_author":"3801","post_date":"2018-08-23 10:24:04","post_date_gmt":"2018-08-23 17:24:04","post_content":"","post_title":"Migrating Web Apps from Google to ArcGIS: Searching and Geocoding","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"migrating-web-apps-from-google-to-arcgis-searching-and-geocoding","to_ping":"","pinged":"","post_modified":"2018-08-30 10:28:17","post_modified_gmt":"2018-08-30 17:28:17","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=304002","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":295342,"post_author":"4271","post_date":"2018-08-09 10:29:10","post_date_gmt":"2018-08-09 17:29:10","post_content":"","post_title":"Migrating from Google Maps JavaScript API to ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"migrating-from-google-maps-javascript-api-to-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2018-08-30 10:31:39","post_modified_gmt":"2018-08-30 17:31:39","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=295342","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/draw-line-2.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/draw-line-1-1.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Migrating Web Apps from Google to ArcGIS: Adding a Shape<\/title>\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\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Migrating Web Apps from Google to ArcGIS: Adding a Shape\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape\" \/>\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=\"2018-08-30T17:55:38+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\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape\"},\"author\":{\"name\":\"Julie Powell\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3ef71df36f6aacca26eb2c7f65f15e88\"},\"headline\":\"Migrating Web Apps from Google to ArcGIS: Adding a Shape\",\"datePublished\":\"2018-08-30T17:26:28+00:00\",\"dateModified\":\"2018-08-30T17:55:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"jsapi4\",\"migrate from google\"],\"articleSection\":[\"Announcements\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape\",\"name\":\"Migrating Web Apps from Google to ArcGIS: Adding a Shape\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-08-30T17:26:28+00:00\",\"dateModified\":\"2018-08-30T17:55:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Migrating Web Apps from Google to ArcGIS: Adding a Shape\"}]},{\"@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\/3ef71df36f6aacca26eb2c7f65f15e88\",\"name\":\"Julie Powell\",\"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\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png\",\"caption\":\"Julie Powell\"},\"description\":\"Julie Powell is Principal Product Manager for Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets.\",\"sameAs\":[\"https:\/\/x.com\/JuliePowellGIS\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/julie-powell\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Migrating Web Apps from Google to ArcGIS: Adding a Shape","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\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape","og_locale":"en_US","og_type":"article","og_title":"Migrating Web Apps from Google to ArcGIS: Adding a Shape","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-08-30T17:55:38+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\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape"},"author":{"name":"Julie Powell","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3ef71df36f6aacca26eb2c7f65f15e88"},"headline":"Migrating Web Apps from Google to ArcGIS: Adding a Shape","datePublished":"2018-08-30T17:26:28+00:00","dateModified":"2018-08-30T17:55:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape"},"wordCount":10,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["jsapi4","migrate from google"],"articleSection":["Announcements"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape","name":"Migrating Web Apps from Google to ArcGIS: Adding a Shape","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-08-30T17:26:28+00:00","dateModified":"2018-08-30T17:55:38+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Migrating Web Apps from Google to ArcGIS: Adding a Shape"}]},{"@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\/3ef71df36f6aacca26eb2c7f65f15e88","name":"Julie Powell","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\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png","caption":"Julie Powell"},"description":"Julie Powell is Principal Product Manager for Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets.","sameAs":["https:\/\/x.com\/JuliePowellGIS"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/julie-powell"}]}},"text_date":"August 30, 2018","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-adding-a-shape","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/draw-line-1-1.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":214052,"name":"migrate from google","slug":"migrate-from-google","term_group":0,"term_taxonomy_id":214052,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"}],"category_data":[{"term_id":37101,"name":"Announcements","slug":"announcements","term_group":0,"term_taxonomy_id":37101,"taxonomy":"category","description":"","parent":0,"count":1962,"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"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"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\/307722","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\/4271"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=307722"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/307722\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=307722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=307722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=307722"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=307722"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=307722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}