{"id":15037,"date":"2021-05-26T10:44:15","date_gmt":"2021-05-26T08:44:15","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=15037"},"modified":"2022-01-05T20:02:45","modified_gmt":"2022-01-05T19:02:45","slug":"polygon-based-searches-on-maps","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/","title":{"rendered":"Draw a Search: Implementing Polygon-based Searches on Maps"},"content":{"rendered":"\n<p>If you take a look at mobile apps listing houses for sale, there are many that allow you to <strong>search within a map by drawing a shape<\/strong> around the area you are interested in. While such a feature allows users to customise their searches quickly and simply, there are <strong>a lot of technical issues<\/strong> that need to be solved in order to implement a reliable and effective search.<\/p>\n\n\n\n<p>This article looks at <strong>idealista<\/strong>, <a href=\"https:\/\/www.eqtgroup.com\/news\/Press-Releases\/2020\/eqt-acquires-idealista--the-leading-online-real-estate-classifieds-platform-in-southern-europe\/\" target=\"_blank\" aria-label=\"the leading online real estate classifieds platform in Southern Europe (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">the leading online real estate classifieds platform in Southern Europe<\/a>, and their implementation of a so-called \u2018<strong>draw a search<\/strong>\u2019 feature within their mobile and web apps.&nbsp;<\/p>\n\n\n\n<p>An overview of how the team implemented this particular feature, and the kind of technical constraints the development team had to deal with follows.<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-b812ea91      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#idealistas-web-and-mobile-apps\" class=\"uagb-toc-link__trigger\">idealista\u2019s web and mobile apps<\/a><li class=\"uagb-toc__list\"><a href=\"#technologies\" class=\"uagb-toc-link__trigger\">Technologies<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#web-app\" class=\"uagb-toc-link__trigger\">Web app<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#mobile\" class=\"uagb-toc-link__trigger\">Mobile<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#draw-a-search-polygon-management\" class=\"uagb-toc-link__trigger\">Draw a search: polygon management<\/a><li class=\"uagb-toc__list\"><a href=\"#polygon-based-search\" class=\"uagb-toc-link__trigger\">Polygon-based search<\/a><li class=\"uagb-toc__list\"><a href=\"#conclusions\" class=\"uagb-toc-link__trigger\">Conclusions<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"h-idealista-s-web-and-mobile-apps\">idealista\u2019s web and mobile apps<\/h2>\n\n\n\n<p>idealista is one of the leading companies in the provision of online services to both sellers and buyers interested in real estate properties. Their primary service provides users with the opportunity to look for properties available for sale or to rent by means of a web portal that is accessible as both a mobile and a desktop (via their website) application.<\/p>\n\n\n\n<p><strong>Search features<\/strong> need to function in many ways in this particular context. For instance, users may want to look for properties within an area around a specific point in a map. In this case, the input required for the search might be an address.<\/p>\n\n\n\n<p>This approach is simple and quite effective, but is limited by the constraint of the circular shape of the search area, where the specified address is the center, and the remainder is defined by a (potentially customisable) radius.<\/p>\n\n\n\n<p>An alternative option is to <strong>search within specific areas<\/strong>, which might be an entire city, a region, a province or specific neighbourhoods. Of course, the bigger the area, the higher the number of results, which in turn might make the search less useful from a searcher\u2019s perspective.&nbsp;<\/p>\n\n\n\n<p>The specific-area approach solves the limitation related to the shape of the search area, since each sub-area has its own geometry. However, having to constrain the search to a specific district or districts might be annoying for a user who wants to look for specific sub-areas, perhaps within a district or across two or more regions.<\/p>\n\n\n\n<p>To address these limitations, idealista opted for the <strong>\u2018draw a search\u2019 feature<\/strong>, which allows the user to draw a custom outline on a map, specifying the area of interest. This means there are no constraints on the region shape, or on the size of such an area.&nbsp;<\/p>\n\n\n\n<p>Moreover, the ability to draw on a map results in a <strong>better user experience<\/strong> and a more natural interaction, which also increases the <strong>usability<\/strong> of both the mobile app and the web application.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/0qVIff-ddnUa9LZJdVhN6at4LfmlWgJXz_6tnicBe4Rbi_U7QkLAD5LbSjszs-aHOTQTaE0qvYzuS_3Amdz1xNu3LtnMzJlhPN0y4MjjsaRoKqCJDAK-HwOMlpJ-Yyfnisq85FVb\" alt=\"Screenshot from the Idealista app, showing results gathered from the draw-to-search feature.\"\/><figcaption><em>Screenshot from the idealista app, showing results gathered from the draw-to-search feature.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-technologies\">Technologies<\/h2>\n\n\n\n<p>In terms of technologies, the implementation of the \u2018draw a search\u2019 feature has taken different approaches, depending on the platform.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-web-app\">Web app<\/h3>\n\n\n\n<p>Starting with the web app, idealista relied on the <strong>Google Maps integration<\/strong> provided by the Google API. However, this approach revealed some practical issues that needed to be solved:<\/p>\n\n\n\n<p>Each property on sale can be displayed with a graphical pin, as is usually the case within Google Maps when highlighting search results. If the number of pins is limited, rendering them on top of the map is not an issue for modern browsers. <\/p>\n\n\n\n<p>However, based on the size of the area selected by the user, the number of pins might be very high. If that happens to be the case (and it often is), a different solution is required to overcome the limitations imposed by browser capabilities, as well as the computational resources available in current devices.<\/p>\n\n\n\n<p>Consequently, the team decided to <strong>optimize<\/strong> the pins visualization by implementing a sort of hierarchical visualization based on a custom <strong>tile server<\/strong>. <\/p>\n\n\n\n<p>Based on <a href=\"https:\/\/www.codemotion.com\/magazine\/tag\/node-js\/\" class=\"ek-link\">Node.js<\/a> and <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/carto.com\/help\/tutorials\/getting-started-with-cartocss\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">CartoCSS<\/a>, this solution consisted of a set of pre-rendered images (generated on the <a href=\"https:\/\/www.codemotion.com\/magazine\/dev-hub\/backend-dev\/\" class=\"ek-link\">backend<\/a>), that are shown on the map at a density based on the level of magnification. Instead of rendering each pin every time, a single image is generated and sent to the browser, which can simply show the image without high computational requirements. <\/p>\n\n\n\n<p>When the user decides to explore an area with a different level of magnification, another image is rendered and provided to the browser, to adjust the window contents accordingly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-mobile\">Mobile<\/h3>\n\n\n\n<p>In the <a href=\"https:\/\/www.codemotion.com\/magazine\/tag\/mobile-developer\/\" class=\"ek-link\">mobile app development<\/a> process, the team opted for <strong>native API<\/strong> for both the iOS and Android apps, including those required for rendering maps. Instead of relying on <strong>cross-platform development frameworks<\/strong>, such as <a href=\"https:\/\/www.codemotion.com\/magazine\/articles\/events\/flutter-mobile-web-dev\/\" class=\"ek-link\">Flutter<\/a> or <a href=\"https:\/\/events.codemotion.com\/webinars\/think-in-realtime-with-xamarin-and-azure-signalr-service\/\" class=\"ek-link\">Xamarin<\/a>, the team opted for a native approach in order to improve results in terms of performance. <\/p>\n\n\n\n<p>The introduction of the \u2018draw a search\u2019 feature occurred when the apps were already in use; consequently, it was not a situation where the entire app had to &#8211; or could &#8211; be redesigned and reimplemented just to introduce this feature.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-draw-a-search-polygon-management\">Draw a search: polygon management<\/h2>\n\n\n\n<p>It is interesting to understand in more detail how the drawn area is actually used to perform the search. The first problem here is quite simply <strong>how to represent such an area<\/strong>.<\/p>\n\n\n\n<p>The first distinction that we need to make here is how this area can be drawn through the idealista apps. Considering the web app (which can be accessed at <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.idealista.pt\/en\/desenhar-a-tua-area-de-pesquisa\/comprar-casas\/39.83834\/-7.10693\/7\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">this link<\/a>), the process of drawing consists of specifying, one after the other, a set of points that are joined to form a <strong>polygon<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Such a polygon can be sent to a web server, which will then use it to perform a search.<\/p>\n\n\n\n<p>When selecting this set of points in the web app, it is likely that the user will not input a huge number of points, but will instead limit the search within an area that defined by less than ten points &#8211; at least in most situations. However, this scenario changes in the <strong>mobile app<\/strong>.<\/p>\n\n\n\n<p>As often happens, interaction with mobile devices is quite different from what happens on a desktop computer. In this case, the \u2018draw a search\u2019 feature does not require the mobile app user to select every vertex of the polygon, but instead allows the user to draw a <strong>freehand custom shape<\/strong> such as the heart shape shown in the previous image.<\/p>\n\n\n\n<p>While this approach is both useful and engaging for the user, it creates several issues from a developer\u2019s point of view. Firstly, any custom shape needs to be converted into a polygon, in order to be usable for a search. A very complex shape is made up of a very high number of points, which might make the search quite computationally demanding.<\/p>\n\n\n\n<p>To avoid this problem, a common solution (also adopted by the idealista team) is the implementation of the <strong>Visvalingam\u2013Whyatt algorithm<\/strong>, used for line simplification. <\/p>\n\n\n\n<p>This is not the place to go into detail about this algorithm (more information is available on <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/Visvalingam%E2%80%93Whyatt_algorithm\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Wikipedia<\/a>); the only useful thing to mention here is that such a solution allows a dramatic <strong>reduction in the number of points<\/strong> used to define the polygon, thus simplifying it while keeping an almost identical shape.&nbsp;<\/p>\n\n\n\n<p>With this solution, even freehand shapes become manageable, avoiding the risk of overly complex polygon-based queries.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/iqRCd8Ay8uPG_fKiqBRB22VV7VgxmcOeIMBV0_o9HeLiZv0Sqs5T45GOAx1MeG9SGjhrEnq3jObOGOJcBaK708N4DbUDdHQQpclE_yzOrvNVdECIx4RjFHFpANM-EqwXyT0dWunJ\" alt=\"GIF: Graphical representation of line simplification algorithm. (source: Wikipedia)\"\/><figcaption><em>Graphical representation of line simplification algorithm. (source: Wikipedia)<\/em><\/figcaption><\/figure>\n\n\n\n<p>The Visvalingam\u2013Whyatt algorithm is not the only <strong>post-processing<\/strong> algorithm applied to polygons. Indeed, there are several other issues that need to be solved before a polygon is really useful for performing searches.&nbsp;<\/p>\n\n\n\n<p>Other actions required are aimed at <strong>filling holes<\/strong> within shapes, and <strong>closing curves<\/strong> (in situations where the last point does not coincide exactly with the first).<\/p>\n\n\n\n<p>An additional procedure is also used to identify <strong>crossover paths<\/strong>. Imagine, for instance, that a user draws a figure-of-eight shaped polygon, in which two lines cross each other. The polygon-based search does not support such an abnormal shape, which is actually made up of two separate polygons sharing a single vertex.&nbsp;<\/p>\n\n\n\n<p>The issue is solved by splitting the polygons every time a crossover is recognised. In this way, the system can perform a sub-search for each sub-polygon, and all the partial results can finally be put together and returned to the user as requested.<\/p>\n\n\n\n<p>It is worth mentioning that all this processing is performed by means of a <strong>Java backend<\/strong>, exploiting the features provided by the <strong>Java Topology Suite (JTS)<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-polygon-based-search\">Polygon-based search<\/h2>\n\n\n\n<p>Now that the shape-related data representation and management has been clarified, let\u2019s take a closer look at how the actual search is performed.<\/p>\n\n\n\n<p>There are many search frameworks that might be suitable for polygon-based searches. Among them, <strong>Elasticsearch<\/strong> is probably one of the best known and respected. However, the team decided to opt for another solution, which was already in use before the introduction of the \u2018draw a search\u2019 feature (and even before Elasticsearch\u2019s first release): <strong>Apache Solr<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/fmDdAAc7OOMpbix0xNjx8JaKCVHDOkBBMVWCZBL8dbNjDhWExpS1nyAnwVoV7WBoysUJqqkBJoPdgv7m3gr4IEP0p5kInJJDIFyc-fJByacH3iXgDQTsrUoH2PsusrXQ901cQHMV\" alt=\"Logo of Apache Solr\"\/><\/figure>\n\n\n\n<p>Apache Solr exploits a <strong>semantic engine<\/strong> written in <a href=\"https:\/\/www.codemotion.com\/magazine\/tag\/java\/\" class=\"ek-link\">Java<\/a> and based on <strong>Lucene<\/strong>. Major features include full-text search, hit highlighting, faceted search, real-time indexing, dynamic clustering, database integration and <a href=\"https:\/\/www.codemotion.com\/topics\/sql-and-nosql-29\" class=\"ek-link\">NoSQL<\/a> features.&nbsp;<\/p>\n\n\n\n<p>As well as these features, Apache Solr also allows users to search for point coordinates within a specific area, which is exactly what the idealista team required. This feature is known as <strong>spatial search<\/strong>, and it is described in the <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/solr.apache.org\/guide\/8_8\/spatial-search.html\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Apache Solr documentation<\/a>.<\/p>\n\n\n\n<p>All the locations of properties for sale are stored within a database as 2D coordinates. Solr thus allows retrieval of all the locations situated within a specific polygon, as long as such a polygon has no holes or crossovers (which explains the need for the aforementioned post-processing techniques).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusions\">Conclusions<\/h2>\n\n\n\n<p>It is clear by now how many issues may hide behind the hood of an apparently simple feature. Dealing with user selections and spatial data requires several constraints to be managed properly.<\/p>\n\n\n\n<p>The idealista case discussed here is an excellent example of how development teams need to continuously find new solutions to unexpected issues.&nbsp;Using the right tools, such as JTS and Solr in this specific context, is crucial for those who wish to <strong>speed up the development process<\/strong> and increase the <strong>maintainability<\/strong> of the codebase.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you take a look at mobile apps listing houses for sale, there are many that allow you to search within a map by drawing a shape around the area you are interested in. While such a feature allows users to customise their searches quickly and simply, there are a lot of technical issues that&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/\">Read more<\/a><\/p>\n","protected":false},"author":3,"featured_media":15052,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":7,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[36],"tags":[52,4881,57,4564,4257],"collections":[],"class_list":{"0":"post-15037","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-backend","8":"tag-java","9":"tag-mobile","10":"tag-node-js","11":"tag-nosql","12":"tag-user-experience","13":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Draw a Search: Implementing Polygon-based Searches on Maps -<\/title>\n<meta name=\"description\" content=\"This article explores how an apparently simple draw-a-search UX function entails a complex design and development process, and how to do it.\" \/>\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.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Draw a Search: Implementing Polygon-based Searches on Maps\" \/>\n<meta property=\"og:description\" content=\"This article explores how an apparently simple draw-a-search UX function entails a complex design and development process, and how to do it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-26T08:44:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-05T19:02:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vito Gentile\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ViGentile\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vito Gentile\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/\"},\"author\":{\"name\":\"Vito Gentile\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313\"},\"headline\":\"Draw a Search: Implementing Polygon-based Searches on Maps\",\"datePublished\":\"2021-05-26T08:44:15+00:00\",\"dateModified\":\"2022-01-05T19:02:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/\"},\"wordCount\":1721,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg\",\"keywords\":[\"Java\",\"Mobile\",\"Node.js\",\"NoSQL\",\"User Experience\"],\"articleSection\":[\"Backend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/\",\"name\":\"Draw a Search: Implementing Polygon-based Searches on Maps -\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg\",\"datePublished\":\"2021-05-26T08:44:15+00:00\",\"dateModified\":\"2022-01-05T19:02:45+00:00\",\"description\":\"This article explores how an apparently simple draw-a-search UX function entails a complex design and development process, and how to do it.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg\",\"width\":1200,\"height\":628,\"caption\":\"Draw a Search Implementing Polygon-based Searches on Maps\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Backend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/backend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Draw a Search: Implementing Polygon-based Searches on Maps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313\",\"name\":\"Vito Gentile\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g\",\"caption\":\"Vito Gentile\"},\"description\":\"I\u2019m a data scientist, tech writer, software developer with experience in mobile, web (full-stack) and Python programming, and former researcher with interests in human-computer interaction. I thus have a multi-faceted experience in the area of software development, and that\u2019s why I love my job(s)!\",\"sameAs\":[\"https:\/\/vitogentile.it\",\"https:\/\/www.linkedin.com\/in\/vitogentile\/en\",\"https:\/\/x.com\/ViGentile\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Draw a Search: Implementing Polygon-based Searches on Maps -","description":"This article explores how an apparently simple draw-a-search UX function entails a complex design and development process, and how to do it.","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.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/","og_locale":"en_US","og_type":"article","og_title":"Draw a Search: Implementing Polygon-based Searches on Maps","og_description":"This article explores how an apparently simple draw-a-search UX function entails a complex design and development process, and how to do it.","og_url":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2021-05-26T08:44:15+00:00","article_modified_time":"2022-01-05T19:02:45+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg","type":"image\/jpeg"}],"author":"Vito Gentile","twitter_card":"summary_large_image","twitter_creator":"@ViGentile","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Vito Gentile","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/"},"author":{"name":"Vito Gentile","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313"},"headline":"Draw a Search: Implementing Polygon-based Searches on Maps","datePublished":"2021-05-26T08:44:15+00:00","dateModified":"2022-01-05T19:02:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/"},"wordCount":1721,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg","keywords":["Java","Mobile","Node.js","NoSQL","User Experience"],"articleSection":["Backend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/","url":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/","name":"Draw a Search: Implementing Polygon-based Searches on Maps -","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg","datePublished":"2021-05-26T08:44:15+00:00","dateModified":"2022-01-05T19:02:45+00:00","description":"This article explores how an apparently simple draw-a-search UX function entails a complex design and development process, and how to do it.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg","width":1200,"height":628,"caption":"Draw a Search Implementing Polygon-based Searches on Maps"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/polygon-based-searches-on-maps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Backend","item":"https:\/\/www.codemotion.com\/magazine\/backend\/"},{"@type":"ListItem","position":3,"name":"Draw a Search: Implementing Polygon-based Searches on Maps"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313","name":"Vito Gentile","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g","caption":"Vito Gentile"},"description":"I\u2019m a data scientist, tech writer, software developer with experience in mobile, web (full-stack) and Python programming, and former researcher with interests in human-computer interaction. I thus have a multi-faceted experience in the area of software development, and that\u2019s why I love my job(s)!","sameAs":["https:\/\/vitogentile.it","https:\/\/www.linkedin.com\/in\/vitogentile\/en","https:\/\/x.com\/ViGentile"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-600x600.jpg","author_info":{"display_name":"Vito Gentile","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg",1200,628,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-300x157.jpg",300,157,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-768x402.jpg",768,402,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-1024x536.jpg",1024,536,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg",1200,628,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg",1200,628,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps.jpg",100,52,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/05\/Draw-a-Search-Implementing-Polygon-based-Searches-on-Maps-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Vito Gentile","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/"},"uagb_comment_info":0,"uagb_excerpt":"If you take a look at mobile apps listing houses for sale, there are many that allow you to search within a map by drawing a shape around the area you are interested in. While such a feature allows users to customise their searches quickly and simply, there are a lot of technical issues that&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/15037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=15037"}],"version-history":[{"count":5,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/15037\/revisions"}],"predecessor-version":[{"id":15076,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/15037\/revisions\/15076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/15052"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=15037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=15037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=15037"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=15037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}