Skip to content

Commit

Permalink
add examples using deck.gl layers (#3592)
Browse files Browse the repository at this point in the history 
* add examples using deck.gl layers

* Update deck.gl version in add-deckgl-layer-using-rest-api.html

* Update deck.gl version in toggle-deckgl-layer.html

* Fix lint issues in toggle-deckgl-layer.html add-deckgl-layer-using-rest-api.html

* fix readability in add-deckgl-layer-using-rest-api.html and toggle-deckgl-layer.html

* fix position of show variable in toggle-deckgl-layer.html
  • Loading branch information
@ilci66
ilci66 authored Jan 19, 2024
1 parent 45d250c commit faa9948
Show file tree
Hide file tree
Showing 4 changed files with 315 additions and 0 deletions.
Binary file added docs/assets/examples/add-deckgl-layer-using-rest-api.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/examples/toggle-deckgl-layer.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 123 additions & 0 deletions test/examples/add-deckgl-layer-using-rest-api.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create deck.gl layer using REST API</title>
<meta
property="og:description"
content="Create a deck.gl layer as an overlay from a REST API."
/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../../dist/maplibre-gl.css" />
<script src="../../dist/maplibre-gl-dev.js"></script>
<script src="https://unpkg.com/deck.gl@8.9.33/dist.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
/* Deck.gl layer is added as an overlay, popup needs to be displayed over it */
.maplibregl-popup {
z-index: 2;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const url = 'https://maps.clockworkmicro.com/streets/v1/style?x-api-key=';
const apiKey = 'Dr4eW3s233rRkk8I_public';

const map = new maplibregl.Map({
container: 'map',
style: url + apiKey,
center: [2.343957, 48.862011],
zoom: 10.5,
});
map.addControl(new maplibregl.NavigationControl(), 'top-right');

// 20 + 1 random colors for all the districts of Paris and outside of the districts
const colorPalette = [
[255, 102, 51],
[255, 179, 153],
[255, 51, 255],
[255, 255, 153],
[0, 179, 230],
[230, 179, 51],
[51, 102, 230],
[153, 153, 102],
[153, 255, 153],
[179, 77, 77],
[128, 179, 0],
[128, 153, 0],
[230, 179, 179],
[102, 128, 179],
[102, 153, 26],
[255, 153, 230],
[204, 255, 26],
[255, 26, 102],
[230, 51, 26],
[51, 255, 204],
[102, 153, 77],
];

const limit = 100;
// Sample data source = https://data.iledefrance.fr
const parisSights = `https://data.iledefrance.fr/api/explore/v2.1/catalog/datasets/principaux-sites-touristiques-en-ile-de-france0/records?limit=${limit}`;

let layerControl;

// Add the overlay as a control
map.on('load', async () => {
// Fetch the data
const response = await fetch(parisSights);
const responseJSON = await response.json();

const layer = new deck.ScatterplotLayer({
id: 'scatterplot-layer',
data: responseJSON.results,
pickable: true,
opacity: 0.7,
stroked: true,
filled: true,
radiusMinPixels: 14,
radiusMaxPixels: 100,
lineWidthMinPixels: 5,
// Using appropriate fields for coordinates from the dataset
getPosition: (d) => [d.geo_point_2d.lon, d.geo_point_2d.lat],
getFillColor: (d) => {
// Filtering by postal code
if ('insee' in d && d.insee.startsWith('75')) {
// Districts in Paris
return colorPalette[parseInt(d.insee.substring(3))];
} else {
// Out of Paris
return colorPalette[20];
}
},
getLineColor: (d) => [14, 16, 255],
onClick: (info) => {
const {coordinate, object} = info;
const description = `<p>${object.nom_carto || 'Unknown'}</p>`;

new maplibregl.Popup()
.setLngLat(coordinate)
.setHTML(description)
.addTo(map);
},
});

// Create the overlay
const overlay = new deck.MapboxOverlay({
layers: [layer],
});
map.addControl(overlay);
});
</script>
</body>
</html>
192 changes: 192 additions & 0 deletions test/examples/toggle-deckgl-layer.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<html lang="en">
<head>
<title>Toggle deck.gl layer</title>
<meta
property="og:description"
content="Toggle deck.gl layer using maplibre."
/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../../dist/maplibre-gl.css" />
<script src="../../dist/maplibre-gl-dev.js"></script>
<script src="https://unpkg.com/deck.gl@8.9.33/dist.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
#toggle-button {
position: fixed;
top: 20px;
left: 20px;
background-color: rgb(130, 25, 191);
color: #f0ead6;
font-size: 1.2rem;
min-width: 70px;
border-radius: 5px;
border: none;
padding: 5px 10px;
transition: 0.3s;
}
#toggle-button:hover {
scale: 1.1;
box-shadow: 0 0 4px 4px gray;
}
/* Deck.gl layer is added as an overlay, popup needs to be displayed over it */
.maplibregl-popup {
z-index: 2;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="toggle-button">Hide</button>
<script>
const url = 'https://maps.clockworkmicro.com/streets/v1/style?x-api-key=';
const apiKey = 'Dr4eW3s233rRkk8I_public';

let overlay;

const map = new maplibregl.Map({
container: 'map',
style: url + apiKey,
center: [2.345885, 48.860412],
zoom: 12,
});
map.addControl(new maplibregl.NavigationControl(), 'top-right');

// 5 Beautiful gardens in Paris
const sampleData = {
type: 'FeatureCollection',
name: 'Jardins Des Paris',
crs: {
type: 'name',
properties: {name: 'urn:ogc:def:crs:OGC:1.3:CRS84'},
},
features: [
{
type: 'Feature',
properties: {
name: 'Jardins du Trocadéro',
district: 16,
},
geometry: {
type: 'Point',
coordinates: [2.289207, 48.861561],
},
},
{
type: 'Feature',
properties: {
name: 'Jardin des Plantes',
district: 5,
},
geometry: {
type: 'Point',
coordinates: [2.359823, 48.843995],
},
},
{
type: 'Feature',
properties: {
name: 'Jardins das Tulherias',
district: 1,
},
geometry: {
type: 'Point',
coordinates: [2.327092, 48.863608],
},
},
{
type: 'Feature',
properties: {
name: 'Parc de Bercy',
district: 12,
},
geometry: {
type: 'Point',
coordinates: [2.382094, 48.835962],
},
},
{
type: 'Feature',
properties: {
name: 'Jardin du Luxemburg',
district: 6,
},
geometry: {
type: 'Point',
coordinates: [2.336975, 48.846421],
},
},
],
};

// Add the overlay as a control
function initializeOverlay () {
const layer = new deck.ScatterplotLayer({
id: 'scatterplot-layer',
data: sampleData.features,
pickable: true,
opacity: 0.8,
stroked: true,
filled: true,
radiusScale: 6,
radiusMinPixels: 20,
radiusMaxPixels: 100,
lineWidthMinPixels: 5,
getPosition: (d) => d.geometry.coordinates,
getFillColor: (d) => [49, 130, 206],
getLineColor: (d) => [175, 0, 32],
onClick: (info) => {
const {coordinate, object} = info;
const description = `<div>
<p>
<strong>Name: </strong>${object.properties['name']}
</p>
<strong>Disctrict: </strong>${object.properties['district']}
</p>
</div>`;

new maplibregl.Popup()
.setLngLat(coordinate)
.setHTML(description)
.addTo(map);
},
});

// Create the overlay
overlay = new deck.MapboxOverlay({
layers: [layer],
});

map.addControl(overlay);
}

let show = true; // Display the layer by default

map.on('load', () => {
// Add the overlay
initializeOverlay();

const toggleButton = document.querySelector('#toggle-button');
toggleButton.addEventListener('click', () => {
if (show) {
map.removeControl(overlay);
toggleButton.innerText = 'Show';
show = false;
} else {
initializeOverlay();
toggleButton.innerText = 'Hide';
show = true;
}
});
});
</script>
</body>
</html>

0 comments on commit faa9948

Please sign in to comment.