title: How to map JSON data graphically on a Leaflet map?
body: <p>I want to use the Citybik.es API (<a href="http://api.citybik.es/" rel="nofollow noreferrer">http://api.citybik.es/</a>) to show data on a Leaflet map.</p>
  
  <p><strong>How do implement this data on the map from JSON?</strong> I am already fetching information from the API inside a <code>componentDidMount()</code>, but I don't have a clue about putting this data into a map. </p>
  
  <p>The response looks something like this:</p>
  
  <pre><code>{
    "networks": [
  {
    "company": [
      "Bike U Sp. z o.o."
    ], 
    "href": "/v2/networks/bbbike", 
    "id": "bbbike", 
    "location": {
      "city": "Bielsko-Bia\u0142a", 
      "country": "PL", 
      "latitude": 49.8225, 
      "longitude": 19.044444
    }, 
    "name": "BBBike"
  }, 
  {
    "company": [
      "PBSC", 
      "Alta Bicycle Share, Inc"
    ], 
    "href": "/v2/networks/melbourne-bike-share", 
    "id": "melbourne-bike-share", 
    "location": {
      "city": "Melbourne", 
      "country": "AU", 
      "latitude": -37.814107, 
      "longitude": 144.96328
    }, 
    "name": "Melbourne Bike Share"
  }
  }
  </code></pre>
  
  <p>Thanks for the help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import L from 'leaflet';
  import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
  
  // code for map marker icon
  var myIcon = L.icon({
      iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=',
      iconSize: [25, 41],
      iconAnchor: [12.5, 41],
      popupAnchor: [0, -41]
  });
  
  class App extends Component {
      state = {
          location: {
              lat: 51.505,
              lng: -0.09,
          },
          haveUsersLocation: false,
          zoom: 2,
          networks: null
      }
  
      //lifecycle method to get the user's current position(if they so desire).
      componentDidMount() {
  
          fetch('https://api.citybik.es/v2/networks')
          .then(res =&gt; res.json())
          .then(response =&gt; {
              console.log("response", response);
              console.log(response.networks)
              const networkData = response.networks
              const networkList = networkData.map((data) =&gt; {
                  console.log(data);
              })
      })
  
  
          navigator.geolocation.getCurrentPosition((position) =&gt; {
              this.setState({
                 location: {
                     lat: position.coords.latitude,
                     lng: position.coords.longitude
                 },
                 haveUsersLocation: true,
                 zoom: 13
              });
          }, () =&gt; {
              console.log('Uops! The user didnt give its location!');
              fetch('https://ipapi.co/json')
              .then(res =&gt; res.json())
              .then(location =&gt; {
                  this.setState({
                      location: {
                          lat: location.latitude,
                          lng: location.longitude
                      },
                      haveUsersLocation: true,
                      zoom: 13
                   });
              })
          });
      }
  
  
      render() {
          const position = [this.state.location.lat, this.state.location.lng]
          return (
              &lt;Map className="map" center={position} zoom={this.state.zoom}&gt;
                  &lt;TileLayer
                      attribution="&amp;amp;copy &lt;a href=&amp;quot;http://osm.org/copyright&amp;quot;&gt;OpenStreetMap&lt;/a&gt; contributors"
                      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  /&gt;
                  {
                      this.state.haveUsersLocation ? 
                      &lt;Marker
                          position={position}
                          icon={myIcon}&gt;
                      &lt;Popup&gt;
                          A pretty CSS3 popup. &lt;br /&gt; Easily customizable.
                      &lt;/Popup&gt;
                  &lt;/Marker&gt; : ''
                  }
              &lt;/Map&gt;
          )
      }
  }
  
  ReactDOM.render(&lt;App/&gt;,
      document.getElementById('root')
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin: 0px;
      width: 100vw;
      height: 100vh;
  }
  
  #root {
      height: 100%;
  }
  
  .map {
      height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" rel="stylesheet"/&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
  
      &lt;title&gt;Leaflet map&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>