Interactive geo map React component
Budget: $3,000 – $5,000 CAD
Hello! I am looking for a talented React developer to create an interactive geo map component for me. Azure Maps or ArcGIS's map viewer are our preference. The functional specs are the following (the screenshots are missing, we can provide them later to potential candidates):
1. Source of data
The data will be in the form of files in the format GeoJson and available in a subfolder of the “public” folder of the web application. The “FeatureCollection” object will integrate certain metadata independent of the GeoJson format, including the name of the graphic layer.
Each GeoJson file present in the subfolder represents a graphic layer.
GeoJson files can also come from a drag and drop.
2. Representation of linear infrastructures
All “features” (in the sense of GeoJson) having the property “infra_type” = “linear” will be represented as the curves in blue below. The visibility and thickness of the line remains constant and is not affected by the zoom.
It should be possible to select these “features” one by one. When the mouse passes over a “feature” or if it is selected, it must have its line thickness doubled and a tooltip appears to display its name (“label” property).
A feature deselects only when the user clicks anywhere on the map including the feature itself. The React state variable that registers the selection or mouseover will come from the input variables (will not be local to the component).
3. Representation of point infrastructures
All “features” having the property “infra_type”=”dot” will be represented by an icon like the traffic light below. The “icon” property informs which icon from the icon subfolder should be used. Its orientation and scale remain unchanged.
They must be visible only from the last 3 zoom levels.
It should be possible to select these “features” one by one. When the mouse passes over a “feature”, a tooltip appears to display its name (“label” property).
A feature deselects only when the user clicks anywhere on the map including the feature itself. The React state variable that registers the selection or mouseover will come from the input variables (will not be local to the component).
4. Representation of surfaces
All “features” having the property “infra_type”=”surface” will be represented by a closed polygon like the docks below. The “color” property tells which fill color should be used.
They must be visible at all zoom levels.
It should be possible to select these “features” one by one. When the mouse passes over a “feature” or if it is selected, this one must have its opacity set to 1 and a tooltip appears to display its name (“label” property).
A feature deselects only when the user clicks anywhere on the map including the feature itself. The React state variable that registers the selection or mouseover will come from the input variables (will not be local to the component).
5. Legends and graphics layer manager
Overlaid on the map, there will be an icon at the top right.
By clicking on it, a pane (as shown below) appears. These characteristics:
In 1 a drag and drop area allows you to dynamically load graphic layers.
In 2 a dynamic layer can be deleted.
In 3 a static layer (from the application's static resources) that cannot be deleted.
The list of layers is equipped with a scroll bar.
For each layer item, 3 icon buttons:
eye / crossed eye: show / hide the layer
color chip: displays the current color of the layer and allows you to change the color by clicking on it
basket: allows to delete the layer (dynamic layers only)
It should also be possible to reorder items in the list, which should also be reflected in the display order of the layers on the map.
Click the layer icon again and this shutter retracts.
6. Ungrouped representation
There will be a list type state variable which will contain the details of the projects. These details will contain a “geometry” field which can be of “undefined” value or contain an array of coordinates representing the limits of the project.
This coordinate array should be used to create a filled polygon in the map. The edges of the polygon as well as the filling will have the color associated with the status of the project. The fill will have an opacity of 0.5.
Also, a tag with the name of the project is centered on the centroid of the corresponding polygon. This tag will have a detour with rounded corners and black edges.
The project can be selected in the map by clicking on this tag. When the project is selected, the tag is filled with the color associated with the project.
Also, when selected, a panel appears showing quick details like number of users, status and volume of activity in a bar chart.
A project only deselects when the user clicks anywhere on the map including the project itself. The React state variable that registers the selection or mouseover will come from the input variables.
7. Grouped representation
When the distance between projects is less than the constant “clusterRadius=45”, the objects are grouped in a single marker on the map. This marker indicates the number of projects contained in the group. If a project is contained in one of these groups, its tag is not displayed.
8. Editing project boundaries
When a project isselected, the panel that appears contains an “EDIT” button to edit the polygon representing the project boundaries.
By clicking on “EDIT”, polygon editing tools should open and prompt the user to edit the existing polygon or add a polygon if the project has no geometry.
When the user considers that the polygon is complete, he has the choice to click on the “Save” button or, if necessary, on the “Cancel” button. This might look like the interface as shown below.
When the user clicks on “Save”, a state variable (made available in the entries) will be modified and the editing interface disappears. A click on “Cancel” leaves the editing interface without modifying anything.
8. Selection and overview of a project
When the “selected” or “hovered” variable field of a Project object (contained in a React state variable) is equal to “true”, the map should display an animated concentric waves effect (“Ripple effect”) between the basemap and the project polygon. When these properties are equal to “false”, this effect disappears.
9. Traveling project to project
When the “selected” variable field of a Project object (contained in a React state variable) equals “true”, the map should refocus on that project with an animation of the camera position from the position from the camera to the newly selected project. The travel time should last about 1 second.
Only Functional testing is needed.
1. Source of data
The data will be in the form of files in the format GeoJson and available in a subfolder of the “public” folder of the web application. The “FeatureCollection” object will integrate certain metadata independent of the GeoJson format, including the name of the graphic layer.
Each GeoJson file present in the subfolder represents a graphic layer.
GeoJson files can also come from a drag and drop.
2. Representation of linear infrastructures
All “features” (in the sense of GeoJson) having the property “infra_type” = “linear” will be represented as the curves in blue below. The visibility and thickness of the line remains constant and is not affected by the zoom.
It should be possible to select these “features” one by one. When the mouse passes over a “feature” or if it is selected, it must have its line thickness doubled and a tooltip appears to display its name (“label” property).
A feature deselects only when the user clicks anywhere on the map including the feature itself. The React state variable that registers the selection or mouseover will come from the input variables (will not be local to the component).
3. Representation of point infrastructures
All “features” having the property “infra_type”=”dot” will be represented by an icon like the traffic light below. The “icon” property informs which icon from the icon subfolder should be used. Its orientation and scale remain unchanged.
They must be visible only from the last 3 zoom levels.
It should be possible to select these “features” one by one. When the mouse passes over a “feature”, a tooltip appears to display its name (“label” property).
A feature deselects only when the user clicks anywhere on the map including the feature itself. The React state variable that registers the selection or mouseover will come from the input variables (will not be local to the component).
4. Representation of surfaces
All “features” having the property “infra_type”=”surface” will be represented by a closed polygon like the docks below. The “color” property tells which fill color should be used.
They must be visible at all zoom levels.
It should be possible to select these “features” one by one. When the mouse passes over a “feature” or if it is selected, this one must have its opacity set to 1 and a tooltip appears to display its name (“label” property).
A feature deselects only when the user clicks anywhere on the map including the feature itself. The React state variable that registers the selection or mouseover will come from the input variables (will not be local to the component).
5. Legends and graphics layer manager
Overlaid on the map, there will be an icon at the top right.
By clicking on it, a pane (as shown below) appears. These characteristics:
In 1 a drag and drop area allows you to dynamically load graphic layers.
In 2 a dynamic layer can be deleted.
In 3 a static layer (from the application's static resources) that cannot be deleted.
The list of layers is equipped with a scroll bar.
For each layer item, 3 icon buttons:
eye / crossed eye: show / hide the layer
color chip: displays the current color of the layer and allows you to change the color by clicking on it
basket: allows to delete the layer (dynamic layers only)
It should also be possible to reorder items in the list, which should also be reflected in the display order of the layers on the map.
Click the layer icon again and this shutter retracts.
6. Ungrouped representation
There will be a list type state variable which will contain the details of the projects. These details will contain a “geometry” field which can be of “undefined” value or contain an array of coordinates representing the limits of the project.
This coordinate array should be used to create a filled polygon in the map. The edges of the polygon as well as the filling will have the color associated with the status of the project. The fill will have an opacity of 0.5.
Also, a tag with the name of the project is centered on the centroid of the corresponding polygon. This tag will have a detour with rounded corners and black edges.
The project can be selected in the map by clicking on this tag. When the project is selected, the tag is filled with the color associated with the project.
Also, when selected, a panel appears showing quick details like number of users, status and volume of activity in a bar chart.
A project only deselects when the user clicks anywhere on the map including the project itself. The React state variable that registers the selection or mouseover will come from the input variables.
7. Grouped representation
When the distance between projects is less than the constant “clusterRadius=45”, the objects are grouped in a single marker on the map. This marker indicates the number of projects contained in the group. If a project is contained in one of these groups, its tag is not displayed.
8. Editing project boundaries
When a project isselected, the panel that appears contains an “EDIT” button to edit the polygon representing the project boundaries.
By clicking on “EDIT”, polygon editing tools should open and prompt the user to edit the existing polygon or add a polygon if the project has no geometry.
When the user considers that the polygon is complete, he has the choice to click on the “Save” button or, if necessary, on the “Cancel” button. This might look like the interface as shown below.
When the user clicks on “Save”, a state variable (made available in the entries) will be modified and the editing interface disappears. A click on “Cancel” leaves the editing interface without modifying anything.
8. Selection and overview of a project
When the “selected” or “hovered” variable field of a Project object (contained in a React state variable) is equal to “true”, the map should display an animated concentric waves effect (“Ripple effect”) between the basemap and the project polygon. When these properties are equal to “false”, this effect disappears.
9. Traveling project to project
When the “selected” variable field of a Project object (contained in a React state variable) equals “true”, the map should refocus on that project with an animation of the camera position from the position from the camera to the newly selected project. The travel time should last about 1 second.
Only Functional testing is needed.
Related categories:
Cartography & Maps
Geolocation
React.js
Typescript
Geographical Information System (GIS)
ArcMap
ArcGIS