Draw area on Map based on square foot.

Balasaheb Molawade 136

Hi Team.

We are using the Bing Maps v8 control to develop applications for our customers.

We have a requirement to draw an area based on square footage. We will have values in the fields as shown below. Using these values, they want to draw the area. Allow me to explain our use case. Our customers are agencies that manage restaurants in the USA. They designate specific locations or areas for restaurants. They need to draw boundaries to ensure that restaurants are not built outside of these designated areas and do not encroach upon sidewalk spaces. By plotting the restaurants within these predefined boundaries, they can easily monitor compliance. If a restaurant exceeds the allocated area, they will notify the restaurant owner to rectify the situation.

Below is a screenshot of how the customer displays the values.

Is it possible to draw an area based on square foot using Bing Maps. Is there a sample code available.

Thanks!

rbrundritt 18,686 Reputation points Microsoft Employee

2023-09-05T14:59:30.15+00:00

It's not 100% clear what you are looking to achieve. Sidewalk data is not available in Bing Maps, so you would need to bring that data in from somewhere. Assuming you have a center line for a sidewalk, and the information you provided above, along with the property dimensions, it wouldn't be overly difficult to calculate the maximum sq footage for a building. If you only have the property dimensions, and need to include a sidewalk with the provided width, that could also be taken into account. In that case you would subtract the sidewalk width from the sides of the property that border a road.
Balasaheb Molawade 136 Reputation points

2023-09-06T12:07:28.7466667+00:00

Hi Ricky,

Thanks for your reply. We have a single center point, along with Sidewalklengthft and Sidewalkwidthft measurements. With this information, we intend to create a polygon shape that covers the designated area. For instance, for a restaurant, they are permitted to extend their area up to a predefined length. Our objective is to represent this extension on the map, similar to the example shown in the below screenshot.

Is it possible in Bing map to plot shape (polygon) on the map using the center point, along with Sidewalklengthft and Sidewalkwidthft.

Thanks!
rbrundritt 18,686 Reputation points Microsoft Employee

2023-09-06T15:38:19.16+00:00

If I understand correctly, you want to take the center point of the building, and calculate the space between the building and the sidewalk, and potentially allow overlapping the sidewalk by some distance depending on its width. Something similar to the below where the red dot is the center point, the orange line is the sidewalk width and length (this assumes we know the position of the sidewalk, which we don't in Bing Maps), and the blue area is the calculated area that they can use.

I don't think center point (of building?), sidewalk dimensions are enough information to accomplish this. The roads on the map are just lines and don't contain any physical dimensions in them, so it's possible that the road takes up more or less space than the line shows on the map. If you switch into hybrid mode you can see the difference in road line size compared to imagery of the actual road. Additionally, Bing Maps does not expose any of the map data geometry, so there is no way to determine where obstacles are around the building (roads, other buildings...). You could potentially use Open Street Map data to get the vector geometry data for an area and that would help a bit, but again the roads would just be lines which have no physical width dimensions. The distance from the center point to the sidewalk doesn't appear to be known, nor the direction (rotation) of the sidewalk. Just the distance from the center point to the sidewalk alone can make a big difference in the amount of area available. Take the following image for example where the orange line is the sidewalk, the red dot the center point. The distance from the center point to the sidewalk in the left triangle is double that of the right triangle, but the sidewalk lengths are equal. As such the area in the left triangle is double that of the one of the right.

Overall, I think you need a lot more information/data to do this kind of calculation, some of which simply does not exist (few cities in the world have mapped the actual location of their sidewalks).
Balasaheb Molawade 136 Reputation points

2023-09-07T12:05:01.0533333+00:00

Hi Ricky,

Thanks for your reply.

The customer has the following requirements. For the restaurant, they have specified space in front extending to the road or till some point. They want to plot that area as a polygon to determine how much space is allocated to the restaurant on the sidewalk.

Is it possible to plot a polygon using the center point, length, and width.

Thanks
rbrundritt 18,686 Reputation points Microsoft Employee

2023-09-07T22:35:06.36+00:00
What is the center point of; the sidewalk area, the allowed use area, or the building?

Do we know the rotation of this rectangular area? A solution without a rotation would only work when the length runs east/west.

If not, could we assume that the rectangular areas longest edge (length) runs parallel to the road? or building? If so, we would need to get the geometry data for the road or building footprint so that the heading for that can be used to determine the rotation of the polygon. That's not available in Bing Maps however there are several open-source data options for this. Road and building footprint data is available from OpenStreetMap (OSM) in most places, it even has sidewalk data in some places. If this is a smaller scale scenario, you can use the Overpass Turbo to quickly retrieve this data for a small area. If you need to do this calculation on a large scale, then it might make sense to download a copy of the OSM data and run an analysis on that directly. Global building footprint data is also available as open data as well (Microsoft used AI and made it available), but this data is usually in the form of large files and harder to work with. Once I have a bit more clarity on your use case I'll try and find some time to show how this could be done using Overpass turbo to retrieve the required data. Resources:

https://overpass-turbo.eu/

https://wiki.openstreetmap.org/wiki/Overpass_API

1 answer

rbrundritt 18,686 Microsoft Employee

Based on the long conversation in the comments, I've put together a code sample that uses Open Steet Map data to get the nearest road or sidewalk to the center point using the Overpass Turbo API. I then used that to determine the heading of the road/sidewalk and aligned the length edge of the rectangle with that when calculating the points of a rotated rectangle. Here is the full source code (add your own Bing Maps Key):

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <style type='text/css'>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        #myMap {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .inputPanel {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: white;
            padding:10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="myMap"></div>

    <div class="inputPanel">
		<table>
			<tr>
				<td>Center:</td>
				<td><input type="text" id="coordTbx" value="47.674516, -122.125789"/></td>
			</tr>
			<tr>
				<td>Length:</td>
				<td><input type="number" id="lengthTbx" value="80" min="0"/> ft</td>
			</tr>
			<tr>
				<td>Width:</td>
				<td><input type="number" id="widthTbx" value="10" min="0"/> ft</td>
			</tr>
		</table>

        <input type="button" value="Calculate" onclick="calculate();"/>
	</div>

    <script type='text/javascript'>
        var map;

        var overpassTurboRoadQuery = `
            /*
            This has been generated by the overpass-turbo wizard.
            The original search was:
            “highway=* and type:way”
            */
            [out:json][timeout:25];
            // gather results
            (
              // query part for: “highway=*”
              way["highway"]({{bbox}});
            );
            // print results
            out body;
            >;
            out skel qt;
        `;

        function loadMapScenario() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                zoom: 4
            });

            //Load the GeoJSON and Spatial math modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.SpatialMath']);
        }

        function calculate() {
            //Clear all data on the map.
            map.entities.clear();

            //Capture the input data.
            var center = Microsoft.Maps.Location.parseLatLong(document.getElementById('coordTbx').value);
            var lengthFt = parseFloat(document.getElementById('lengthTbx').value);
            var widthFt = parseFloat(document.getElementById('widthTbx').value);    
            
            //Add the center point to the map.
            var centerPin = new Microsoft.Maps.Pushpin(center);
            map.entities.push(centerPin);

            //Center the map.
            map.setView({ center: center, zoom: 18 });

            //Validate input
            if (isNaN(lengthFt) || isNaN(widthFt)) {
                alert('Please enter a valid number for the length and width.');
                return;
            }

            if(!center) {
                alert ('Invalid latitude, longitude value provided');
            }

            //Convert feet to meters.
            var lengthMeters = lengthFt * 0.3048;
            var widthMeters = widthFt * 0.3048;   
            
            //Get data from OSM.
            getOsmData(center, widthMeters, lengthMeters);
        }

        function getOsmData(center, widthMeters, lengthMeters) {

            //Overpass turbo requires a bounding box to be specified in the form of south,west,north,east. 0.0001 degrees is roughly 10 meters.
            var bbox = (center.latitude - 0.0001) + ',' + (center.longitude - 0.0001) + ',' + (center.latitude + 0.0001) + ',' + (center.longitude + 0.0001);

            //Create request for Overpass Turbo that retrieves road and sidewalk data.
            var query = cleanQuery(overpassTurboRoadQuery.replace(/\{\{bbox\}\}/gi, bbox));

            //Make a request to Overpass Turbo.
            fetch('https://overpass-api.de/api/interpreter', {
                method: 'POST', // *GET, POST, PUT, DELETE, etc.
                mode: 'cors', // no-cors, *cors, same-origin
                cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
                body: 'data=' + query
            }).then(x => x.json()).then(osm_data => {
                //Convert the OSM data to GeoJSON
                var data = osmtogeojson(osm_data);

                //Convert the GeoJSON data to Bing Maps objects.
                var shapes = Microsoft.Maps.GeoJson.read(data);

                //Loop through the shapes and find the closest one to the center point using the spatial math module.
                var closestShape, closestDistance = Infinity;

                for (var i = 0; i < shapes.length; i++) {
                    var distance = Microsoft.Maps.SpatialMath.Geometry.distance(center, shapes[i]);
                    if (distance < closestDistance) {
                        closestShape = shapes[i];
                        closestDistance = distance;
                    }
                }

                //Loop through the line segments in the closet shape and find the closest segment.
                var closestSegment, closestSegmentDistance = Infinity;
                
                var path = closestShape.getLocations();

                for (var i = 0; i < path.length - 1; i++) {
                    var distance = Microsoft.Maps.SpatialMath.Geometry.distance(center, path[i], path[i + 1]);
                    if (distance < closestSegmentDistance) {
                        closestSegment = [path[i], path[i + 1]];
                        closestSegmentDistance = distance;
                    }
                }     

                //Calculate the heading of the line segment.
                var heading = Microsoft.Maps.SpatialMath.getHeading(closestSegment[0], closestSegment[1]);

                //Calculate the distance from the center of the rectangle to each point.
                var radiusMeters = Math.sqrt(Math.pow(lengthMeters * 0.5, 2) + Math.pow(2, widthMeters * 0.5));

                //Calculate the angle to the first point in the rectangle.
                var angleRadians = Math.atan2(widthMeters * 0.5, lengthMeters * 0.5);

                //Calculate the angle in degrees.
                var angle = normalizeHeading(angleRadians * 180 / Math.PI);

                //Calculate the heading of the first point in the rectangle.
                var heading1 = normalizeHeading(heading - angle);

                //Calculate the heading of the second point in the rectangle.
                var heading2 = normalizeHeading(heading1 + angle);

                //Calculate heading of the third point in the rectangle.
                var heading3 = normalizeHeading(heading1 + 180);

                //Calculate heading of the third point in the rectangle.
                var heading4 = normalizeHeading(heading2 + 180);

                //Calculate the points of a rectangle when unrotated.
                var points = [
                    Microsoft.Maps.SpatialMath.getDestination(center, heading1, radiusMeters),
                    Microsoft.Maps.SpatialMath.getDestination(center, heading2, radiusMeters),
                    Microsoft.Maps.SpatialMath.getDestination(center, heading3, radiusMeters),
                    Microsoft.Maps.SpatialMath.getDestination(center, heading4, radiusMeters)
                ];

                //CLose the rectangle polygon (first and last points should be the same).
                points.push(points[0]);

                //Rotate the points to match the heading of the road.
                //points = Microsoft.Maps.SpatialMath.Geometry.rotate(points, heading, center);

                //Create a polygon from the points.
                var rect = new Microsoft.Maps.Polygon(points, {
                    fillColor: 'rgba(0,0,255,0.5)',
                    strokeColor: 'blue'
                });

                //Add the polygon to the map.
                map.entities.push(rect);

            }, e => {
                aler('Unable to retrieve data from overpass.');
            });
        }

        function cleanQuery(query) {
            //Remove comments /* */ and //
            query = query.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '');

            //Remove new lines characters and surrounding whitespace.
            query = query.replace(/[\s\t]*\n[\s\t]*/gi, '');

            //Encode the query.
            return encodeURIComponent(query);
        }

        function normalizeHeading(heading) {
            //Make the heading between 0 and 360.
            heading = heading % 360;

            if(heading < 0){
                heading += 360;
            }

            return heading;
        }
    </script>

    <!-- Load a library that converts Overpass Turbo responses to GeoJSON. -->
    <script type="text/javascript" src="https://tyrasd.github.io/osmtogeojson/osmtogeojson.js"></script>

    <!-- Load the Bing Maps SDK -->
    <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?key=[YOUR_BING_MAPS_KEY]&callback=loadMapScenario"' async defer></script>
</body>
</html>

Here is a live version of this code running: https://rbrundritt.azurewebsites.net/Demos/BingMaps/RoadAlignedRectangles.html

Balasaheb Molawade 136 Reputation points

2024-03-27T08:45:06.7966667+00:00

Hi Ricky,

Thanks for providing the code. We used the code, and upon passing the length and width and latitude/longitude, it displays the shape as shown below.

When we compare it with the old system, from which we obtained the reference, it appears as shown below.

The customer wants to display the shape based on length, width, and location (X,Y) in WKT format WKT(X,Y). They have provided a screenshot indicating their desired plot.

Do you have an idea of how we can plot the shape based on the information provided above.

Thanks!
rbrundritt 18,686 Reputation points Microsoft Employee

2024-03-27T14:22:48.3066667+00:00

The coordinate they provided is pretty much on the road. There are two issues, the first is that it is too close to the other road. The second is that it is too close to a road be the center (and isn't close to the center based on the second screenshot). Looking at imagery, that coordinate is in the middle of the road.
rbrundritt 18,686 Reputation points Microsoft Employee

2024-03-27T14:24:23.2666667+00:00

Note that they only used 4 decimal places in their coordinate. At this latitude, that provides a margin of error of close to +/- 50ft.
Balasaheb Molawade 136 Reputation points

2024-03-28T12:58:55.8+00:00

Hi Ricky,

Thank you for your response.

The customer will provide an accurate point, from which they want to display a shape with a converted length 7 ft and width of 9 ft.

They provided the information below, as shown in the screenshot below. Also they have point in WKT format POINT(998546 172742).

We have tried various methods but still haven't achieved what they need. Do you have any recommendations for us.

Thanks
rbrundritt 18,686 Reputation points Microsoft Employee

2024-03-29T20:42:49.0133333+00:00

As we determined in a previous thread, POINT(998546 172742) = 40.640801961147595, -73.94848789941545

Looking at a map of that coordinate there isn't any roads similar to the names in the screenshot, so that seems like a disconnect.

That said, this whole scenario of what you are trying to achieve with calculating sidewalk space has a big margin of error associated with it.

Now, assuming that the point is showing up in the right area, I did notice Open Street Maps has sidewalk/footpath data. The original code sample provided here only uses street data, so there is potential for improving the accuracy in this situation. Note that sidewalk data isn't available everywhere so would need to fallback to street data. I'll do some experimenting to see if I can get the rectangle to show up in a better area. I'm thinking using pixel-based headings might make more sense here rather than geographic headings since we are dealing with such small distances and are looking for a visually accurate, not necessarily a spatially accurate result.
rbrundritt 18,686 Reputation points Microsoft Employee

2024-03-29T21:26:09.4533333+00:00

Just realized that the center point is an input parameter, so snapping that to sidewalks may not be desired. At the same time, I have a feeling the input coordinate could have been generated by someone geocoding an address which would often be a point on a road and likely not where they would want this area shown. I'm still experimenting and will post any improvements I come across.
rbrundritt 18,686 Reputation points Microsoft Employee

2024-03-29T22:24:38.67+00:00
I found a couple of improvements/fixes:

In the radiusMeters calculation I have an error where I'm doing Math.pow(2, widthMeters * 0.5) and it should be Math.pow(widthMeters * 0.5, 2). (reverse the power).

I realized that the rectangle position is calculated relative to the corners rather than the edges. We need to rotate the rectangle by half the calculated angle to get it to properly align with the road. Adding the following line of code before adding the rectangle to the map will do this Microsoft.Maps.SpatialMath.Geometry.rotate(rect, angle / 2); Here is a screenshot where I made the length longer so it's easier to see. The blue line on the left of the box is the road line segment that was used as a reference.

I tried calculating and using pixel-based headings rather than spatial headings. The difference was 0.003 degrees which wouldn't be noticeable visually, so no need to do that. I'm experimenting with snapping the center point to sidewalks as an optional feature (it seems like that might be a good option to have).
rbrundritt 18,686 Reputation points Microsoft Employee

2024-03-29T22:39:44.46+00:00

I found another bug. When calculating the closest path segment I have code var distance = Microsoft.Maps.SpatialMath.Geometry.distance(center, path[i], path[i + 1]); which is actually only calculating the distance to the first point of the segment and not the closest point on the segment. path[i+1] is actually being ignored. Wrapping these path points in an array fixes this issue and the code should be var distance = Microsoft.Maps.SpatialMath.Geometry.distance(center, [path[i], path[i + 1]]);

rbrundritt 18,686 Microsoft Employee

Got an improved version up and running that now also has the option to snap the center point to the sidewalk if there is one.

Here is a screenshot aligned with the sidewalk (fallbacks to road) but using the provided center point:

enter image description here

Here is a screenshot aligned with and snapped to the sidewalk:

enter image description here

Here is the source code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <style type='text/css'>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        #myMap {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .inputPanel {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: white;
            padding:10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="myMap"></div>

    <div class="inputPanel">
		<table>
			<tr>
				<td>Center:</td>
				<td><input type="text" id="coordTbx" value="47.674516, -122.125789"/></td>
			</tr>
			<tr>
				<td>Length:</td>
				<td><input type="number" id="lengthTbx" value="80" min="0"/> ft</td>
			</tr>
			<tr>
				<td>Width:</td>
				<td><input type="number" id="widthTbx" value="10" min="0"/> ft</td>
			</tr>
            <tr>
                <td>Snap to sidewalks:</td>
                <td><input type="checkbox" id="snapToSidewalks" checked="checked"/></td>
            </tr>
		</table>

        <input type="button" value="Calculate" onclick="calculate();"/>
	</div>

    <script type='text/javascript'>
        var map;

        var sideWalkHeadingTolerance = 5; //The tolerance in degrees for the heading of the sidewalk to be considered aligned with the road.

        var overpassTurboRoadQuery = `
            /*
                Look for roads close and walkways (footpaths, sidewalks, etc.) within a bounding box.
                Exclude footpaths that are crosswalks.
            */
            [out:json][timeout:25];
            // gather results
            (
                // query sidewalks
                way["footway"="sidewalk"]({{bbox}});

                // query part for: “highway=*”
                way["highway"]({{bbox}});
            );
            // print results
            out body;
            >;
            out skel qt;
        `;

        function loadMapScenario() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                zoom: 4
            });

            //Load the GeoJSON and Spatial math modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.SpatialMath']);
        }

        function calculate() {
            //Clear all data on the map.
            map.entities.clear();

            //Capture the input data.
            var center = Microsoft.Maps.Location.parseLatLong(document.getElementById('coordTbx').value);
            var lengthFt = parseFloat(document.getElementById('lengthTbx').value);
            var widthFt = parseFloat(document.getElementById('widthTbx').value);    
            
            //Add the center point to the map.
            var centerPin = new Microsoft.Maps.Pushpin(center);
            map.entities.push(centerPin);

            //Center the map.
            map.setView({ center: center, zoom: 18 });

            //Validate input
            if (isNaN(lengthFt) || isNaN(widthFt)) {
                alert('Please enter a valid number for the length and width.');
                return;
            }

            if(!center) {
                alert ('Invalid latitude, longitude value provided');
            }

            //Convert feet to meters.
            var lengthMeters = lengthFt * 0.3048;
            var widthMeters = widthFt * 0.3048;   
            
            //Get data from OSM.
            getOsmData(center, widthMeters, lengthMeters);
        }

        function getOsmData(center, widthMeters, lengthMeters) {

            //Overpass turbo requires a bounding box to be specified in the form of south,west,north,east. 0.0001 degrees is roughly 10 meters.
            var bbox = (center.latitude - 0.0001) + ',' + (center.longitude - 0.0001) + ',' + (center.latitude + 0.0001) + ',' + (center.longitude + 0.0001);

            //Create request for Overpass Turbo that retrieves road and sidewalk data.
            var query = cleanQuery(overpassTurboRoadQuery.replace(/\{\{bbox\}\}/gi, bbox));

            //Make a request to Overpass Turbo.
            fetch('https://overpass-api.de/api/interpreter', {
                method: 'POST', // *GET, POST, PUT, DELETE, etc.
                mode: 'cors', // no-cors, *cors, same-origin
                cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
                body: 'data=' + query
            }).then(x => x.json()).then(osm_data => {
                //Convert the OSM data to GeoJSON
                var data = osmtogeojson(osm_data);

                //Convert the GeoJSON data to Bing Maps objects.
                var shapes = Microsoft.Maps.GeoJson.read(data);

                //First calculate the closest road to the shape.
                var closestRoad, closestRoadDistance = Infinity;

                for (var i = 0; i < shapes.length; i++) {
                    if (shapes[i].metadata.footway !== 'sidewalk') {
                        var distance = Microsoft.Maps.SpatialMath.Geometry.distance(center, shapes[i]);

                        if (distance < closestRoadDistance) {
                            closestRoad = shapes[i];
                            closestRoadDistance = distance;
                        }
                    }
                }

                //Now look to see if there are any sidewalks in the area that have similar headings to the road.
                var closestSideWalk, closestSideWalkDistance = Infinity;
                var roadHeading = Microsoft.Maps.SpatialMath.getHeading(closestRoad.getLocations()[0], closestRoad.getLocations()[1]);

                for (var i = 0; i < shapes.length; i++) {
                    if (shapes[i].metadata.footway === 'sidewalk') {
                        var sideWalkHeading = Microsoft.Maps.SpatialMath.getHeading(shapes[i].getLocations()[0], shapes[i].getLocations()[1]);
                        var dh = Math.abs(roadHeading % 180 - sideWalkHeading % 180);

                        console.log(dh);

                        //Check to see if the sideWalkHeading is within the allowed tolerance of the road heading.
                        //Ensure to allow for the headings to be in opposite directions of each other.
                        if (dh <= sideWalkHeadingTolerance) {
                            var distance = Microsoft.Maps.SpatialMath.Geometry.distance(center, shapes[i]);

                            if (distance < closestSideWalkDistance) {
                                closestSideWalk = shapes[i];
                                closestSideWalkDistance = distance;
                            }
                        }
                    }
                }

                //If a sidewalk was found, use that as the closest shape.
                var closestShape = closestSideWalk || closestRoad;

                //Loop through the line segments in the closet shape and find the closest segment.
                var closestSegment, closestSegmentDistance = Infinity;
                
                var path = closestShape.getLocations();

                for (var i = 0; i < path.length - 1; i++) {
                    var distance = Microsoft.Maps.SpatialMath.Geometry.distance(center, [path[i], path[i + 1]]);
                    if (distance < closestSegmentDistance) {
                        closestSegment = [path[i], path[i + 1]];
                        closestSegmentDistance = distance;
                    }
                }     

                //Calculate the heading of the line segment.
                var heading = Microsoft.Maps.SpatialMath.getHeading(closestSegment[0], closestSegment[1]);

                //Optional. If the line is a sidewalk, snap the center point to it (assumes sidewalk is more accurate than the center information provided).
                if (closestSideWalk && document.getElementById('snapToSidewalks').checked) {
                    center = Microsoft.Maps.SpatialMath.Geometry.snapLocationsToShape(center, new Microsoft.Maps.Polyline(closestSegment));
                }

                //Calculate the distance from the center of the rectangle to each point.
                var radiusMeters = Math.sqrt(Math.pow(lengthMeters * 0.5, 2) + Math.pow(widthMeters * 0.5, 2));

                //Calculate the angle to the first point in the rectangle.
                var angleRadians = Math.atan2(widthMeters * 0.5, lengthMeters * 0.5);

                //Calculate the angle in degrees.
                var angle = normalizeHeading(angleRadians * 180 / Math.PI);

                //Calculate the heading of the first point in the rectangle.
                var heading1 = normalizeHeading(heading - angle);

                //Calculate the heading of the second point in the rectangle.
                var heading2 = normalizeHeading(heading1 + angle);

                //Calculate heading of the third point in the rectangle.
                var heading3 = normalizeHeading(heading1 + 180);

                //Calculate heading of the third point in the rectangle.
                var heading4 = normalizeHeading(heading2 + 180);

                //Calculate the points of a rectangle when unrotated.
                var points = [
                    Microsoft.Maps.SpatialMath.getDestination(center, heading1, radiusMeters),
                    Microsoft.Maps.SpatialMath.getDestination(center, heading2, radiusMeters),
                    Microsoft.Maps.SpatialMath.getDestination(center, heading3, radiusMeters),
                    Microsoft.Maps.SpatialMath.getDestination(center, heading4, radiusMeters)
                ];

                //CLose the rectangle polygon (first and last points should be the same).
                points.push(points[0]);

                //Rotate the points to match the heading of the road.
                //points = Microsoft.Maps.SpatialMath.Geometry.rotate(points, heading, center);

                //Create a polygon from the points.
                var rect = new Microsoft.Maps.Polygon(points, {
                    fillColor: 'rgba(0,0,255,0.5)',
                    strokeColor: 'blue'
                });

                //Need to rotate the polygon by half the angle as the angle points to a corner and should point to the edge of the rectangle.
                Microsoft.Maps.SpatialMath.Geometry.rotate(rect, angle / 2);

                //Add the polygon to the map.
                map.entities.push(rect);

            }, e => {
                aler('Unable to retrieve data from overpass.');
            });
        }

        function cleanQuery(query) {
            //Remove comments /* */ and //
            query = query.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '');

            //Remove new lines characters and surrounding whitespace.
            query = query.replace(/[\s\t]*\n[\s\t]*/gi, '');

            //Encode the query.
            return encodeURIComponent(query);
        }

        function normalizeHeading(heading) {
            //Make the heading between 0 and 360.
            heading = heading % 360;

            if(heading < 0){
                heading += 360;
            }

            return heading;
        }
    </script>

    <!-- Load a library that converts Overpass Turbo responses to GeoJSON. -->
    <script type="text/javascript" src="https://tyrasd.github.io/osmtogeojson/osmtogeojson.js"></script>

    <!-- Load the Bing Maps SDK -->
    <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?key=<YOUR_BING_MAPS_KEY>&callback=loadMapScenario"' async defer></script>
</body>
</html>

You can try this code out here: https://rbrundritt.azurewebsites.net/Demos/BingMaps/RoadAlignedRectangles.html

Balasaheb Molawade 136 Reputation points

2024-04-01T07:17:49.2433333+00:00

Hi Ricky,

Thanks for providing the detail information. It is very helpful. We are looking into this.

Thanks!
Balasaheb Molawade 136 Reputation points

2024-04-01T07:19:40.7066667+00:00

Hi Ricky,

Thank you for your response and code; it is very helpful. We are looking into this.

Thanks!
Balasaheb Molawade 136 Reputation points

2024-04-02T12:39:07.35+00:00

Hi Ricky,

We have checked the code, and it's working properly. However, one question : Is there any chance to start the polygon from a provided latitude/longitude point? In other words, can we specify the first point of the polygon using provided latitude/longitude coordinates.

Thanks!
rbrundritt 18,686 Reputation points Microsoft Employee

2024-04-02T15:25:39.5866667+00:00

Not sure I understand 100% what you are asking. You want to provided coordinate to represent one of the corners of rectangle instead of the center. For that we would need to know how the width/length are relative to that coordinate. Currently the width/length are split evenly on either side of the center position, but if for example the coordinate represented the top left corner, we would need to somehow know to make the rectangle right and below of that position. That would need to be a user input as the map wouldn't know the difference.
Balasaheb Molawade 136 Reputation points

2024-04-08T12:21:06.5366667+00:00

Hi Ricky,

Thanks for your response.

Yes, we want to plot a shape from a given point, i.e., it starts from there. It's not necessary to have one corner, but it will initiate from that point, similar to the example shown below.
rbrundritt 18,686 Reputation points Microsoft Employee

2024-04-08T15:55:27.61+00:00

So are you thinking the user specifies a coordinate and its "anchor point", like center, top left, top right, bottom left, bottom right (or north west, north east, south west, south east)? If so, once you have the road/sidewalk heading, you can calculate the relative center point based on the anchor, then use the same code in this sample.
Balasaheb Molawade 136 Reputation points

2024-04-11T12:07:00.2033333+00:00

Hi Ricky,

Thanks for your reply. We will check.

Sorry to bother you again. Another point has come up: if we provide different lengths and widths for the four sides — for example, one side has a length of 9 ft, another side has a length of 5 ft, one side has a width of 7 ft, and the other side has a width of 3 ft. Is it possible to draw a shape based on these four different sizes.

Thanks
rbrundritt 18,686 Reputation points Microsoft Employee

2024-04-11T15:25:49.0033333+00:00

Yes, I'm sure that could be done, it's just trigonometry at this point. You could start off with a rectangle using the max width/length to get the rotation heading, and then when calculating points, create a triangle to each corner with one side that's aligned with the rotation heading and the other two sides being half the width/length of the two edges that connect to the corner.
Balasaheb Molawade 136 Reputation points

2024-04-12T09:59:43.1766667+00:00

Hi Ricky,

Thank you for your response. We will attempt to implement it. If you have any sample code, could you please provide it.

Thanks!
Balasaheb Molawade 136 Reputation points

2024-04-18T06:59:49.84+00:00

Hi Ricky,

We are not getting the correct shape. If you have an example, could you please provide it.

Thanks!

rbrundritt 18,686 Microsoft Employee

I took a stab at it and got something working. I realized that since we are working with small distances that I could get away with assuming the initial position is the center, calculate the rectangle, then translate the position of the rectangle (x/y offset) to one of the corners accordingly. The math is a bit hard to follow and I'm certain that there are still improvements needed around aligning the angle with the road/sidewalk. In hindsight, it likely would have been easier to convert everything to pixels at a close zoom level and used regular 2D geometry rather than spherical spatial calculations. In any case, I updated the live demo, and here is the code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <style type='text/css'>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        #myMap {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .inputPanel {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: white;
            padding:10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="myMap"></div>

    <div class="inputPanel">
        <table>
            <tr>
                <td>Anchor Location:</td>
                <td><input type="text" id="coordTbx" value="47.674516, -122.125789" /></td>
            </tr>
            <tr>
                <td>Anchor Type:</td>
                <td>
                    <select id="anchorType">
                        <option value="center" selected="selected">Center</option>
                        <option value="nw">North West corner</option>
                        <option value="ne">North East corner</option>
                        <option value="sw">South West corner</option>
                        <option value="se">South East corner</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Length:</td>
                <td><input type="number" id="lengthTbx" value="80" min="0" /> ft</td>
            </tr>
            <tr>
                <td>Width:</td>
                <td><input type="number" id="widthTbx" value="10" min="0" /> ft</td>
            </tr>
            <tr>
                <td>Snap to sidewalks:</td>
                <td><input type="checkbox" id="snapToSidewalks" checked="checked" /></td>
            </tr>
        </table>

        <input type="button" value="Calculate" onclick="calculate();"/>
	</div>

    <script type='text/javascript'>
        var map;

        var sideWalkHeadingTolerance = 5; //The tolerance in degrees for the heading of the sidewalk to be considered aligned with the road.

        var overpassTurboRoadQuery = `
            /*
                Look for roads close and walkways (footpaths, sidewalks, etc.) within a bounding box.
                Exclude footpaths that are crosswalks.
            */
            [out:json][timeout:25];
            // gather results
            (
                // query sidewalks
                way["footway"="sidewalk"]({{bbox}});

                // query part for: “highway=*”
                way["highway"]({{bbox}});
            );
            // print results
            out body;
            >;
            out skel qt;
        `;

        function loadMapScenario() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                zoom: 4
            });

            //Load the GeoJSON and Spatial math modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.SpatialMath']);
        }

        function calculate() {
            //Clear all data on the map.
            map.entities.clear();

            //Capture the input data.
            var anchorPosition = Microsoft.Maps.Location.parseLatLong(document.getElementById('coordTbx').value);
            var lengthFt = parseFloat(document.getElementById('lengthTbx').value);
            var widthFt = parseFloat(document.getElementById('widthTbx').value);    
            
            //Add the anchor point to the map.
            var anchorPin = new Microsoft.Maps.Pushpin(anchorPosition);
            map.entities.push(anchorPin);

            //Center the map.
            map.setView({ center: anchorPosition, zoom: 18 });

            //Validate input
            if (isNaN(lengthFt) || isNaN(widthFt)) {
                alert('Please enter a valid number for the length and width.');
                return;
            }

            if (!anchorPosition) {
                alert ('Invalid latitude, longitude value provided');
            }

            //Convert feet to meters.
            var lengthMeters = lengthFt * 0.3048;
            var widthMeters = widthFt * 0.3048;   
            
            //Get data from OSM.
            getOsmData(anchorPosition, widthMeters, lengthMeters);
        }

        function getOsmData(anchorPosition, widthMeters, lengthMeters) {

            //Overpass turbo requires a bounding box to be specified in the form of south,west,north,east. 0.0001 degrees is roughly 10 meters.
            var bbox = (anchorPosition.latitude - 0.0001) + ',' + (anchorPosition.longitude - 0.0001) + ',' + (anchorPosition.latitude + 0.0001) + ',' + (anchorPosition.longitude + 0.0001);

            //Create request for Overpass Turbo that retrieves road and sidewalk data.
            var query = cleanQuery(overpassTurboRoadQuery.replace(/\{\{bbox\}\}/gi, bbox));

            //Make a request to Overpass Turbo.
            fetch('https://overpass-api.de/api/interpreter', {
                method: 'POST', // *GET, POST, PUT, DELETE, etc.
                mode: 'cors', // no-cors, *cors, same-origin
                cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
                body: 'data=' + query
            }).then(x => x.json()).then(osm_data => {
                //Convert the OSM data to GeoJSON
                var data = osmtogeojson(osm_data);

                //Convert the GeoJSON data to Bing Maps objects.
                var shapes = Microsoft.Maps.GeoJson.read(data);

                //First calculate the closest road to the shape.
                var closestRoad, closestRoadDistance = Infinity;

                for (var i = 0; i < shapes.length; i++) {
                    if (shapes[i].metadata.footway !== 'sidewalk') {
                        var distance = Microsoft.Maps.SpatialMath.Geometry.distance(anchorPosition, shapes[i]);

                        if (distance < closestRoadDistance) {
                            closestRoad = shapes[i];
                            closestRoadDistance = distance;
                        }
                    }
                }

                //Now look to see if there are any sidewalks in the area that have similar headings to the road.
                var closestSideWalk, closestSideWalkDistance = Infinity;
                var roadHeading = Microsoft.Maps.SpatialMath.getHeading(closestRoad.getLocations()[0], closestRoad.getLocations()[1]);

                for (var i = 0; i < shapes.length; i++) {
                    if (shapes[i].metadata.footway === 'sidewalk') {
                        var sideWalkHeading = Microsoft.Maps.SpatialMath.getHeading(shapes[i].getLocations()[0], shapes[i].getLocations()[1]);
                        var dh = Math.abs(roadHeading % 180 - sideWalkHeading % 180);

                        console.log(dh);

                        //Check to see if the sideWalkHeading is within the allowed tolerance of the road heading.
                        //Ensure to allow for the headings to be in opposite directions of each other.
                        if (dh <= sideWalkHeadingTolerance) {
                            var distance = Microsoft.Maps.SpatialMath.Geometry.distance(anchorPosition, shapes[i]);

                            if (distance < closestSideWalkDistance) {
                                closestSideWalk = shapes[i];
                                closestSideWalkDistance = distance;
                            }
                        }
                    }
                }

                //If a sidewalk was found, use that as the closest shape.
                var closestShape = closestSideWalk || closestRoad;

                //Loop through the line segments in the closet shape and find the closest segment.
                var closestSegment, closestSegmentDistance = Infinity;
                
                var path = closestShape.getLocations();

                for (var i = 0; i < path.length - 1; i++) {
                    var distance = Microsoft.Maps.SpatialMath.Geometry.distance(anchorPosition, [path[i], path[i + 1]]);
                    if (distance < closestSegmentDistance) {
                        closestSegment = [path[i], path[i + 1]];
                        closestSegmentDistance = distance;
                    }
                }     

                //Calculate the heading of the line segment.
                var heading = Microsoft.Maps.SpatialMath.getHeading(closestSegment[0], closestSegment[1]);

                //Optional. If the line is a sidewalk, snap the anchor position point to it (assumes sidewalk is more accurate than the anchor position information provided).
                if (closestSideWalk && document.getElementById('snapToSidewalks').checked) {
                    anchorPosition = Microsoft.Maps.SpatialMath.Geometry.snapLocationsToShape(anchorPosition, new Microsoft.Maps.Polyline(closestSegment));
                }

                //Calculate the distance from the anchor position of the rectangle to each point.
                var radiusMeters = Math.sqrt(Math.pow(lengthMeters * 0.5, 2) + Math.pow(widthMeters * 0.5, 2));

                //Calculate the angle to the first point in the rectangle.
                var angleRadians = Math.atan2(widthMeters * 0.5, lengthMeters * 0.5);

                //Calculate the angle in degrees.
                var angle = normalizeHeading(angleRadians * 180 / Math.PI);

                //Calculate the heading of the first point in the rectangle.
                var heading1 = normalizeHeading(heading - angle);

                //Calculate the heading of the second point in the rectangle.
                var heading2 = normalizeHeading(heading1 + angle);

                //Calculate heading of the third point in the rectangle.
                var heading3 = normalizeHeading(heading1 + 180);

                //Calculate heading of the third point in the rectangle.
                var heading4 = normalizeHeading(heading2 + 180);

                //Calculate the points of a rectangle when unrotated.
                var points = [
                    Microsoft.Maps.SpatialMath.getDestination(anchorPosition, heading1, radiusMeters),
                    Microsoft.Maps.SpatialMath.getDestination(anchorPosition, heading2, radiusMeters),
                    Microsoft.Maps.SpatialMath.getDestination(anchorPosition, heading3, radiusMeters),
                    Microsoft.Maps.SpatialMath.getDestination(anchorPosition, heading4, radiusMeters)
                ];

                //Close the rectangle polygon (first and last points should be the same).
                points.push(points[0]);

                //Create a polygon from the points.
                var rect = new Microsoft.Maps.Polygon(points, {
                    fillColor: 'rgba(0,0,255,0.5)',
                    strokeColor: 'blue'
                });               

                //Need to rotate the polygon by half the angle as the angle points to a corner and should point to the edge of the rectangle.
                Microsoft.Maps.SpatialMath.Geometry.rotate(rect, angle / 2);

                //Translate the points to the anchor type. Calculate the absolute offset of the center of the rectangle.
                var anchorType = getSelectValue('anchorType');

                if (anchorType !== 'center') {
                    var h = heading1;

                    switch (anchorType) {
                        case 'ne':
                            h = heading2;
                            break;
                        case 'sw':
                            h = heading4;
                            break;
                        case 'se':
                            h = heading3;
                            break;
                    }

                    var yOffset = Math.abs(radiusMeters / Math.cos((h + angle / 2) * Math.PI / 180));
                    var xOffset = Math.sqrt(Math.abs(radiusMeters * radiusMeters - yOffset * yOffset));

                    if (anchorType == 'nw' || anchorType == 'ne') {
                        xOffset = -xOffset;
                        yOffset = -yOffset;
                    }

                    if (xOffset != 0 || yOffset != 0) {
                        points = rect.getLocations();

                        for (var i = 0; i < points.length; i++) {
                            var offsetLongitude = Microsoft.Maps.SpatialMath.getDestination(points[i], 90, xOffset).longitude;
                            var offsetLatitude = Microsoft.Maps.SpatialMath.getDestination(points[i], 0, yOffset).latitude;
                            points[i] = new Microsoft.Maps.Location(offsetLatitude, offsetLongitude);
                        }

                        rect.setLocations(points);
                    }
                }

                //Add the polygon to the map.
                map.entities.push(rect);

            }, e => {
                aler('Unable to retrieve data from overpass.');
            });
        }

        function cleanQuery(query) {
            //Remove comments /* */ and //
            query = query.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '');

            //Remove new lines characters and surrounding whitespace.
            query = query.replace(/[\s\t]*\n[\s\t]*/gi, '');

            //Encode the query.
            return encodeURIComponent(query);
        }

        function normalizeHeading(heading) {
            //Make the heading between 0 and 360.
            heading = heading % 360;

            if(heading < 0){
                heading += 360;
            }

            return heading;
        }

        function getSelectValue(id) {
            var elm = document.getElementById(id);
            return elm.options[elm.selectedIndex].value;
        }
    </script>

    <!-- Load a library that converts Overpass Turbo responses to GeoJSON. -->
    <script type="text/javascript" src="https://tyrasd.github.io/osmtogeojson/osmtogeojson.js"></script>

    <!-- Load the Bing Maps SDK -->
    <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?key=<YOUR_BING_MAPS_KEY>&callback=loadMapScenario"' async defer></script>
</body>
</html>

Balasaheb Molawade 136 Reputation points

2024-04-22T10:13:47.47+00:00

Hi Ricky,

Thanks for your response. We really appreciate it. We will check the updated sample.

Thanks!

Share via

Draw area on Map based on square foot.

1 answer

Your answer