Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Underzoom example [ch106065] #4

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Underzoom example [ch106065] #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b714ece
Underzoom demo
neokore Sep 22, 2020
d575bdc
Use autoExtent for underzoom example [ch106065]
neokore Sep 22, 2020
5463d42
Merge branch 'master' of github.com:CartoDB/viz-doc into raul/underzoom
neokore Sep 23, 2020
da3150e
Dev center related changes and improve comments
neokore Sep 23, 2020
e234376
Improve overzoom comment
neokore Sep 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions deck.gl/examples/examples.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
{
"title": "Style",
"file": "scripting/style.html"
},
{
"title": "Overzoom and underzoom",
"file": "scripting/over_under_zoom.html"
}
]
}
Expand Down
73 changes: 73 additions & 0 deletions deck.gl/examples/scripting/over_under_zoom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<html>
<head>
<!-- deck.gl standalone bundle -->
<script src="https://unpkg.com/deck.gl@^8.1.0/dist.min.js"></script>

<!-- TEMPORARY -->
<script src="https://libs.cartocdn.com/deck-gl-carto/develop/dist.min.js"></script>

<!--
LOCAL
<script src="../../../../deck.gl/modules/carto/dist.min.js"></script>
-->

<!-- Mapbox dependencies -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css" rel="stylesheet" />

<style type="text/css">
body {margin: 0; padding: 0;}
#map {width: 100vw; height: 100vh;}
</style>
</head>

<body>
<div id="map"></div>
</body>

<script type="text/javascript">

deck.carto.setDefaultCredentials({
username: 'public',
apiKey: 'default_public'
});

const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',

initialViewState: {
latitude: 51.507,
longitude: -0.127,
zoom: 10
},
controller: true,

layers: [
new deck.carto.CartoSQLLayer({
data: `SELECT * FROM london_neighbourhoods`,
getLineColor: [255, 255, 255],
getFillColor: [130, 109, 186],
pointRadiusMinPixels: 6,
lineWidthMinPixels: 1,

// Define the zoom range of the layer, in this case we are forcing using tiles from z=12 to z=16.
minZoom: 12,
maxZoom: 16,

/*
* Overzooming is enabled by default, but for enabling underzooming it is needed to set set the bounding
* box of the layer.
* You can do it automatically by setting `autoExtent` to `true`, or set it manually using `extend`.
*
* By setting `minZoom`, `maxZoom` and `autoExtent`, the layer will be visible when using zoom levels
* higher than 16 but it will always show z=16 tiles for this cases, as well for zoom levels lower
* than 12 but showing z=12 tiles instead.
*/
autoExtent: true
})
]
});

</script>
</html>