Geographic Information Systems Asked by organic88 on July 16, 2021
I like Leaflet a lot. But I want to ask how to remove white sides in the popup? I manage to turn of padding but it only removed top and bottom, but sides still stand. I will insert a image and it will be easier to understand.
I mark sides with yellow color and I need to delete them and (x) close button should be on image. What am I doing wrong here?
The map is made using basic Leaflet JS tutorials.
My CSS:
#map {
height: 680px;
}
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
background:rgb(255, 255, 255, 0.90);
color: white;
padding: 0 0 0 0; /*Deleted top and bottom white sides!*/
}
.card-text {
font-size: 11px;
color: black !important;
}
.card-title {
color: rgb(9, 65, 139) !important;
}
.container{
width:450px;
}
.imgar{
padding: 5px 5px 5px 5px;
}
.imgar:hover{
background:rgb(9, 65, 139, 0.8);
padding: 5px 5px 5px 5px;
}
My customJavaScript:
/*Custom popup design*/
var customPopup_d = "<div class='card' style='width: 18rem;'><div id='carouselExampleControls' class='carousel slide' data-ride='carousel'><div class='carousel-inner'><div class='carousel-item active'><img class='d-block w-100' src='http://localhost:8080/Karte_simb/images/aizsaules_1a.jpg' alt='First slide'></div><div class='carousel-item'><img class='d-block w-100' src='http://localhost:8080/Karte_simb/images/aizsaules_1a_2.jpg' alt='Second slide'></div></div><a class='carousel-control-prev' href='#carouselExampleControls' role='button' data-slide='prev'><span class='carousel-control-prev-icon' aria-hidden='true'></span><span class='sr-only'>Previous</span></a><a class='carousel-control-next' href='#carouselExampleControls' role='button' data-slide='next'><span class='carousel-control-next-icon' aria-hidden='true'></span><span class='sr-only'>Next</span></a></div><div class='card-body'><h5 class='card-title text-center'> Kapsētas ieejas vārti </h5><p class='card-text'>Sākotnējais nosaukums – Rīgas Jaunie kapi. 1925. gadā šajos kapos tika apglabātas dažādas personas, kuras nepiederēja pie nevienas draudzes. Oficiāli kapsētu atklāja 1929. gadā, kad tajā tika apglabāts latviešu dzejnieks Rainis (īstajā vārdā – Jānis Pliekšāns). Pēc tam kapsēta tika pārdēvēta par Raiņa kapiem.</p><div class='row'><div class='col'><img src='https://cdn3.iconfinder.com/data/icons/map-markers-1/512/residence-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> Aizsaules iela 1a</span></div><div class='col'><img src='https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-011_calendar-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> 1929. gads</span></div></div>";
/*Custom options*/
ar customOptions =
{
'maxWidth': '300',
'className' : 'custom'
}
/* bind the popup to marker.*/
marker.bindPopup(customPopup_3,customOptions);
this will help you out!
.leaflet-popup-tip-container {
background: transparent;
display: none;
}
.leaflet-popup-content-wrapper {
border-radius: 0;
border:3px solid rgba(0,0,0,0.4);
}
Answered by manisha on July 16, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP