mapbox test: choose markers or features

src/maps/Mapbox.js

@@ -67,21 +67,33 @@ export default class Mapbox extends React.Component{
 
   render() {
     let testMarkers = this.props.markers
+    let testMarkerType = this.props.markerType
     let markers = <></>
     if (testMarkers){
-      markers = testMarkers.map((pos, idx) =>
-        <Feature
-          coordinates={pos}
-          key={idx}
-        />
-//        <Marker
-//          coordinates={pos}
-//          key={idx}
-//          anchor="bottom">
-//          <img src={markerIcon}/>
-//        </Marker>
-      )
-    }else{
+      if (testMarkerType === "feature"){
+        markers = (
+          <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15"}}>
+            {testMarkers.map((pos, idx) =>
+              <Feature
+                coordinates={pos}
+                key={idx}
+              />
+            )}
+          </Layer>
+        )
+      } else {
+        markers = testMarkers.map((pos, idx) =>
+          <Marker
+            coordinates={pos}
+            key={idx}
+            anchor="bottom"
+          >
+            <svg height={15} viewBox="0 0 24 24" style={{fill: "#343a40"}}>
+              <path d={markerIcon} />
+            </svg>
+          </Marker>
+      )}
+    } else {
       markers = this.state.path.map((pos, idx) =>
         <Feature
           coordinates={pos}
@@ -137,9 +149,7 @@ export default class Mapbox extends React.Component{
             />
           </Source>
 
-            <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15" }}>
-              {markers}
-            </Layer>
+            {markers}
 
             <ZoomControl position={"top-right"}/>
             <ScaleControl position={"bottom-right"}/>

src/test/Mapboxes.js

@@ -19,7 +19,10 @@ import {
 export default class MapGLs extends React.Component{
   constructor(props) {
     super(props)
-    this.state = mapTestState
+    this.state = {
+      ...mapTestState,
+      markerType: "feature"
+    }
 
     this.measurementsDiv = React.createRef()
     this.markerInfoDiv = React.createRef()
@@ -37,6 +40,13 @@ export default class MapGLs extends React.Component{
     didMountSwitchLatLng(this, true)
   }
 
+  handleRadioChange = (event) => {
+    this.setState({
+      markerType: event.target.value
+    })
+    this.measurementsDiv.current.innerHTML = ""
+  }
+
   render(){
     return (
       <div className="mapTestContainer">
@@ -46,6 +56,12 @@ export default class MapGLs extends React.Component{
           <div ref={this.markerInfoDiv}>
             <span>{this.state.currStep} steps</span>
           </div>
+
+          <input type="radio" value="feature" id="feature" onChange={this.handleRadioChange} name="markerType" defaultChecked/>
+          <label htmlFor="feature" className="ml-2 mr-2">feature</label>
+          <input type="radio" value="marker" id="marker" onChange={this.handleRadioChange} name="markerType"/>
+          <label htmlFor="marker"className="ml-2">marker</label><br/>
+
           <span>Number of Markers: {this.state.noOfMarkers}</span><br/>
           <Input type="text" onChange={(e) => this.setNoOfMarkers(e, true)} value={this.state.noOfMarkers}/>
 
@@ -55,7 +71,7 @@ export default class MapGLs extends React.Component{
 
         <div className="mapTest">
           <Profiler id="mapbox" onRender={measureTime(this)}>
-            <Mapbox markers={this.state.markers}/>
+            <Mapbox markers={this.state.markers} markerType={this.state.markerType}/>
           </Profiler>
         </div>