Longitude and Latitude don’t sent to DB angular?

Published

this is my component:
my goal is to send latitude and longitude to the back-end!
but it doesn’t work correctly!

private lat: number;
private lng: number;

ngOnInit(): void {
this.ref = this.makeReceference();
this.getSites();

//map
L.Map.addInitHook("addHandler", "gestureHandling", GestureHandling);
var map = L.map('map',{minZoom: 7,gestureHandling: 
true}).setView([36.853995,10.209341],16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 
contributors'}).addTo(map);

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
drawnItems.addLayer(layer);
});

var theMarker = {};

map.on('click',function(ee){

here the latitude lat and longitude lng will get the value of the marker:

this.lat = ee.latlng.lat;
this.lng = ee.latlng.lng;
console.log("You clicked the map at LAT: "+ this.lat+" and LONG: "+this.lng );
      //Clear existing marker, 

if (theMarker != undefined) {
 map.removeLayer(theMarker);
};

       //Add a marker to show where you clicked.
theMarker = L.marker([this.lat,this.lng]).addTo(map);  
});
}

this function is where i send the data to the back-end , it’s a submit function if you look to the html code.

createSite()
  {
     console.log(this.site);
     console.log(this.lat);
    let itm = {
    reference : this.ref,
    site : this.site,
    lng : this.lng,
    lat : this.lat,
    };
     this.si.setSite(itm)
     .subscribe (
       res =>{ 
            console.log(res);
            this.getSites();
          },
    err => {
      console.log(err);
      } 
    )
  }

And this is my back-end :

router.post('/', jsonParser ,  (req,res) => {
const st = new Site(req.body.site);
st.reference = req.body.reference,
st.lng = req.body.lng,
st.lat = req.body.lat
console.log( '[' +st.lng + ', ' + st.lat+ ']');
console.log(req.body);
console.log(st);
st.save(st)
.then(data => {
.send(data);
})
.catch(err => {
res.status(500).send({
message:
err.message || "Some error occurred while creating the Site."
});
});
})

and this is my form :

 <form>
 <div class="row">
 <div class="col-md-11">
    <input matInput placeholder="Site's Name" class="form-control" 
              type="text" name="name" [(ngModel)]="site.name" required>
 </div>
 <div class="col-md-1">
 </div>
 <div class="col-md-5">
 <input class="form-control" type="text"  placeholder="Site's Reference"  matInput  
 name="reference"  value="{{ref}}" hidden disabled>
 </div>
 </div>
 <br>
 <div class="row">
 <div class="col-md-11">
 <textarea class="form-control" matInput placeholder="Description" name="description" 
  [(ngModel)]="site.description"> 
 </textarea>
 </div>  
 </div>
 <br>
 <div class="text-center">
 <div><h2>Add Location</h2></div>
 <div class="map" id="map" class="match-parent"></div>
 <br>
 <br>
 </div>

Here i used the function createSite():

 <button mat-raised-button type="submit" class="btn btn-danger pull-left 
 (click)="createSite()">Add Site</button>
 <div class="clearfix"></div>
 </form>

Source: Angular Questions

Published
Categorized as angular, database, html, mongodb, mongoose Tagged , , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq