Bug #2559
Google Polygon from What Three Words
Description
We have to use what3words to create polygons in Google Maps via APIs.
This is a two-step process because what3words natively represents specific 3m x 3m square coordinate points, not multi-point shapes.
To build a polygon, we must first convert individual what3words addresses into GPS coordinates using the what3words Public API.
Once you have compiled these coordinates, you pass them into the Google Maps JavaScript API to draw the polygon on your map.
Step-by-Step Implementation Workflow
1. Gather Your what3words PointsIdentify the specific vertices (corners) of your desired polygon using what3words addresses
(e.g., ///filled.count.soap, ///soap.clubs.poet, ///tribes.cable.grant).
2. Convert Addresses to Coordinates
Iterate through your list of 3-word addresses and send a request to the what3words convert-to-coordinates endpoint. You can do this using standard HTTP requests or via official libraries like the what3words JavaScript API Wrapper.Example API Request:httpGET https://what3words.com
Example JSON Response:
json{
"coordinates": {
"lng": -0.195543,
"lat": 51.520847
}
}
3. Construct the Polygon in Google Maps
Collect the returned lat and lng coordinate pairs into an array. Pass this array into the google.maps.
Polygon object to render the shape on your map interface. Note that the Google Maps API automatically connects the last coordinate back to the first point to close the shape.
Example JavaScript Implementation:
javascript// Array compiled from your what3words API conversion responses
const polygonCoords = [
{ lat: 51.520847, lng: -0.195543 },
{ lat: 51.521234, lng: -0.194456 },
{ lat: 51.520112, lng: -0.193345 }
];
// Constructing the polygon using Google Maps API
const areaPolygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
areaPolygon.setMap(map);
This should be created in maps of thebundinicorner@gmail.com pw D0gh0use1$ with the results being shown on parks.bundini.co.uk
History
Updated by Ahmed Saeed 7 days ago
- Status changed from New to In Progress
- Assignee changed from Ahmad Aslam to stephen koepplinger
- % Done changed from 0 to 20
- Estimated time set to 3.00 h
Hi Stephen
I make a design of parks.bundini.co.uk . I read you requirements and according to that for now i make that UI . Please check that complete design and logic if you approve that we continue to complete this fucntionality . And if that is not according to you requirement then we will change it according to that .
Please verify that Design and Logic.....
In that design in homepage you see a Button of " Add a Park " inside the navbar.Step 1:
When you click on that a page opens in which the user can create his " new park " in which they write the name short des and the boundry points of the park through what3words and save the park.
Step 2 :
When the user again go to the homepage on the hero section you see the Button of " Browse Parks " when the users click on that on the same page you see all the parks list which is created by the users .
Step 3:
When user click on that park which they created then a new page opens inside that you see the three buttons "Add Garden" , "Add Bed" , "Pin a Plant " .
Step 4 :
Inside that same page their is a section "Boundary & plant map " in which the map is display and inside that you garden , your bed and yours pin plants is display inside that map .
Step 5 :
When user create a new garden inside that park they click on the Add Garden button and add their garden in which the garden name , short des and the boundry points of garden inside that .
Step 6 :
The Garden is created and when you click on the Add Bed a new page opens inside that the user select his garden first after that they created his bed inside that garden .
Step 7:
When the Bed is created after that user click on Pin a Plant after that i new page open then inside that user add the bed first which they created then they added new plants inside that Bed.
Note:: According to that the user needs 9 3-word addresses for the Park ,Garden , Bed , Plants each use 3 of them to mark the coordinates through boundry points.