Build custom library based on OpenLayers

Question

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'); ?

Answer 1

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;
};

Build custom library based on OpenLayers

Question

1 answers

solution1
1 ACCPTED 2020-10-19 10:19:05

Build custom library based on OpenLayers

Question

1 answers

solution1 1 ACCPTED 2020-10-19 10:19:05

solution1
1 ACCPTED 2020-10-19 10:19:05