Skip to content

Commit f69404c

Browse files
alxartalxart
authored
Added glTF model placement demo (#26)
1 parent 5b3d3f5 commit f69404c

File tree

3 files changed

+340
-0
lines changed

3 files changed

+340
-0
lines changed

‎src/gltf-models-placement/index.html

+339
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
6+
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
7+
<title>MapGL API - glTF models placement</title>
8+
<meta name="description" content="Demo of glTF models placement on the map" />
9+
<meta name="category" content="Common" />
10+
<style>
11+
html,
12+
body,
13+
#map {
14+
margin: 0;
15+
width: 100%;
16+
height: 100%;
17+
overflow: hidden;
18+
}
19+
20+
html {
21+
font-family: Arial, Helvetica, sans-serif;
22+
font-size: 12px;
23+
}
24+
25+
#main-wrap {
26+
position: absolute;
27+
top: 10px;
28+
left: 10px;
29+
bottom: 10px;
30+
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: start;
34+
align-items: center;
35+
36+
padding: 10px;
37+
box-sizing: border-box;
38+
background-color: #ffffffcc;
39+
border-radius: 10px;
40+
41+
width: 300px;
42+
overflow: hidden;
43+
}
44+
45+
#main-wrap > *:nth-child(n + 1) {
46+
margin-top: 10px;
47+
}
48+
49+
#bar {
50+
position: relative;
51+
display: flex;
52+
flex-direction: column;
53+
justify-content: space-between;
54+
align-items: center;
55+
width: 100%;
56+
height: 100%;
57+
max-height: calc(100% - 100px - 40px);
58+
}
59+
60+
#config-button {
61+
width: 100%;
62+
height: 40px;
63+
background-color: #fff;
64+
border: 1px solid #ccc;
65+
66+
box-sizing: border-box;
67+
border-radius: 5px;
68+
text-align: center;
69+
}
70+
71+
#config-button:hover {
72+
transition: background-color 0.15s ease-in-out;
73+
background-color: #f2f2f2;
74+
}
75+
76+
#map-controls {
77+
display: flex;
78+
flex-direction: column;
79+
justify-content: start;
80+
align-items: start;
81+
82+
width: 100%;
83+
height: 100px;
84+
}
85+
86+
#map-controls input[type='number'] {
87+
width: 60px;
88+
}
89+
90+
#map-controls > div:nth-child(n + 2) {
91+
margin-top: 5px;
92+
}
93+
94+
#map-controls > div > * {
95+
margin-right: 5px;
96+
}
97+
98+
#model-add-info {
99+
display: block;
100+
transform: translateY(-50%);
101+
position: absolute;
102+
top: 50%;
103+
left: 10px;
104+
right: 10px;
105+
text-align: center;
106+
color: #828282;
107+
padding: 10px;
108+
font-size: 12px;
109+
}
110+
111+
#model-list {
112+
display: flex;
113+
flex-direction: column;
114+
justify-content: start;
115+
align-items: start;
116+
overflow-x: hidden;
117+
overflow-y: auto;
118+
width: 100%;
119+
}
120+
121+
#add-model-input {
122+
position: absolute;
123+
opacity: 0;
124+
visibility: hidden;
125+
}
126+
127+
#add-model-label,
128+
.model-item,
129+
#map-controls > div {
130+
display: flex;
131+
flex-direction: row;
132+
justify-content: space-between;
133+
align-items: center;
134+
}
135+
136+
#add-model-label {
137+
margin-top: 10px;
138+
width: 100%;
139+
min-height: 40px;
140+
box-sizing: border-box;
141+
border: 1px solid #ccc;
142+
border-radius: 5px;
143+
padding: 10px;
144+
background-color: #fff;
145+
user-select: none;
146+
}
147+
148+
#add-model-label:hover {
149+
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
150+
background-color: #f2f2f2;
151+
border-color: #f2f2f2;
152+
}
153+
154+
.control {
155+
cursor: pointer;
156+
}
157+
158+
.model-item {
159+
position: relative;
160+
width: 95%;
161+
height: 40px;
162+
box-sizing: border-box;
163+
border: 1px solid #ccc;
164+
border-radius: 5px;
165+
padding: 10px;
166+
background-color: #fff;
167+
}
168+
169+
.model-item:not(:first-child) {
170+
margin-top: 10px;
171+
}
172+
173+
.model-item.hovered {
174+
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
175+
background-color: #f2f2f2;
176+
border-color: #f2f2f2;
177+
}
178+
179+
.model-item.selected {
180+
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
181+
background-color: #ccc;
182+
border-color: #ccc;
183+
}
184+
185+
.model-item > svg {
186+
width: 12px;
187+
height: 12px;
188+
}
189+
190+
.model-item > svg:hover {
191+
fill: #f00;
192+
}
193+
194+
.model-item > span {
195+
display: inline-block;
196+
user-select: none;
197+
overflow: hidden;
198+
text-overflow: ellipsis;
199+
white-space: nowrap;
200+
max-width: calc(100% - 24px);
201+
}
202+
203+
#model-params {
204+
position: absolute;
205+
top: 10px;
206+
left: 320px;
207+
208+
display: none;
209+
210+
width: 300px;
211+
padding: 10px;
212+
box-sizing: border-box;
213+
background-color: #ffffffcc;
214+
border-radius: 10px;
215+
216+
overflow: hidden;
217+
user-select: none;
218+
}
219+
220+
#model-params > div {
221+
position: relative;
222+
display: flex;
223+
flex-direction: column;
224+
justify-content: center;
225+
align-items: center;
226+
}
227+
228+
#model-params svg {
229+
position: absolute;
230+
top: 5px;
231+
right: 5px;
232+
}
233+
234+
#model-params svg:hover {
235+
fill: #f00;
236+
}
237+
238+
#model-params h4 {
239+
margin-top: 10px;
240+
margin-bottom: 5px;
241+
font-weight: bold;
242+
}
243+
244+
#model-params p {
245+
font-size: 10px;
246+
color: #828282;
247+
padding-left: 5px;
248+
padding-right: 5px;
249+
}
250+
251+
#model-params > div,
252+
#model-params > div > div {
253+
width: 100%;
254+
}
255+
256+
.model-params-item {
257+
display: flex;
258+
flex-direction: row;
259+
justify-content: left;
260+
align-items: center;
261+
width: 100%;
262+
margin-left: 5px;
263+
}
264+
265+
.model-params-item:not(:last-child) {
266+
margin-bottom: 10px;
267+
}
268+
269+
.model-params-item > * {
270+
margin-right: 5px;
271+
}
272+
273+
.model-params-item > label {
274+
display: block;
275+
width: 85px;
276+
text-align: left;
277+
}
278+
279+
.model-params-item > textarea {
280+
min-height: 100px;
281+
}
282+
283+
.model-params-item > input[type='number'] {
284+
width: 30%;
285+
}
286+
287+
.mapgl-capture {
288+
cursor: move !important;
289+
}
290+
291+
.mapgl-scale {
292+
cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyOHB4IiB2aWV3Qm94PSItMi40IC0yLjQgMjguODAgMjguODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIj4KPGcgc3Ryb2tlLXdpZHRoPSIwIi8+CjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlPSIjQ0NDQ0NDIiBzdHJva2Utd2lkdGg9IjAuMTQ0Ii8+CjxnPgo8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE5Mi4wMDAwMDAsIC05Ni4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTIuMDAwMDAwLCA5Ni4wMDAwMDApIj4KPHBhdGggZD0iTTI0LDAgTDI0LDI0IEwwLDI0IEwwLDAgTDI0LDAgWiBNMTIuNTkzNDkwMSwyMy4yNTc4NDEgTDEyLjU4MTk0MDIsMjMuMjU5NTEzMSBMMTIuNTEwODc3NywyMy4yOTUwNDM5IEwxMi40OTE4NzkxLDIzLjI5ODc0NjkgTDEyLjQ5MTg3OTEsMjMuMjk4NzQ2OSBMMTIuNDc2NzE1MiwyMy4yOTUwNDM5IEwxMi40MDU2NTQ4LDIzLjI1OTUxMzEgQzEyLjM5NTgyMjksMjMuMjU2MzY2MiAxMi4zODcwNDkzLDIzLjI1OTAyMzUgMTIuMzgyMTQyMSwyMy4yNjQ5MDc0IEwxMi4zNzgwMzIzLDIzLjI3NTgzMSBMMTIuMzYwOTQxLDIzLjcwMzEwOTcgTDEyLjM2NTg5NDcsMjMuNzIzNDk5NCBMMTIuMzc2OTA0OCwyMy43MzU3MTM5IEwxMi40ODA0Nzc3LDIzLjgwOTY5MzEgTDEyLjQ5NTM0OTEsMjMuODEzNjEzNCBMMTIuNDk1MzQ5MSwyMy44MTM2MTM0IEwxMi41MDcxMTUyLDIzLjgwOTY5MzEgTDEyLjYxMDY5MDIsMjMuNzM1NzEzOSBMMTIuNjIzMjkzOCwyMy43MTk2NzMzIEwxMi42MjMyOTM4LDIzLjcxOTY3MzMgTDEyLjYyNjY1MjcsMjMuNzAzMTA5NyBMMTIuNjA5NTYxLDIzLjI3NTgzMSBDMTIuNjA3NTcyNCwyMy4yNjU3MDEzIDEyLjYwMTAxMTIsMjMuMjU5Mjk5MyAxMi41OTM0OTAxLDIzLjI1Nzg0MSBMMTIuNTkzNDkwMSwyMy4yNTc4NDEgWiBNMTIuODU4MzkwNiwyMy4xNDUyODYyIEwxMi44NDQ1NDg1LDIzLjE0NzMwNzIgTDEyLjY1OTg0NDMsMjMuMjM5NjU5NyBMMTIuNjQ5ODgyMiwyMy4yNDk5MDUyIEwxMi42NDk4ODIyLDIzLjI0OTkwNTIgTDEyLjY0NzE5NDMsMjMuMjYxMTExNCBMMTIuNjY1MDk0MywyMy42OTA2Mzg5IEwxMi42Njk5MzQ5LDIzLjcwMzQxNzggTDEyLjY2OTkzNDksMjMuNzAzNDE3OCBMMTIuNjc4Mzg2LDIzLjcxMDQ5MzEgTDEyLjg3OTM0MDIsMjMuODAzMjM4OSBDMTIuODkxNDI4NSwyMy44MDY4OTk5IDEyLjkwMjIzMzMsMjMuODAyOTg3NSAxMi45MDc4Mjg2LDIzLjc5NTIyNjQgTDEyLjkxMTgyMzUsMjMuNzgxMTYzOSBMMTIuODc3Njc3NywyMy4xNjY1MzMxIEMxMi44NzUyODgyLDIzLjE1NDU4OTcgMTIuODY3NDEwMiwyMy4xNDcwMDE2IDEyLjg1ODM5MDYsMjMuMTQ1Mjg2MiBMMTIuODU4MzkwNiwyMy4xNDUyODYyIFogTTEyLjE0MzA0NzMsMjMuMTQ3MzA3MiBDMTIuMTMzMjE3OCwyMy4xNDIzOTI1IDEyLjEyMjE3NjMsMjMuMTQ1MjYwNiAxMi4xMTU2MzY1LDIzLjE1MjU5NTQgTDEyLjEwOTkxNzMsMjMuMTY2NTMzMSBMMTIuMDc1NzcxNCwyMy43ODExNjM5IEMxMi4wNzUxMzIzLDIzLjc5MjY2MzkgMTIuMDgyODA5OSwyMy44MDE4NjAyIDEyLjA5MjY0ODEsMjMuODA0NTY3NiBMMTIuMTA4MjU2LDIzLjgwMzIzODkgTDEyLjMwOTIxMDYsMjMuNzEwNDkzMSBMMTIuMzE4NjQ5NywyMy43MDI0MzQ3IEwxMi4zMTg2NDk3LDIzLjcwMjQzNDcgTDEyLjMyMjUwNDMsMjMuNjkwNjM4OSBMMTIuMzQwNDAxLDIzLjI2MTExMTQgTDEyLjMzNzI0NSwyMy4yNDg1MTc2IEwxMi4zMzcyNDUsMjMuMjQ4NTE3NiBMMTIuMzI3NzUzMSwyMy4yMzk2NTk3IEwxMi4xNDMwNDczLDIzLjE0NzMwNzIgWiIgZmlsbC1ydWxlPSJub256ZXJvIj4gPC9wYXRoPiA8cGF0aCBkPSJNMTEsMyBDMTEuNTUyMywzIDEyLDMuNDQ3NzIgMTIsNCBDMTIsNC41MTI4MzE0MyAxMS42MTM5NzMsNC45MzU1MDY1MyAxMS4xMTY2MjM5LDQuOTkzMjcyMiBMMTEsNSBMNSw1IEw1LDE5IEwxOSwxOSBMMTksMTMgQzE5LDEyLjQ0NzcgMTkuNDQ3NywxMiAyMCwxMiBDMjAuNTEyODUsMTIgMjAuOTM1NTA5MiwxMi4zODYwMjcgMjAuOTkzMjcyNSwxMi44ODMzNzYxIEwyMSwxMyBMMjEsMTkgQzIxLDIwLjA1NDM5MDkgMjAuMTg0MTUsMjAuOTE4MTY3OCAxOS4xNDkyNjYxLDIwLjk5NDUxNDQgTDE5LDIxIEw1LDIxIEMzLjk0NTYzNzczLDIxIDMuMDgxODM0ODMsMjAuMTg0MTUgMy4wMDU0ODU3MywxOS4xNDkyNjYxIEwzLDE5IEwzLDUgQzMsMy45NDU2Mzc3MyAzLjgxNTg3NzMzLDMuMDgxODM0ODMgNC44NTA3Mzc1OSwzLjAwNTQ4NTczIEw1LDMgTDExLDMgWiBNMTkuNzUsMyBDMjAuNDQwNCwzIDIxLDMuNTU5NjQgMjEsNC4yNSBMMjEsOCBDMjEsOC41NTIyOCAyMC41NTIzLDkgMjAsOSBDMTkuNDQ3Nyw5IDE5LDguNTUyMjggMTksOCBMMTksNi40MTQyMSBMMTIuNDE0MiwxMyBMMTQsMTMgQzE0LjU1MjMsMTMgMTUsMTMuNDQ3NyAxNSwxNCBDMTUsMTQuNTUyMyAxNC41NTIzLDE1IDE0LDE1IEwxMC4yNSwxNSBDOS41NTk2NCwxNSA5LDE0LjQ0MDQgOSwxMy43NSBMOSwxMCBDOSw5LjQ0NzcyIDkuNDQ3NzIsOSAxMCw5IEMxMC41NTIzLDkgMTEsOS40NDc3MiAxMSwxMCBMMTEsMTEuNTg1OCBMMTcuNTg1OCw1IEwxNiw1IEMxNS40NDc3LDUgMTUsNC41NTIyOCAxNSw0IEMxNSwzLjQ0NzcyIDE1LjQ0NzcsMyAxNiwzIEwxOS43NSwzIFoiIGZpbGw9IiMwMDAwMDAiPiA8L3BhdGg+IDwvZz4gPC9nPiA8L2c+IDwvZz4KPC9zdmc+')
293+
0 0,
294+
ns-resize !important;
295+
}
296+
297+
.mapgl-rotate {
298+
cursor: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLDZDNi4zLDYsMiw4LjE1LDIsMTFjMCwyLjQ1LDMuMTksNC4zOCw3LjcxLDQuODhsLS40Mi40MWExLDEsMCwwLDAsMCwxLjQyLDEsMSwwLDAsMCwxLjQyLDBsMi0yYTEsMSwwLDAsMCwuMjEtLjMzLDEsMSwwLDAsMCwwLS43NiwxLDEsMCwwLDAtLjIxLS4zM2wtMi0yYTEsMSwwLDAsMC0xLjQyLDEuNDJsLjEyLjExQzYsMTMuMzQsNCwxMiw0LDExYzAtMS4yMiwzLjEyLTMsOC0zczgsMS43OCw4LDNjMCwuODMtMS40NSwyLTQuMjEsMi42QTEsMSwwLDAsMCwxNSwxNC43OWExLDEsMCwwLDAsMS4xOS43N0MxOS44NCwxNC43NiwyMiwxMy4wNiwyMiwxMSwyMiw4LjE1LDE3LjcsNiwxMiw2WiIvPjwvc3ZnPg==')
299+
0 0,
300+
ew-resize !important;
301+
}
302+
303+
.loader {
304+
width: 12px;
305+
height: 12px;
306+
border-radius: 50%;
307+
display: block;
308+
margin: 15px auto;
309+
position: relative;
310+
background: #fff;
311+
box-shadow: -24px 0 #fff, 24px 0 #fff;
312+
box-sizing: border-box;
313+
animation: shadow-pulse 2s linear infinite;
314+
}
315+
316+
@keyframes shadow-pulse {
317+
33% {
318+
background: #fff;
319+
box-shadow: -24px 0 #ccc, 24px 0 #fff;
320+
}
321+
66% {
322+
background: #ccc;
323+
box-shadow: -24px 0 #fff, 24px 0 #fff;
324+
}
325+
100% {
326+
background: #fff;
327+
box-shadow: -24px 0 #fff, 24px 0 #ccc;
328+
}
329+
}
330+
</style>
331+
</head>
332+
<body>
333+
<div id="map"></div>
334+
<div id="main-wrap"></div>
335+
<div id="model-params"></div>
336+
<script src="https://mapgl.2gis.com/api/js/v1"></script>
337+
<script src="index.js"></script>
338+
</body>
339+
</html>

0 commit comments

Comments
 (0)