Khal786 Khal786 - 9 months ago 72
HTML Question

draw feature in ol3 using node.js

Attempting to emit a geometry after the feature is drawn on tab 1. Then trying to redraw the feature using socket.on to be displayed on tab 2. however for some reason the feature is not drawn.

window.onload = function init() {
var source = new ol.source.Vector({ wrapX: false });
//create a base vector layer to draw on
var vector = new ol.layer.Vector({
source: source,

var raster = new ol.layer.Tile({
source: new ol.source.OSM()

//create map
map = new ol.Map({
layers: [raster, vector],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
view: new ol.View({
center: [0,0],
zoom: 10

function drawShape(value) {

var value = value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (value)

draw.on('drawend', function (event) {

// Get the array of features
var feature = event.feature

try {
socket.emit('new polygon', feature.getGeometry().getCoordinates());
socket.emit('chat message', feature.getGeometry().getCoordinates());
} catch (err) { }

var socket = io();
socket.on('new polygon', function (msg) {

var thing = new ol.geom.Polygon(msg);

var featurething = new ol.Feature({
name: "Thing",
geometry: thing



when the script is run the msg contains an array of coordinates. Nothing appears in the console.

msg value

I am a beginner at node.js. anyone know what i am doing wrong

Answer Source

Found the error. In your socket.on callback you are calling


when it should be

source.addFeature(featurething); // single feature, no s


source.addFeatures([featurething]); // put it in an array