지도에 경계 반경 추가

Question

Ushahidi라는 매핑 플랫폼에서 실행되는 웹 사이트가 있습니다. 기본 템플릿은 꽤 boxy하기 때문에 CSS를 사용하고 border-radius를 사용하여 모든 것을 반올림했습니다.

지도가 다른 요소와 함께 도움이되었지만지도가 너무 작아서 안락하지 않습니다!

여기있는 사람이이 경험이 있는지 궁금 할 수도 있습니다. html using inspect 요소와 뷰 소스는 다릅니다. 이것이 정확히 무엇을 의미하는지 모르지만 html이지도 제공 업체에 의해 끌어 당겨 졌다고 추측합니까?

<div class="map " id="map"></div> 
<div style="clear:both;"></div> 
<div id="mapStatus"> 
    <div id="mapScale"></div> 
    <div id="mapMousePosition"></div> 
    <div id="mapProjection"></div> 
    <div id="mapOutput"></div> 
</div> 

나도 요소의 HTML을 검사하는 화면을 추가했습니다 : 여기

는 소스보기에서 HTML입니다. "오픈 레이어"를 사용하는 것 같습니다. 나는 그것의 이야기를 들었지만 계속 진행되는 것을 완전히 이해하지 못했습니다.

지도의 가장자리를 둥글게 만들 수 있습니까? 그 도움이된다면 여기 사이트는 다음과 같습니다 http://tinyurl.com/c8djrvr

Answer 1

이 border-radius 2 층을 적용합니다.

CSS 그것은 작동

div.map { 
    border: #999 1px solid; 
    width: 800px; 
    height: 366px; 
    position: relative; 
    height: 650px; 
    border-radius: 25px;  /* ADD THIS */ 
} 

#OpenLayers_Map_11_OpenLayers_ViewPort { 
    border-radius: 25px;  /* ADD THIS */ 
} 

. 원하는 많은 픽셀을 사용하십시오. 나는 25px을 사용했다.

Answer 2

좀 더 일반적이고 안전한 CSS 선택기를 제안

(ID #OpenLayers_Map_11_OpenLayers_ViewPort는 OpenLayers에 의해 생성되고이 값은 예측할 이후, 점을 포함하고 CSS 선택기에 대한 부적합하다 OL 2.12 이상 생산 아이디의 등) :

.olMap, .olMapViewport { 
    border-radius: 25px; 
}