Angular 14 Map Component
Budget: $250 – $750 USD
I need a component built in Angular 14 which uses Google Maps to allow the user to draw multiple polygons (zones) on the map. The map must initialise near to their location. The user must be able add up to a limited number of polygons (configurable), with a limited number of vertices (configurable) and a maximum area each (configurable). The polygons will be loaded and saved via the importing database, thus for tracking, loaded polygons should retain their IDs. New polygons should be coloured differently to existing polygons until they are saved.
A list of the user’s polygons should be displayed beneath the map, so that when selected the map view can move to the polygon’s location. Users should be able to use this list to remove polygons from the map.
The component must allow the following inputs:
• Point limit per polygon.
• Area limitation per polygon
• Number of polygons limitation
• Central coordinates of the map
• Input for existing polygons with their numerical IDs
• API keys as required (this may be part of the declaring module's providers)
The component must allow the following outputs:
• A save event which passes the state of all the current polygons.
Polygon forms should be represented by a list of coordinates (longitude, latitude) in anti-clockwise order around the perimeter. Users should not be allowed polygons which have crossed lines. The first and last coordinates should be identical to indicate the closed loop. Closing the loop should be easy and/or intuitive.
The component must be responsive (look good and work on mobile and desktop). On a mobile device is should not stop the user from scrolling the page (such as, use "two-fingers to move the map").
Language should be in Spanish, if not customisable.
In terms of styling, the destination website is build built with PrimeNG and PrimeFlex. We would prefer not to include excessive frameworks or packages beyond this as page load time is important to us.
The component should ideally by delivered in a separate angular module. The project must be delivered with source code for incorporation into an existing website.
A list of the user’s polygons should be displayed beneath the map, so that when selected the map view can move to the polygon’s location. Users should be able to use this list to remove polygons from the map.
The component must allow the following inputs:
• Point limit per polygon.
• Area limitation per polygon
• Number of polygons limitation
• Central coordinates of the map
• Input for existing polygons with their numerical IDs
• API keys as required (this may be part of the declaring module's providers)
The component must allow the following outputs:
• A save event which passes the state of all the current polygons.
Polygon forms should be represented by a list of coordinates (longitude, latitude) in anti-clockwise order around the perimeter. Users should not be allowed polygons which have crossed lines. The first and last coordinates should be identical to indicate the closed loop. Closing the loop should be easy and/or intuitive.
The component must be responsive (look good and work on mobile and desktop). On a mobile device is should not stop the user from scrolling the page (such as, use "two-fingers to move the map").
Language should be in Spanish, if not customisable.
In terms of styling, the destination website is build built with PrimeNG and PrimeFlex. We would prefer not to include excessive frameworks or packages beyond this as page load time is important to us.
The component should ideally by delivered in a separate angular module. The project must be delivered with source code for incorporation into an existing website.