Displaying geometric shapes on a map in React using the Mapbox

Hi there, I am currently diving into the world of react map gl and I have encountered an issue while trying to plot a basic polygon on a map. Despite looking at various examples, I have been unable to find a proper solution. Here is the code snippet that I have been working with so far:

        <Source id="polylineLayer" type="geojson" data={{
            type: "Feature",
            properties: {},
            geometry: {
              type: "fill",
              coordinates: [[72.5497762170623, 31.758420926179284], [75.71927578293769, 31.758420926179284],
              [75.6761122711823, 29.06347507382072], [72.59293972881768, 29.06347507382072]]
            }
          }}>
          <Layer
            id="polylineLayer"
            type="fill"
            source="my-data"
            paint= {{
              'fill-color': '#FFAA01', // orange color fill
              'fill-opacity': 0.5
            }}
          />
        </Source>

I have followed the long-lat format and provided four coordinates to define a polygon. However, despite my efforts, the polygon is not appearing on the map. Any guidance or suggestions on what could be missing in this code would be greatly appreciated.

reactjsreact-map-gl

Answer №1

The issue was straightforward and presented with some basic examples to follow, allowing me to successfully resolve it:

<Source type="geojson" data={{
          "type": "FeatureCollection",
          "features": [
          {"type":"Feature",
          "properties":{},
          "geometry":
            {"type":"MultiPolygon",
            "coordinates":[[[[44.5678291043298, 26.430197589107346], [48.93462412447012, 26.430197589107346],
              [48.77390430971652, 23.30568738702456], [44.728549525637485, 23.30568738702456]]]]
            }
          }]
        }}>
        <Layer {...{
          id: 'data',
          type: 'fill',
          paint: {
            'fill-color': {
              property: 'percentile',
              stops: [
                [0, '#3288bd'],
              ]
            },
            'fill-opacity': 0.5
          }}} />
      </Source>

This allows for the inclusion of multiple polygons within a single source. Hopefully, this will be beneficial to someone in the future.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to deploy a React, Next.js, and Express.js application on Netlify?

I am currently in the process of deploying my application to Netlify, featuring a combination of React, Next.js, and Express.js. While there are no errors showing up in the Netlify console, unfortunately, the site is not live as expected. https://i.stack ...

javascriptreactjsexpressnext.jsnetlify

Auto Suggest: How can I display all the attributes from a JSON object in the options list using material-ui (@mui) and emphasize the corresponding text in the selected option?

Currently, I am facing a requirement where I need to display both the name and email address in the options list. However, at the moment, I am only able to render one parameter. How can I modify my code to render all the options with both name and email? ...

javascriptreactjsmaterial-uiautocomplete

Issue with rendering HTML entities in Material UI when passing as props

Encountered a problem with the radio buttons in Material UI. Currently, Material UI accepts value as a prop for the FormControlLabel component. When passing a string with an HTML entity like below, it gets parsed correctly. <FormControlLabel value="fem ...

javascriptreactjsradio-buttonmaterial-uiradio-group

Using the DatePicker component with non-escaped Latin alphabet characters in date-fns for ReactJS

While attempting to integrate the DatePicker component from Material UI into my React project, I encountered an error. Although many attributed the issue to a version discrepancy, what ultimately resolved the problem for me was assigning a value to the Da ...

javascriptreactjsdatepickercalendarmaterial-ui

Building a Next.js application that supports both Javascript and Typescript

I currently have a Next.js app that is written in Javascript, but I am looking to transition to writing new code in Typescript. To add Typescript to my project, I tried creating a tsconfig.json file at the project root and then ran npm install --save-dev ...

javascriptreactjstypescriptnpmnext.js

What is the best way to dismiss the modal window in React upon clicking the "Add product" button?

Hello all, I'm having trouble figuring out how to close the modal window in React. I want it so that when the user clicks on the "Add" button, a modal window opens for data input, and then upon clicking the "Add product" button, the window closes imme ...

javascriptreactjsreduxreact-reduxpopup

Can you explain the concepts of 'theme' and 'classes'?

Currently, I am working on a web application using React. I have chosen to incorporate the latest version of Material-UI for designing the user interface. During this process, I came across the demo examples provided by Material-UI (like ) In each demo ...

javascriptcssreactjsmaterial-uijsx

Every time I navigate to a new page in NextJs, the useEffect hook

I am working on developing a new blog app with Next.js. In the current layout of the blog, I have successfully fetched data for my sidebar (to display "recent posts") using the useEffect/fetch method, as getInitialProps only works on Pages. However, this ...

javascriptreactjsnext.js

Encountered an error during the production build of NEXTJS, where it panicked due to the global thread pool not being initialized

While hosting my app on Heroku and running git push heroku main, I encountered the following error: panicked at 'the global thread pool has not been initialized.: threadpool builderror { kind: ioerror(error { kind: unsupported, message: "operatio ...

javascriptnode.jsreactjsnext.jsnode-modules

NPM: There are no valid TypeScript file rules specified

Currently working on a small project using React.JS. Whenever I execute : npm run start, the following message gets logged: Starting type checking and linting service... Using 1 worker with 2048MB memory limit Watching: /Users/John/Projects/myProject/src ...

javascriptjsonreactjstypescriptnpm

Determining When the Collapse Transition in Material UI 5 is Complete

Snippet <Collapse in={expanded} onTransitionEnd={() => console.log('finished')} > <div>foo</div> </Collapse> Error Detection The callback function (onTransitionEnd) is not triggered af ...

javascriptreactjsanimationbrowsermaterial-ui

Utilizing client-side properties in an onClick event within Next.js framework

class homeNotLoggedIn extends React.Component { componentDidMount() { function logout(){ localStorage.clear() location.reload() } } render() { return ( <div> < ...

javascriptreactjsnext.js

What is the reason for not displaying the various li elements on my webpage?

Here is the code snippet export default function DisplaySearchResults({ results }) { var arr = Object.entries(results) console.log(arr) return ( <div> Here are the search results : <ol> {arr.map((va ...

javascriptnode.jsreactjsjsxnext.js

What causes the input field to lose focus in React after typing a character?

Currently utilizing React Mui for components and encountering no errors in either the Chrome inspector or terminal. How can this be resolved? No error notifications are being displayed by eslint or Chrome Inspector. The form submission functions correctl ...

javascriptreactjsmaterial-ui

Encountered an issue while attempting npm install, with the error message "Error: Undefined variable standalone_static_library in binding.gyp" and node-sass chokidar error

I've been working on updating a Ruby on Rails and React project from 3 years ago. However, I encountered an issue while trying to npm install. $ npm install gyp: Undefined variable standalone_static_library in binding.gyp while trying to load binding ...

javascriptreactjsruby-on-railsnpmpackage

Error message stating that there is no property 'collection' in Firestore when using Firebase v9 modular syntax in Firebase Firestore

Working on a React application that makes use of Firebase Firestore for handling database operations, I recently upgraded to Firebase version 9 and adopted the modular syntax for importing Firebase services. Nevertheless, when attempting to utilize the co ...

javascriptpythonhtmlcssreactjs

Is it possible for the Redux inside a React component from npm to clash with the Redux in the container?

I am looking to bundle a React component with npm and incorporate Redux to handle state within the component. If another React project imports my component, will it cause conflicts with the Redux instance of that project? For example: The component code ...

javascriptreactjsnpmredux

What is the most effective method to query Prisma using a slug without utilizing a React hook?

Retrieve post by ID (slug) from Prisma using getStaticProps() before page generation The challenge arises when attempting to utilize a React hook within getStaticProps. Initially, the plan was to obtain slug names with useRouter and then query for a post ...

javascriptreactjstypescriptnext.jsprisma

Enhance the Material UI Data Grid by customizing the toolbar's default slots with the option to disable the

https://i.stack.imgur.com/0YV9m.png Background In my current project, I am utilizing the Datagrid component from MUI [email protected]. I have disabled the column menu to display the toolbar at the top of the table instead of on individual columns. ...

javascriptreactjsmaterial-ui

Having difficulty accessing the Material UI Icons

I encountered an issue when attempting to utilize Material UI icons - as soon as I added the icon component, an error occurred. https://i.stack.imgur.com/issmm.png For reference, you can find the code on CodeSandbox at the following link: https://codesand ...

javascriptreactjsmaterial-ui