Skip to content

Commit e4b26b7

Browse files
gavinrgavinr
committed
2d and 3d
1 parent b9a5fe5 commit e4b26b7

File tree

34 files changed

+780
-10
lines changed

34 files changed

+780
-10
lines changed

‎100-maps/2d/control/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Lazy Load Test</title>
7+
8+
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
9+
<link rel="stylesheet" href="main.css">
10+
<script src="https://js.arcgis.com/4.14/"></script>
11+
<script src="main.js" type="module"></script>
12+
</head>
13+
<body>
14+
<div id="wrapperDiv"></div>
15+
</body>
16+
</html>

‎100-maps/2d/control/main.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
height: 100%;
6+
width: 100%;
7+
}
8+
9+
.map {
10+
background-color: lightgray;
11+
margin: 5px;
12+
float: left;
13+
}
14+
15+
.map, .map > div {
16+
width: 500px;
17+
height: 500px;
18+
}
19+
.intersected {
20+
background-color: green;
21+
}

‎100-maps/2d/control/main.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { loadModules } from "https://unpkg.com/esri-loader/dist/esm/esri-loader.js";
2+
3+
const createMap = async (element) => {
4+
var childElement = document.createElement("div");
5+
element.appendChild(childElement);
6+
// More info on esri-loader's loadModules function:
7+
// https://github.com/Esri/esri-loader#loading-modules-from-the-arcgis-api-for-javascript
8+
const [Map, MapView] = await loadModules([
9+
"esri/Map",
10+
"esri/views/MapView"
11+
], {css: true});
12+
13+
const map = new Map({
14+
basemap: "streets"
15+
});
16+
17+
const viewOptions = {
18+
container: childElement,
19+
map: map,
20+
center: [-101.17, 21.78],
21+
zoom: 2
22+
};
23+
24+
new MapView(viewOptions);
25+
};
26+
27+
28+
29+
30+
window.addEventListener("load", (event) => {
31+
const rootElement = document.getElementById("wrapperDiv");
32+
for(let i = 0; i < 100; i++) {
33+
var element = document.createElement("div");
34+
element.classList.add('map');
35+
rootElement.appendChild(element);
36+
createMap(element);
37+
}
38+
}, false);
39+
40+

‎100-maps/2d/intersection-observer/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Lazy Load Test</title>
7+
8+
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
9+
<link rel="stylesheet" href="main.css">
10+
<script src="https://js.arcgis.com/4.14/"></script>
11+
<script src="main.js" type="module"></script>
12+
</head>
13+
<body>
14+
<div id="wrapperDiv"></div>
15+
</body>
16+
</html>

‎100-maps/2d/intersection-observer/main.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
height: 100%;
6+
width: 100%;
7+
}
8+
9+
.map {
10+
background-color: lightgray;
11+
margin: 5px;
12+
float: left;
13+
}
14+
15+
.map, .map > div {
16+
width: 500px;
17+
height: 500px;
18+
}
19+
.intersected {
20+
background-color: green;
21+
}

‎100-maps/2d/intersection-observer/main.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { loadModules } from "https://unpkg.com/esri-loader/dist/esm/esri-loader.js";
2+
3+
const createMap = async (element) => {
4+
var childElement = document.createElement("div");
5+
element.appendChild(childElement);
6+
// More info on esri-loader's loadModules function:
7+
// https://github.com/Esri/esri-loader#loading-modules-from-the-arcgis-api-for-javascript
8+
const [Map, MapView] = await loadModules([
9+
"esri/Map",
10+
"esri/views/MapView"
11+
], {css: true});
12+
13+
const map = new Map({
14+
basemap: "streets"
15+
});
16+
17+
const viewOptions = {
18+
container: childElement,
19+
map: map,
20+
center: [-101.17, 21.78],
21+
zoom: 2
22+
};
23+
24+
new MapView(viewOptions);
25+
};
26+
27+
28+
29+
30+
window.addEventListener("load", (event) => {
31+
const callback = (entries) => {
32+
entries.forEach(entry => {
33+
34+
if (entry.isIntersecting && !entry.target.classList.contains('intersected')) {
35+
// console.log('entry:', entry.target);
36+
entry.target.classList.add('intersected');
37+
createMap(entry.target);
38+
} else {
39+
entry.target.classList.remove('intersected');
40+
while(entry.target.firstChild) {
41+
entry.target.removeChild(entry.target.firstChild);
42+
}
43+
44+
}
45+
});
46+
47+
}
48+
let observer = new IntersectionObserver(callback, {
49+
threshold: 0.1
50+
});
51+
52+
53+
54+
const rootElement = document.getElementById("wrapperDiv");
55+
for(let i = 0; i < 100; i++) {
56+
var element = document.createElement("div");
57+
element.classList.add('map');
58+
rootElement.appendChild(element);
59+
// createMap(element);
60+
observer.observe(element);
61+
}
62+
63+
64+
}, false);
65+
66+

‎100-maps/2d/scroll-stop/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Lazy Load Test</title>
7+
8+
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
9+
<link rel="stylesheet" href="main.css">
10+
<script src="https://js.arcgis.com/4.14/"></script>
11+
<script src="main.js" type="module"></script>
12+
</head>
13+
<body>
14+
<div id="wrapperDiv"></div>
15+
</body>
16+
</html>

‎100-maps/2d/scroll-stop/main.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
height: 100%;
6+
width: 100%;
7+
}
8+
9+
.map {
10+
background-color: lightgray;
11+
margin: 5px;
12+
float: left;
13+
}
14+
15+
.map, .map > div {
16+
width: 500px;
17+
height: 500px;
18+
}
19+
.intersected {
20+
background-color: green;
21+
}

‎100-maps/2d/scroll-stop/main.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { loadModules } from "https://unpkg.com/esri-loader/dist/esm/esri-loader.js";
2+
3+
4+
// scrollStop from https://vanillajstoolkit.com/helpers/scrollstop/
5+
var scrollStop = function (callback) {
6+
// Make sure a valid callback was provided
7+
if (!callback || typeof callback !== 'function') return;
8+
// Setup scrolling variable
9+
var isScrolling;
10+
// Listen for scroll events
11+
window.addEventListener('scroll', function (event) {
12+
// Clear our timeout throughout the scroll
13+
window.clearTimeout(isScrolling);
14+
// Set a timeout to run after scrolling ends
15+
isScrolling = setTimeout(function() {
16+
// Run the callback
17+
callback();
18+
}, 66);
19+
}, false);
20+
};
21+
22+
const isElementOutViewport = (el) => {
23+
var rect = el.getBoundingClientRect();
24+
return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
25+
}
26+
27+
const createMap = async (element) => {
28+
var childElement = document.createElement("div");
29+
element.appendChild(childElement);
30+
// More info on esri-loader's loadModules function:
31+
// https://github.com/Esri/esri-loader#loading-modules-from-the-arcgis-api-for-javascript
32+
const [Map, MapView] = await loadModules([
33+
"esri/Map",
34+
"esri/views/MapView"
35+
], {css: true});
36+
37+
const map = new Map({
38+
basemap: "streets"
39+
});
40+
41+
const viewOptions = {
42+
container: childElement,
43+
map: map,
44+
center: [-101.17, 21.78],
45+
zoom: 2
46+
};
47+
48+
new MapView(viewOptions);
49+
};
50+
51+
52+
window.addEventListener("load", (event) => {
53+
54+
const allNodes = [];
55+
56+
const checkAllNodes = () => {
57+
allNodes.forEach((node) => {
58+
if (isElementOutViewport(node)) {
59+
if(node.classList.contains('intersected')) {
60+
node.classList.remove('intersected');
61+
while(node.firstChild) {
62+
node.removeChild(node.firstChild);
63+
}
64+
}
65+
} else {
66+
if(!node.classList.contains('intersected')) {
67+
node.classList.add('intersected');
68+
createMap(node);
69+
}
70+
71+
}
72+
});
73+
};
74+
75+
const rootElement = document.getElementById("wrapperDiv");
76+
for(let i = 0; i < 100; i++) {
77+
var element = document.createElement("div");
78+
element.classList.add('map');
79+
rootElement.appendChild(element);
80+
allNodes.push(element);
81+
}
82+
83+
scrollStop(function () {
84+
console.log('Scrolling has stopped.');
85+
checkAllNodes();
86+
});
87+
88+
checkAllNodes(); // once on page load
89+
}, false);
90+
91+

‎100-maps/3d/control/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Lazy Load Test</title>
7+
8+
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
9+
<link rel="stylesheet" href="main.css">
10+
<script src="https://js.arcgis.com/4.14/"></script>
11+
<script src="main.js" type="module"></script>
12+
</head>
13+
<body>
14+
<div id="wrapperDiv"></div>
15+
</body>
16+
</html>

‎100-maps/3d/control/main.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
height: 100%;
6+
width: 100%;
7+
}
8+
9+
.map {
10+
background-color: lightgray;
11+
margin: 5px;
12+
float: left;
13+
}
14+
15+
.map, .map > div {
16+
width: 500px;
17+
height: 500px;
18+
}
19+
.intersected {
20+
background-color: green;
21+
}

0 commit comments

Comments
 (0)