1

I want to make an interactive app where users can view crime rates in their area by pulling in geo-data from the met police website.

I want to display hexagons across the map (either through using H3 Uber library, or an alternative) but essentially it needs to uniformly cover the world map. I have gotten the Mapbox map to display but I am trying to figure out how exactly would I render the hexagons on to the map. Like where would I put it.

Below is my code. Where can I improve it?

import React from "react";
import { StyleSheet, View } from "react-native";
import MapboxGL from "@rnmapbox/maps";

MapboxGL.setAccessToken("<ACCESS-TOKEN-HERE>");

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <MapboxGL.MapView style={styles.map} />
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    height: "100%",
    width: "100%",
  },
  map: {
    flex: 1,
  },
});
mohsan123
  • 91
  • 2
  • 11
  • This question is a bit too vague to answer concretely. Are you asking how to render H3 hexagons on a map using `@rnmapbox/maps`? is there a specific part you're stuck on? Have you looked at similar questions, e.g. https://stackoverflow.com/a/74646888/380487? – nrabinowitz Dec 05 '22 at 18:19
  • @nrabinowitz See I do not know where to start sort of, I know how to convert long lats to h3geocodes but I just wouldn't know how to render them. – mohsan123 Dec 06 '22 at 01:51
  • There are many ways to render a map, we can't know what's right for your use case. The easiest option is to get the GeoJSON for your H3 indexes, then look at one of the many, many options for rendering GeoJSON (e.g. Mapbox.gl). – nrabinowitz Dec 06 '22 at 22:44

0 Answers0