KD-TryOnMap

by vasilij_

HTML

<div id="floating-panel">
		<input type=button value="?" onclick="showHideElement('descr');" class="buttn" id="btnshowinfo" title="Показать описание">
		<input type="text" class="inp inp_c" id="inp_coords" autocomplete="off" placeholder="Введите координаты места"> <input type=button class="buttn" value="→" id="btn_coords">
		<input type=button value="Координаты камней" class="buttn" id="btnshowrockscoords">
		<input type=button value="Высоты вокруг" class="buttn" id="btn_show_elev"> <span class="labels" id="err" style="display:none"> </span>
		<input type="text" class="inp inp_numbs" id="inp_radius" autocomplete="off" placeholder="Радиус" value="20"> <span class="labels">м радиус</span> 
		<input type="text" class="inp inp_numbs" id="inp_radius2" autocomplete="off" placeholder="Радиус #2" value="0"> <span class="labels" id="label_r2">м радиус #2</span> <br/>
</div>

<div id="descr" style="display: none;">
<b>Описание:</b> Можно задать координаты предполагаемого места. <br>
Цифра в центре - высота Камня "Ночь" над уровнем моря. <br>
Остальные цифры - разница высоты между этими камнями и "ночью". Плюсовое значение - значит камень выше на столько метров, минусовое, - соответственно, ниже. <br>
По кнопке можно посмотреть GPS координаты всех камней. <br>
И высоты, окружающие пространство. По ним можно оценить наклон площадки и рельеф местности. <br>
Можно задать второй радиус, чтобы понять расстояние до ближайших объектов.<br>
</div>
	
<div id="map" class="google-map" style="width: 100%; min-height: 100px;"></div>

<!-- 
<script src="http://localhost/kd/tocreators/tryonmap/tryonmap.js"
     ></script>
 <script src="http://localhost/kd/user/themes/quark/js/my.js"
     ></script>
-->
<script src="https://krugdushi.ru/tocreators/tryonmap/tryonmap.js"
     ></script>
 <script src="https://krugdushi.ru/user/themes/quark/js/my.js"
     ></script>


<script     ...

CSS

.labels { 
	background-color:#AAAAAA; 
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 0;
	
	font-family: Roboto,Arial,sans-serif;
	font-size: 15px;
}

#floating-panel {
	//position: relative;
	//top: 60px;
	//left: 5px;
	//z-index: 5;
}

.buttn {
	height:28px;
	//border: 2px solid #fff;
	//border-radius: 3px;
	//box-shadow: 0 2px 6px rgba(0,0,0,.3);
	cursor: pointer;
	text-align: center;
	
	font-family: Roboto,Arial,sans-serif;
	font-size: 14px;
	line-height: 25px;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-right: 10px;
}

.inp {
	height:27px;
	font-size: 14px;
	//border-color: #828282;
	
	font-family: Roboto,Arial,sans-serif;
	padding-left: 3px;
	padding-right: 3px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#btnshowinfo {
	margin-left: 0px;
}

.inp_c {
	width:155px;
	margin: 0;
}

.inp_numbs {
	width:35px;
}

.labels {
	margin-right: 10px;
}

#inp_radius {
	margin-left: 0px;
}
#inp_radius2 {
	margin-left: 0px;
}