I'm trying to build my personal gis library using OpenLayers; it is the first time that I do this.
Usually I build a simple map using this code:
var map = new ol.Map({
target: 'map'
});
var view = new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
});
map.setView(view);
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
map.addLayer(osm);
Now I've created a static file called gislibraries.js
and here I initialize my map:
function MapInizialized(mapTarget) {
const map = new ol.Map({
target: mapTarget
});
return map;
};
function MapSetView(longitude, latitude, zoomLevel) {
const view = new ol.View({
center: ol.proj.fromLonLat([longitude, latitude]),
zoom: zoomLevel
});
map.setView(view);
return view;
};
function MapTile() {
const osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
map.addLayer(osm);
return osm;
};
Using the code below inside index.html
I can see my map.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Base Map | GeoDjango</title>
<link rel="stylesheet" href="/static/css/map.css">
<script src="/static/js/mapscripts.js" type="text/javascript"></script>
<!-- OpenLayers 6 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new MapInizialized('map');
MapSetView(0.0, 0.0, 2);
MapTile();
</script>
</body>
</html>
When I use:
MapInizialized('map');
MapSetView(0.0, 0.0, 2);
MapTile();
My map doesn't work and I can see this error:
Uncaught TypeError: map.setView is not a function MapSetView http://127.0.0.1:8000/static/js/mapscripts.js:17 http://127.0.0.1:8000/:51
Why I can't invoke MapInizialized('map');
?
For map
to be available to all the function it must be declared outside the functions
let map;
function MapInizialized(mapTarget) {
map = new ol.Map({
target: mapTarget
});
return map;
};