Showing Custom Boundary Overlays with OpenStreetMap

There are many cases for using custom boundary overlays in a jQuery mapping project. The first situation that comes to mind, and perhaps the most general, is a scenario in which a map owner would like to define and present to users neighborhood boundaries over street level detail. Some areas may be commonly established and available as preset overlays, but a common challenge is to create a tool that allows a map owner to edit these demarcating boundaries on their own. As neighborhoods expand, or become sub-divided, the tool would need to have the ability to easily apply and save boundary changes. 

The first example where custom boundary overlays are required is real-estate maps, as neighborhoods can be more meaningful for marketing properties than zip codes or cities references. Some neighborhood boundary information is available, but a rigid schema doesn’t allow for agents to make adjustments over time or correct boundaries that are incorrectly drawn. The custom tool developed by jQueryMaps to draw and assign information to polygons offers a quick solution to this challenge.

New York neighborhood divisions

The basic admin enables users to set anchor points to connect lines to form a full polygon for the custom boundary overlays. Once the area is closed, the admin opens a panel to automatically assign an ID to the area and requests pertinent information for the boundary, such as the neighborhood name, description and any additional useful information. Saving the update stores the information and boundary overlay in the project backend, and displays the new addition on the public facing map. Changes can be just as simple. To edit any of the custom boundary overlays, agents would need to access the admin and click on any of the existing polygons to activate anchor points. Edits can then be made to the boundaries by dragging, adding or deleting anchor points on the map. In the case of text changes, simply modifying the information in the active fields and pressing save would store all of the updates and publish the changes on the public facing map. For real-estate agents, custom boundary overlays can also be configured with filters so that users can activate school districts, neighborhoods, zip codes or any custom overlays all within a single project.

Neighborhood polygon

A second example when custom boundary overlays are often used is to define business territories for agents working in proximity of one another. A business may have multiple agents handling sales in a city or zip code, and requires a system to define the boundary for each territory on the map. At the same time, these lines could change in the future as territories expand/contract or as new agents are brought into region. A similar project would be relevant for internal business analysis, but can also be posted to the website with reduced content for the public to search and locate agent information.

Circle overlays

The ways in which this HTML5 mapping tool can be used are plentiful. Being able to draw custom boundary overlays, assign information to these areas and edit the content in the future is relevant to many industries. Combining jQueryMaps second to none experience with OpenStreetMap cartography can provide a highly customized and powerful mapping solution for any website.