react-leaflet#CircleMarker JavaScript Examples

The following examples show how to use react-leaflet#CircleMarker. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DeathMarkers.js    From gatsby-map with MIT License 5 votes vote down vote up 
DeathMarkers = ({ loadTotal, onClick }) => {
  const [clicked, setClicked] = useState(false)

  const data = useStaticQuery(graphql`
    query {
      allTimeSeriesConfimedConfirmedCsv {
        edges {
          node {
            id
            Region
            Display_Name
            Lat
            Long
            Region_Total
            Region_Deaths
          }
        }
      }
    }
  `)

  const edges = data.allTimeSeriesConfimedConfirmedCsv.edges

  const getBubble = confirmed => {
    let color
    let number = confirmed
    let radius

    if (confirmed > 0) {
      color = colors.black
    }

    if (number == 1) {
      radius = 5
    } else if (number < 10) {
      radius = 8
    } else if (number < 25) {
      radius = 12
    } else if (number < 50) {
      radius = 16
    } else if (number < 80) {
      radius = 20
    } else if (number < 100) {
      radius = 22
    } else if (number >= 100) {
      radius = 27
    }

    return { color, radius }
  }

  return edges.map(edge => {
    const region = edge.node

    if (region.Region_Deaths > 0) {
      const { color, radius } = getBubble(region.Region_Deaths)
      return (
        <CircleMarker
          key={region.id}
          radius={radius}
          color={color}
          stroke={false}
          center={[region.Lat, region.Long]}
          fillOpacity={0.8}
          onClick={() => onClick(region)}
        ></CircleMarker>
      )
    }
  })
}
Example #2
Source File: InitiativeMarkers.js    From gatsby-map with MIT License 5 votes vote down vote up 
InitiativeMarkers = ({ loadTotal, onClick }) => {
  const [active, setActive] = useState(false)

  const data = useStaticQuery(graphql`
    query {
      allInitiativesCsv {
        edges {
          node {
            id
            Namn
            Latitud
            Longitud
            Twitter
            Involverade
            Instagram
            Hemsida
            Facebook
            Beskrivning
            Mejl
            Beh_ver
            Annan_l_nk
          }
        }
      }
    }
  `)

  const edges = data.allInitiativesCsv.edges

  return edges.map(edge => {
    const initiative = edge.node

    if (initiative) {
      return (
        <CircleMarker
          key={initiative.id}
          radius={20}
          color={colors.initiatives}
          stroke={false}
          center={[initiative.Latitud, initiative.Longitud]}
          fillOpacity={active === initiative.id ? 1 : 0.5}
          onClick={() => {
            onClick(initiative)
            setActive(initiative.id)
          }}
        ></CircleMarker>
      )
    }
  })
}
Example #3
Source File: Markers.js    From gatsby-map with MIT License 4 votes vote down vote up 
Markers = ({ onClick }) => {
  const [active, setActive] = useState(false)

  const data = useStaticQuery(graphql`
    query {
      allTimeSeriesConfimedConfirmedCsv {
        edges {
          node {
            id
            Region
            Display_Name
            Population
            Lat
            Long
            Region_Total
            Region_Deaths
            Hospital_Total
          }
        }
      }
    }
  `)

  const edges = data.allTimeSeriesConfimedConfirmedCsv.edges

  let maxRegionConf = 0
  let maxRegionPop = 0
  let maxSweDeathRate = 0

  for (let edge in edges) {
    let conf = edges[edge].node.Region_Total
    let pop = edges[edge].node.Population

    if (conf > maxRegionConf) {
      maxRegionConf = conf
    }

    if (pop > maxRegionPop) {
      maxRegionPop = pop
    }

    let dr = (edges[edge].node.Region_Deaths / pop) * 100000

    if (dr > maxSweDeathRate) {
      maxSweDeathRate = dr
    }
  }

  const getBubble = (confirmed, deaths, population) => {
    let color
    let number = confirmed
    let radius
    let colorName

    if (confirmed > 0) {
      let deathRate = (deaths / population) * 100000
      let deathRateColorIndex = Math.floor(
        10 * (deathRate / (maxSweDeathRate + 0.0000001))
      )
      colorName = 'deathrate' + String(deathRateColorIndex)
      color = colors[colorName]
    }

    radius = 5 + 14 * Math.sqrt(number / maxRegionConf / Math.PI)

    return { color, radius }
  }

  return edges.map(edge => {
    const region = edge.node

    if (region.Region_Total > 0) {
      const { color, radius } = getBubble(
        region.Region_Total,
        region.Region_Deaths,
        region.Population
      )

      const deathsPer100k = region.Region_Deaths
        ? (region.Region_Deaths / region.Population) * 100000
        : null

      region['deathsPer100k'] = deathsPer100k.toFixed(0)

      return (
        <CircleMarker
          key={region.id}
          radius={radius}
          color={color}
          stroke={false}
          center={[region.Lat, region.Long]}
          fillOpacity={active === region.id ? 0.95 : 0.75}
          onClick={() => {
            onClick(region)
            setActive(region.id)
          }}
        ></CircleMarker>
      )
    }
  })
}
Example #4
Source File: WorldMarkers.js    From gatsby-map with MIT License 4 votes vote down vote up 
WorldMarkers = ({ onClick }) => {
  const [active, setActive] = useState(false)

  const data = useStaticQuery(graphql`
    query {
      allWorldCsv {
        edges {
          node {
            id
            Confirmed
            Deaths
            Recovered
            Country_Region
            Province_State
            Lat
            Long_
            Admin2
          }
        }
      }
    }
  `)

  const edges = data.allWorldCsv.edges
  let maxConfirmed = 0
  let maxDeathRate = 0

  for (let edge in edges) {
    let conf = edges[edge].node.Confirmed

    if (conf > maxConfirmed) {
      maxConfirmed = conf
    }

    let dr = edges[edge].node.Deaths / (conf + Number.EPSILON)
    if (dr > maxDeathRate) {
      maxDeathRate = dr
    }
  }

  const getBubble = confirmed => {
    let color
    let number = confirmed
    let radius

    if (confirmed > 0) {
      color = colors.world
    }

    //console.log(Math.sqrt((1000*number/maxConfirmed)/Math.PI))
    radius = 3 + 17 * Math.sqrt(number / 10000 / Math.PI)

    return { color, radius }
  }

  return edges.map(edge => {
    const country = edge.node

    if (country.Confirmed > 0) {
      const { color, radius } = getBubble(country.Confirmed)

      if (!country.Admin2 && !country.Province_State) {
        addDeathRatio(popData, country)
      }

      const latitude = country.Lat === 0 ? null : country.Lat.substring(0, 10)
      const longitude =
        country.Long_ === 0 ? null : country.Long_.substring(0, 10)

      return (
        <CircleMarker
          key={country.id}
          radius={radius}
          color={color}
          stroke={false}
          center={[latitude, longitude]}
          fillOpacity={active === country.id ? 0.9 : 0.6}
          onClick={() => {
            setActive(country.id)
            onClick(country)
          }}
        ></CircleMarker>
      )
    }
  })
}