I attempted to log the ol_map from the browser console, but it returned an undefined error. The command seems to be working fine in the code itself. Why is this happening?
I am currently using the Symfony framework along with Webpack Encore to manage my assets.
Here is a screenshot from the browser
File: map.js
require('ol/ol.css');
require('../css/map.css');
import View from 'ol/view';
import VectorLayer from 'ol/layer/vector';
import TileLayer from 'ol/layer/tile';
import Map from 'ol/map';
var proj = require('ol/proj').default;
var ol_Map = require('ol/map').default;
//var ol_layer_Tile = require('ol/layer/tile').default;
var ol_source_OSM = require('ol/source/osm').default;
var ol_View = require('ol/view').default;
var coordinate = require('ol/coordinate').default;
//var VectorLayer = require('ol/layer/vector').default;
var VectorSource = require('ol/source/vector').default;
var GML = require('ol/format/gml').default;
var WFS = require('ol/format/wfs').default;
const ol_map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new ol_source_OSM()
}),
//new VectorLayer({
// source: new VectorSource({
// format: new WFS(),
// url: 'http://environment.data.gov.uk/ds/wfs?SERVICE=WFS&INTERFACE=ENVIRONMENTWFS--864c72de-d465-11e4-855f-f0def148f590'
// })
//})
],
view: new ol_View({
//coordinates in ESPG3857
center: [-254382.41,7068896.29],
zoom: 6
})
});
console.log(ol_map);
File: map.html.twig
{% extends '::base.html.twig' %}
{# STYLESHEETS-------------------------------------------------- #}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('build/map.css') }}" rel="stylesheet" />
{#<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" type="text/css"/>#}
{% endblock %}
{# PAGE CONTENT-------------------------------------------------- #}
{% block title %}OpenLayers example{% endblock %}
{% block body %}
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<div class="arrow_box" id="popup-container" style="display: none;"></div>
<script src="{{ asset('build/map.js') }}"></script>
</body>
{% endblock %}
{# JAVASCRIPTS-------------------------------------------------- #}
{% block javascript %}
{{ parent() }}
{#<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>#}
{% endblock %}