Basemaps Toggle Plugin¶
Provides a basemap layers toggle as seen on many popular web-mapping sites.
Example in the application¶
Closed:
Open:
Installing¶
Copy
basemap-toggle.js
fromexamples/plugin/src
to the same directory asapp.js
.Before
<script type="text/javascript" src="app.js"></script>
add the line:<script type="text/javascript" src="basemap-toggle.js"></script>
Add a target
div
for the plugin:Change:
<div id="map-container"> <div id="map"></div> </div>
To:
<div id="map-container"> <div id="map"></div> <div id="layer-toggle"></div> </div>
The following can be added to the Demo’s
app.js
to demonstrate how the basemap toggle is configured. An actual application will have different layer names, paths, and preview images.Add the following before
tracker.startTracking();
:app.experimental.addConnectedPlugin(BasemapToggle, 'layer-toggle', { layers: [ { label: 'None', src: 'data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==', path: 'none/none', }, { label: 'Aerials', src: 'https://demo.geomoose.org/cgi-bin/mapserv7?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&LAYERS=mncomp&MAP=%2Fsrv%2Fdemo%2Fsrc%2F3.0%2Fgm3-demo-data%2F.%2Fdemo%2Fwms%2Fwms_proxy.map&SRS=EPSG%3A3857&STYLES=&WIDTH=40&HEIGHT=40&BBOX=-10389135.541557081%2C5535452.120985681%2C-10351566.742154919%2C5566447.33595532', path: 'lmic/mncomp' }, { label: 'Streets', src: 'https://a.tile.openstreetmap.org/12/989/1480.png', path: 'openstreetmap/osm_mapnik' } ] });