title: how to different markers for different data set in mapbox
body: <p>I am using map box api with react, I get 2 kind of data set from backend, one with let's say bike's parking points and another is data set is places where accident happened, I want to display both data set with different markers/icons in mapbox, how should I do that?</p>
  <p>currently to display single data set I am using below code.</p>
  <pre><code>import React, { useState, useEffect, useRef } from &quot;react&quot;;
  import { useDispatch, useSelector } from 'react-redux';
  import mapboxgl from 'mapbox-gl';
  import {getBikeInfo, mapDetails} from  './features/counter/getInfo/getDetails.js'
  &lt;link href=&quot;https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css&quot; rel=&quot;stylesheet&quot;&gt;&lt;/link&gt;
  
  
  function App() {
    const dispatch = useDispatch();
    const [dataLoaded, setDataLoaded] = useState(false);
    const dataToDisplay = useSelector(mapDetails);
    mapboxgl.accessToken = 'pk.eyJ1IjoidmloYW5nMTYiLCJhIjoiY2ttOHowc2ZhMWN2OTJvcXJ0dGpiY21pNyJ9.hK5Wxwby89E7tKWoBoY5bg';
    const mapContainer = useRef(null);
    let styles = {
      'display' : 'none'
    }
    useEffect(() =&gt; {
     // dispatch(getBikeInfo())
      var map = new mapboxgl.Map({
        container: mapContainer.current,
        style: 'mapbox://styles/mapbox/light-v10',
        center: [-96, 37.8],
        zoom: 3
      });
  
      map.on('load', function () {
        // Add an image to use as a custom marker
        map.loadImage(
          'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
          function (error, image) {
            if (error) throw error;
            map.addImage('custom-marker', image);
            // Add a GeoJSON source with 2 points
            map.addSource('points', {
              'type': 'geojson',
              'data': {
                'type': 'FeatureCollection',
                'features': dataToDisplay //list of all coordinates along require data 
              }
            });
  
            // Add a symbol layer
            map.addLayer({
              'id': 'points',
              'type': 'symbol',
              'source': 'points',
              'layout': {
                'icon-image': 'custom-marker',
                // get the title name from the source's &quot;title&quot; property
                'text-field': ['get', 'title'],
                'text-font': [
                  'Open Sans Semibold',
                  'Arial Unicode MS Bold'
                ],
                'text-offset': [0, 1.25],
                'text-anchor': 'top'
              }
            });
          }
        );
      });
      setDataLoaded(true);
    }, [dataToDisplay]);
    
    useEffect(() =&gt; {
      dispatch(getBikeInfo())
    },[])
  
    return (
      &lt;div className=&quot;district-map-wrapper&quot; style={dataLoaded ? undefined : {display: 'none'}}&gt;
              &lt;div id=&quot;districtDetailMap&quot; className=&quot;map&quot;&gt;
                  &lt;div style={{ height: &quot;100%&quot; }} ref={mapContainer}&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
     
    );
  }
  
  export default App;
  </code></pre>
  <p>below is sample data to populate</p>
  <pre><code>type: &quot;Feature&quot;,
            geometry: {
              type: &quot;Point&quot;,
          coordinates: [
             -74.04281705617905,
            40.71458403535893,
           
          ]
        },
        properties: {
          title: 'some field'
        }
  </code></pre>
  <p>Solution:
  based on @tylerban's answer I have update my code like this:</p>
  <pre><code>map.on('load', function () {
        // Add an image to use as a custom marker
        loadDataFromPara( dataToDisplay, 'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', 'bikeLocation', 'bikePoints', 'bike-marker')
        loadDataFromPara( collisionInfo, marker, 'collisionLocation', 'collisionPoints', 'collision-marker')
  
      });
      setDataLoaded(true);
    function loadDataFromPara( data, image1, sourceName, layerName, imageMarker ){
        map.loadImage(
          image1,
          function (error, image) {
            if (error) throw error;
            map.addImage(imageMarker, image);
            // Add a GeoJSON source with 2 points
            map.addSource(sourceName, {
              'type': 'geojson',
              'data': {
                'type': 'FeatureCollection',
                'features': data
              }
            });
  
            // Add a symbol layer
            map.addLayer({
              'id': layerName,
              'type': 'symbol',
              'source': sourceName,
              'icon-allow-overlap': true,
              'layout': {
                'icon-image': imageMarker,
                // get the title name from the source's &quot;title&quot; property
                'text-field': ['get', 'title'],
                'icon-allow-overlap': true,
                'text-font': [
                  'Open Sans Semibold',
                  'Arial Unicode MS Bold'
                ],
                'text-offset': [0, 1.25],
                'text-anchor': 'top'
              }
            });
  
  
           
          }
        );
      }
  </code></pre>