AndreaM16 AndreaM16 - 5 months ago 169
Node.js Question

Draw Polylines and Polygons based on MongoDB stored GeoJson Coordinates

I'm realizing an application which is supposed to show on a Google Map

Points
,
LineStrings
and
Polygons
.

I'm using a
Mongoose
schema which allows those 3 kind of data to get stored and I'm able to post all of them with no problems.

I'm already able to draw
Points
since they have only 1 entry per
lat, lng
pair, but, I'm really struggling with understanding how to fetch
LineString
and
Polygon
lat, lng
couples from the db, store them in a matrix and then drawing these object into the map.

This is what I'm trying to do for LineStrings:

var valueToPush = [];

// Loop through all of the JSON entries provided in the response
for (var i = 0; i < response.length; i++) {
var user = response[i];

if (user.location.type === "LineString") {

for (var j = 0; j < user.location.coordinates.length; j++) {

valueToPush[j] = user.location.coordinates[j];
valueToPush[j+1] = user.location.coordinates[j+1];
}
}

return valueToPush;
};

console.log(valueToPush); //Printing the right LineString Points


And this is how I'm trying to draw LineStrings:

var initialize = function() {

valueToPush.forEach(function(){
var myPath = new google.maps.Polyline({
path: parseFloat(valueToPush),
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});

myPath.setMap(map);
});
}


But from the latter i get
InvalidValueError: not an Array js?key=myKey


This is my Mongoose Schema:

// Pulls Mongoose dependency for creating schemas
var mongoose = require('mongoose');
var GeoJSON = require('geojson');
var Schema = mongoose.Schema;

var LocationSchema = new Schema({
name: {type: String, required: true},
location: {
type: {type : String, required: true},
coordinates : [Schema.Types.Mixed]
},
created_at: {type: Date, default: Date.now},
updated_at: {type: Date, default: Date.now}
});

// Sets the created_at parameter equal to the current time
LocationSchema.pre('save', function(next){
now = new Date();
this.updated_at = now;
if(!this.created_at) {
this.created_at = now
}
next();
});

// Indexes this schema in 2dsphere format (critical for running proximity searches)
LocationSchema.index({location: '2dsphere'});

module.exports = mongoose.model('mean-locations', LocationSchema);


And this is how I post a new LineString using Postman:

{
"name": "FirstPolyline",
"location": {
"type":"LineString",
"coordinates":
[ [100.0, 0.0], [101.0, 0.0] ]

}
}


What Am I doing wrong? How Can I fix this?

Thanks in Advance.

Answer

Try to create a cycle that iterates over all the items in the response array. Then depending on the item's location type, call an appropriate function:

for (var i = 0; i < response.length; i++) {
    var item = response[i];
    if (item.location.type === "LineString") {
       addPolyline(item.location.coordinates, map);
    }else if(item.location.type === "Polygon") {
       addPolygon(item.location.coordinates, map);
    }
}

function for adding lineString would look like this. Use google.maps.Polyline object.

function addPolyline(coords, map){
    var polyline_coordinates = [];
    for(var i = 0; i < coords.length; i++){
        polyline_coordinates.push({lat: coords[i][0], lng: coords[i][1]});
    }
    var new_polyline = new google.maps.Polyline({
       path: polyline_coordinates,
       geodesic: true,
       strokeColor: '#FF0000',
       strokeOpacity: 1.0,
       strokeWeight: 2
    });
    new_polyline.setMap(map);
}

Similarly for polygons using google.maps.Polygon object.

function addPolygon(coords, map){
    var polygon_coordinates = [];
    for(var i = 0; i < coords.length; i++){
        polygon_coordinates.push({lat: coords[i][0], lng: coords[i][1]});
    }
    var new_polygon = new google.maps.Polygon({
       path: polygon_coordinates,
       geodesic: true,
       strokeColor: '#FF0000',
       strokeOpacity: 1.0,
       strokeWeight: 2,
       fillColor: '#FF0000',
       fillOpacity: 0.5
    });
    new_polygon.setMap(map);
}

In both cases you need to create a path array. Path array is an array of objects like path:MVCArray<LatLng>|Array<LatLng|LatLngLiteral>. Check docs.

Comments