SoukainaTartour

INSERT INTO geomtable(geom) VALUES (ST_GeomFromGeoJSON('{"type" : "Polygon",
"coordinates" : [[[-2.5162124633789067, 34.88787589057115],
[-2.516899108886719, 34.88696062580312],
[-2.515665292739868, 34.887752682446184]]]}'))

SoukainaTartour

CREATE TABLE geomtable (
gid serial PRIMARY KEY,
geom geometry)

SoukainaTartour

.leaflet-container {
  height: 600px;
  width: 100%;
}

SoukainaTartour

import './App.css';
import LeafletMap from "./components/LeafletMap"

function App() {
  return (
    <div className="App">
      <LeafletMap></LeafletMap>
    </div>
  );
}

SoukainaTartour

import { React, useState, useEffect } from "react";
import { Map, TileLayer, LayersControl, GeoJSON } from "react-leaflet";
//It is important to import leaflet styles in your component
import "leaflet/dist/leaflet.css";
const MyData = () => {
  // create state variable to hold data when it is fetched
  const [data, setData] = useState();

  const getData = async () => {
    try {

SoukainaTartour

import { React, useState } from "react";
import { Map, TileLayer, LayersControl } from "react-leaflet";

//It is important to import leaflet styles in your component
import "leaflet/dist/leaflet.css";


const LeafletMap = () => {
    //Defining the center of our map container
    const [center, setCenter] = useState({ lat: 34.886279997713, lng: -2.515525597498045 });

SoukainaTartour

const express = require("express");
const app = express();
const pool = require("./db");
const cors = require("cors");


//middleware
app.use(cors());
app.use(express.json());

SoukainaTartour

const Pool = require("pg").Pool;
const pool = new Pool({
user : "postgres",
password : "123456"
host : "localhost",
port : 5432,
database : "spatialdb"});
module.exports = pool;

SoukainaTartour

const express = require("express");
const app = express();
const cors = require("cors");
//middleware
aa.use(cors());
app.use(express.json());
app.listen(5000, () => {
console.log("server is running on port 5000"); 
});