How to use Openlayers3 library files in codeigniter View files

Question

I am trying to use openlayers in my codeigniter for showing some map information when a user visit some place.

But I am stuck in initial stage. I know this is a stupid question, but I really need to use it.

I can use the Openlayer librarys like Vector, GeoJSON etc.. on main.js as it is mentioned in their website by running node.js.

But in codeignite I want to use it in a particular view page. So how can I import those js file in a particular view page.

Let's say I have my openlayer modules in root foler

Like
Porject
-- Application
-- openlayers_modules 

// which have ol folder inside it. -- system

-- stylesheets
-- index.php

In a normal way, we use it as index.html and main.js, both are in root folder.

I am kind of confusing how to use it.

If I use those js files in a view file ex: lightning.php then it shows like

<script type="text/javascript">
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Fill, Stroke, Style, Text} from 'ol/style.js';

Uncaught SyntaxError: Unexpected identifier

So my question is how can we implement it on a particular view page in a codeigniter application with node js or without node js.

Any help is appreciate. Thanks

Answer 1

I can't help you with node. But you can do this without using node. Simply link the openalyer with cdn and its good to go.

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>

But you can't use the latest versition of openlayer. And also code is little bit different.i.e:

 var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
        collapsible: false
      })
    }),
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

Use this link to find all example