2

How to add layerswitcher in ol 6.

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

  const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      title: 'District', 
      type: 'base', 
      source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/district/distgrid" + "/{z}/{x}/{-y}.png"  ,
          })
    }),
    new TileLayer({
      title: 'Landmark',
      source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/Landmark/landmarkgrid" + "/{z}/{x}/{-y}.png"  ,
          })
    }),
    new TileLayer({
      title: 'Road',
      source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/road/roadgrid" + "/{z}/{x}/{-y}.png"  ,
          })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 1
  })
});

I tried the above code but I getting error ol.control.LayerSwitcher is not a constructor. I followed this example http://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/layerswitcher.html

Adithya
  • 1,687
  • 3
  • 19
  • 34

2 Answers2

1

Changing OpenLayers from 6.1.1 to 6.4.3 in that example works for me, but if you are linking directly to the library be sure to specify https as browsers to not allow http libraries to be used from https html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OpenLayers - LayerSwitcher</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" />
    <link rel="stylesheet" href="https://raw.githack.com/walkermatt/ol-layerswitcher/master/src/ol-layerswitcher.css" />
    <link rel="stylesheet" href="https://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/layerswitcher.css" />
  </head>
  <body>
    <div id="map"></div>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <script src="https://raw.githack.com/walkermatt/ol-layerswitcher/master/dist/ol-layerswitcher.js"></script>
    <script src="https://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/layerswitcher.js"></script>
  </body>
</html>
Mike
  • 16,042
  • 2
  • 14
  • 30
  • I tried to instal ol using npm & parcel. but I got error while installing, so chose this method. Am trying the installation again. – Adithya Aug 19 '20 at 12:03
  • I have installed ol using npm & got map based on it. So I edited the question. Please have a look now – Adithya Aug 21 '20 at 05:47
  • 1
    You will need to import the LayerSwitcher and its css It works if I open the OpenLayers Bing maps example in codesandbox and replace the html select with LayerSwitcher https://codesandbox.io/s/reverent-fermat-zrhtu?file=/main.js – Mike Aug 21 '20 at 08:36
  • This worked. Got layerswitcher from the above link. thanks alot. Please update the answer with above code, so I can accept your answer. – Adithya Aug 21 '20 at 09:53
  • Any explanation as to why one needs ol-layerswitcher and layerswitcher? https://githubmate.com/repo/woodbri/ol-layerswitcher only mentions ol-layerswitcher. – mavavilj Jan 05 '22 at 13:46
0

Check this example created control and interaction for layer switcher. Switcher is made to work with layer group you can tweak to make it work on required layer/layer group. Check this Example

Tarang Rathod
  • 86
  • 9