I'm new to node.js and am attempting to put a simple OpenLayers map on a page. However, the map is not showing up.
Code:
app.js
var express = require('express');
var app = express();
app.set('view engine', 'jade');
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res){
res.render('index', {title: 'Map Viewer'});
});
app.get('/map', function(req, res){
res.render('view');
});
app.listen(3000, function(){
console.log('Server listening on port 3000...');
});
layout.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
view.jade
extends layout
block content
#map
script(type='text/javascript').
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: 'Global Imagery',
source: new ol.source.TileWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {LAYERS: 'nasa:bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
In package.json I'm using "openlayers": "^3.15.1"
Result:
The above code is producing a blank page with the following html:
<html>
<head>
</head>
<title>
</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<body>
<div id="map">
</div>
</body>
</html>
Any idea what I'm doing wrong?
1 Answer 1
The first issue is that in view.jade the Javascript block is not indented over. Everything under and including script(type='text/javascript'). needs to be indented one space.
The other issue is that ol.js isn't being imported. In layout.jade the following line must be added:
script(type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.js")
lang-js