Adjusting the size of a dynamically generated rectangle using DrawingManager

I am currently working on a web application using Azure Maps along with the DrawingManager library. My goal is to allow users to save a drawn rectangle and potentially edit it by resizing later on. The strange thing is that while resizing rectangles works fine right after adding them, there seems to be an issue when shapes are added programmatically, causing the rectangle to become distorted.

This issue can even be replicated in the provided online example: when attempting to resize a rectangle.

https://i.sstatic.net/Q10F4.png

If anyone has encountered this problem before and has found a solution or workaround, I would greatly appreciate any insights.

javascriptvue.jsazure-maps

Answer №1

When working with GeoJSON, it's important to note that there is no built-in rectangle object. If you're dealing with a polygon that resembles a rectangle, it will simply be treated as a polygon (as seen here).

If you are certain that the polygon represents a rectangle shape, consider utilizing the extended GeoJSON specification provided by Azure Maps. You can designate the geometry as a rectangle by adding the subType property to your polygon and informing the drawing manager accordingly.

For instance:

{
    "type": "Feature",
    "properties": {
        "subType": "Rectangle"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [[-122.35568,47.612875],[-122.28444,47.612875],[-122.28444,47.58046],[-122.35568,47.58046],[-122.35568,47.6128758]
            ]
        ]
    }
}

Answer №2

After some investigation, I was able to identify the issue on my own. It turns out that the problem lies with the example data and not with the library itself.

I realized that the coordinates in the loaded figure needed to be listed in reverse order for everything to work properly with the library.

https://i.sstatic.net/ge1pr.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to eliminate transition effects in Vue.js when there are changes in the data

My Vue.js 2.x component fetches data from the server in this way. <template> ... <a href="..." v-if="data.status !== 'blind'">Link</a> ... </template> <script> export default { ... data: { retu ...

javascriptvue.jsvuejs2async-await

Discovering the required rotation angle for an object to directly face another using JS HTML5 CANVAS

Hey there, I'm currently working on a game project in Javascript where I have a player and a cursor. I already know the positions of both objects, but what I need help with is determining the angle in degrees or radians that the player needs to rotate ...

javascripthtmlcanvasrotation

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

I have a specific object structure that contains information about countries and their respective cities: const geo = { europe: { germany: ['berlin', 'hamburg', 'cologne'], france: ['toulouse', ' ...

javascripttypescriptfunctionenumsfunctional-programming

Ways to categorize items retrieved from an HTTP request to the backend in Angular

When making a call to the backend using this http request: this.StudentEnrollment.getRecordsById(list.value.split(/[\r\n]+/)).subscribe(values => { this.studentObject = values; }); The studentObject is structured as shown below: { recor ...

javascriptangulartypescript

The div has extra white space at the bottom due to the Hide/Show content feature

Having trouble stretching a scrolling div to 100% of its parent container's height? The Hide/Show content feature is causing whitespace at the bottom of the div. Check out the jsfiddle here: http://jsfiddle.net/fkvftff2/1/ LATEST UPDATE: The issue a ...

javascripthtmlcss

Vuejs error: String length is not valid

Just starting out with VueJS, everything was fine when I compiled this code: <template> <div id="users-table"> <ServerTable url="users" :columns="columns" :options="options"></ServerTable> </div> </template> Ho ...

vue.jsvuejs2vue-component

How can I utilize the Json data retrieved through the findById method in my code?

My current project involves creating an API that retrieves data from Patients (id and name), Physicians (id and name), and Appointments (id, phyId, patId, app_date) in order to display the patients scheduled to see a specific physician. To achieve this, I ...

javascriptnode.jsapiloopback

Utilizing JavaScript Modules to Improve Decoupling of DOM Elements

Currently, I am tackling portions of a complex JavaScript application that heavily involves DOM elements. My goal is to begin modularizing the code and decoupling it. While I have come across some helpful examples, one particular issue perplexes me: should ...

javascripthtmldom

JSON does not send information to the specified web address

Attempting to send some data to the following URL: " $(function() { var frm = $(document.myform); var data = "?lm_po_id=154668&authentication=ThisisAuth&description=ThisIsDesc";//JSON.stringify(frm.serializeArray()); ...

javascriptjson

The Vue JS task manager is unable to remove completed tasks from the list

I'm encountering an issue with the 'DELETE ONLY FINISHED' button. The goal is for this button to delete all finished tasks. When a task is completed, its 'finishedTask' property changes to true. I have attempted to store all finish ...

javascriptvue.js

CORS Policy Blocking React and Express Access to Fetch Data from Origin

Currently, I am diving into the world of React and Express in an attempt to enable local file uploads from a React component and have Express handle the incoming files. Unfortunately, no matter what methods I try, I keep encountering this error message: A ...

javascriptreactjsexpresscors

Adding a value to an element in JavaScript to interact with it using Selenium

After implementing the provided code snippet, I noticed that it replaces the value in the element with a new one. However, I am looking to append or insert a new line rather than just replacing the existing value. Is there an alternative command like app ...

javascriptjavaseleniumselenium-webdriverwebdriver

Can a layer be sliced to create a text-shaped cutout?

I want to achieve a cool text effect where the background is visible through the letters. I have explored options with background images and colors, but I haven't found any examples where the underlying layer is revealed. Is this even possible? Imag ...

javascriptjquerycsshtml

Understanding the document.domain feature in Javascript

I have a website called foo.com hosted on server bar. Within this website, I have created a subdomain called api.foo.com. To connect the subdomain with Google Apps, I have set up a CNAME entry pointing to ghs.google.com. Now, I am facing an issue when att ...

javascriptjquerygoogle-appscname

Yii2 and Vue project, subpages display a unique error message when accessed through a 404 redirect

I am currently working on a project that combines yii2 and Vue, and overall it is functioning well. However, I am facing an issue where sub URLs are first redirected to a 404 error page before being properly displayed. Here is an excerpt from my htaccess f ...

apachevue.jsyii2routerhistory

Display solely the API information that falls under the category_name of "WEBSITE" using Vue

My data is fetched from an API using the following code: async mounted() { const { data } = await axios.get('/api/talent', { headers: { 'X-AUTH-TOKEN': '####', 'Content-Type': 'application/jso ...

vue.jsfilteraxiosnuxt.js

utilize JavaScript on every element that has a specific identifier

<a id="link" href="http://www.google.co.uk">link</a> <a id="link" href="http://stackoverflow.com">link</a> Is there a way to make the JavaScript code apply to all <a> tags with the id="link", instead of just the first one? A ...

javascriptjquery

Error in Charts API - [draw function failed to render for one or more participants]

Currently encountering an error on the client side where one or more participants failed to draw. I am able to successfully output data in the drawVisualization call, indicating that the issue lies within the JavaScript code. Despite following examples, I ...

javascriptgoogle-visualization

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

I am in need of a solution that will enable a user to update text on a webpage dynamically. I have been unable to find any information on how to achieve this. Is there anyone aware of a method to implement this feature? Perhaps a library or utilizing Vue ...

javascripthtmlcssvue.js

The onEnter and onExit functions within a React Native Component using react-native-router-flux

Within my app's router definitions, I have successfully utilized the onEnter/onExit method at the root level: <Scene key="arena" hideNavBar={true} onEnter={() => console.log("Entered")} component={ArenaPage} /> Is there a way to achieve th ...

javascriptreactjsreact-nativereact-native-router-flux