Is it possible to integrate openlayers (Node.JS based build) with html/php to add dynamic layers in production stage

83 Views Asked by At

The objective is to integrate the JS file in the PHP page to dynamically add layers (WMS/GeoJSON) to the map. Tried by importing JS file and map file as type=module and type=importmap resepectively.

It was mentioned in the Openlayers page that "it is recommended to use NodeJS based build in the production stage". A node based openlayers project with all required functionlities (from ol and ol-ext) is developed and built using Node.JS. First stage is successful.

The CSS & JS files in the dist folder (after building node project) in a PHP based application. Second stage is also successful.

Several issues are occuring while importing map variable and the node modules to define the and add the layers dynamically to the map. Is it possible to add such dynamic layers to the map in this way? If so kindly share some information on it. Thanks in advance.

  1. Started a node/npm project and installed openlayers and ol-ext. Added following snippet to the JS file.
var map = new Map({
    target: 'map',
    layers: [
      baseLayers,basic,graticule
    ],
    view: view,
    controls: defaultControls().extend([new FullScreen(),overviewMapControl,mousePositionControl
    ]),
  });

  var switcher = new LayerSwitcher({
    target:$(".layerSwitcher").get(0), 
    show_progress:true,
    extent: true,
    trash: true,
    oninfo: function (l) { alert(l.get("title")); }
  });
  map.addControl(switcher);

**object map is defined as a global variable and value is defined inside the function. Finally value is returned **

  1. Required functionalities are added to the JS file and project build is created.

  2. The JS & CSS files in the dist folder after build is included:

<script src="./assets2/index-06fa3727.js.map" type="importmap"></script>
<script type="module" crossorigin src="./assets2/index-06fa3727.js"></script>
<link rel="stylesheet" href="./assets2/index-e72ce6d4.css">
  1. The **map object ** could not be retrieved/read in the PHP file even after importing the build files.
0

There are 0 best solutions below