mirror of
https://github.com/mapgears/ol3-google-maps.git
synced 2026-01-25 16:50:49 +00:00
47 lines
1.8 KiB
HTML
47 lines
1.8 KiB
HTML
---
|
|
layout: example.html
|
|
title: Tiles
|
|
shortdesc: Example of different tile layers rendered in Google Maps.
|
|
docs: >
|
|
<p>
|
|
Shows different tile layers rendered in Google Maps. Note: the
|
|
layers are displayed in the order that you enable them.
|
|
</p>
|
|
<p>
|
|
Whenever the opacity is changed on an OL3 layer, the same change
|
|
is applied to the layer rendered by Google Maps. However, while
|
|
Google Maps is active, all OL3 layers have their opacity set to 0.
|
|
This means whenever the opacity is changed, OL3-Google-Maps changes
|
|
it back to 0.
|
|
</p>
|
|
<p>
|
|
To do this, we listen to the opacity:change event. This event is
|
|
not fired if the value doesn't change. This means that setting the
|
|
value to 0 on the OL3 layer won't work, the value should be set to
|
|
something close to 0 instead. The slider below goes from 0.01 to 1,
|
|
although Number.MIN_VALUE could be used instead.
|
|
</p>
|
|
---
|
|
<div id="map" class="map"></div>
|
|
<button id="toggleOSM" title="Toggle between OL and GMaps">Toggle between OL and GMaps</button>
|
|
<div id="toggleLayers">
|
|
<input id="toggleTileJSON" type="checkbox" name="TileJSON" value="TileJSON" />
|
|
<label for="toggleTileJSON">TileJSON</label>
|
|
<input id="toggleTMS" type="checkbox" name="TMS" value="TMS" />
|
|
<label for="toggleTMS">TMS</label>
|
|
<input id="toggleWMS" type="checkbox" name="WMS" value="WMS" />
|
|
<label for="toggleWMS">WMS</label>
|
|
<input id="toggleWMTS" type="checkbox" name="WMTS" value="WMTS" />
|
|
<label for="toggleWMTS">WMTS</label>
|
|
<input id="toggleXYZ" type="checkbox" name="XYZ" value="XYZ" />
|
|
<label for="toggleXYZ">XYZ</label>
|
|
</div>
|
|
<div>
|
|
<label for="opacity">Opacity: <span id="opacityValue">1</span></label>
|
|
<input id="opacity"
|
|
type="range"
|
|
min="1"
|
|
max="100"
|
|
value="100">
|
|
</div>
|