OpenLayers: get Map, View, TileLayer and OSM from server

Not sure what mean but if "getting from the server" means accessing the imports directly from a compiled source (be it on your server or elsewhere), this is how to do it:

const Map = window.ol.Map;
const View = window.ol.View;
const TileLayer = window.ol.layer.Tile;
const OSM = window.ol.source.OSM;

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: 'map',
  view: new View({
    projection: 'EPSG:4326',
    center: [0, 0],
    zoom: 2
  })
});

<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>


       <style>
         .map {
           width: 100%;
           height: 400px;
         }

       </style>


       <div id="layout">


         <div id="main">

           <div class="content">
             <div class="pure-g">

               <div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">

                 <!-- Content right Wrap -->
                 <div class="content_r_wrap">

                   <!-- Devices Map Module -->
                   <div class="windowHead">
                     <h2>LOCATION INFO</h2>
                   </div>
                   <div class="windowContentMap">
                     <div id="map" class="map"></div>
                   </div>
                 </div>

               </div>

             </div>
           </div>
         </div>
       </div>

When you are calling

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>

you actually get the built file from CDN (I guess, "the server" you talked about). So, in that file you can access the modules Map, View, TileLayer, OSM etc... All as a result of the import of the script from CDN.

If you want to load these files from your local project, which can be "offline", you can install them using Package Manager (like NPM) or just download the bundled (built) files (css and js), save them in a directory you could access to, and change your source to the directory.

My recommendation (and also OpenLayer's) is using npm and then use it regularly (import ol):

index.js

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

In that case, OpenLayer's files are INSTALLED in your project inside node_modules and you are no longer dependent on external network traffic to the CDN.

That's it :)

You can follow the complete guide here (they explain there how to bundle and run the program):

OpenLayers using NPM

OpenLayers: get Map, View, TileLayer and OSM from server

Tags:

Javascript

Html

Css

Openlayers

Thymeleaf

Related

Recent Posts