Mapbox map styling for description box

Question

Я новичок, работающий над его навыками переднего конца, и я разрабатываю свой собственный веб-сайт для изучения. Я пытаюсь реализовать карту, используя API Mapbox, и я не могу получить стиль окна описания, которое я использую на карте.

Link to my website

Карта находится в нижней части. Теперь мне удалось разместить скрытое поле описания на карте. Когда щелкнут маркер на карте, скрытое свойство будет удалено, и при щелчке карты он будет добавлен обратно.

map.css

#map { 
    width:100%; 
    height: 500px; 
} 

pre#description{ 
    position: relative; 
    top: -100px; 
    left: 20px; 
    padding:5px 10px; 
    background: rgba(0,0,0,0.5); 
    color: #fff; 
    font-size: 11px; 
    line-height: 18px; 
    border-radius: 5px; 
    max-width: 25%; 
    overflow-x: hidden; 
    overflow-y: visible; 
} 

map.js

L.mapbox.accessToken = 'pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ'; 
var map = L.mapbox.map('map', 'examples.map-i86nkdio') 
    .setView([30, 60]) 
    .on('click', function(){ 
     $("#description").addClass('hidden'); 
    }); 

L.marker([28.612896, 77.177275], { 
    icon: L.mapbox.marker.icon({ 
     'marker-size': 'large', 
     'marker-symbol': 'warehouse', 
     'marker-color': '#2880CA' 
    }), 
    title: 'My Location' 
}) 
.on('click', function(){ 
    $("#description").removeClass('hidden').empty().append('My Location'); 
}) 
.addTo(map); 

L.marker([51.081482, 10.300311], { 
    icon: L.mapbox.marker.icon({ 
     'marker-size': 'large', 
     'marker-symbol': 'circle-stroked', 
     'marker-color': '#74DF00' 
    }), 
    title: 'Social Accounting System' 
}) 
.on('click', function(){ 
    $("#description").removeClass('hidden') 
     .empty() 
     .append('Social Accounting System developed using Laravel + Bootstrap.Project includes different user roles performing a variety of operations such as transferring commodities and selling them on the market'); 
}) 
.addTo(map); 

L.marker([22.281385, 114.171317], { 
    icon: L.mapbox.marker.icon({ 
     'marker-size': 'large', 
     'marker-symbol': 'circle-stroked', 
     'marker-color': '#74DF00' 
    }), 
    title: 'Social Accounting System' 
}) 
.on('click', function(){ 
    $("#description").removeClass('hidden') 
     .empty() 
     .append('AngulAir was a demo project developed to show basic CRUD operations performed on the front end using AngularJS'); 
}) 
.addTo(map); 

map.fitBounds([ 
    [22.281385, 114.171317], 
    [51.081482, 10.300311] 
]); 

Проблема в том, что я не очень хорошо с CSS, и я пытаюсь позиционировать поле описания на вершине слева от верхнего правого. Я успешно разместил его в левом нижнем углу, но всякий раз, когда появляется окно, в нижней части карты появляется белое пространство.

Кроме этого, на коробке была горизонтальная прокрутка, но мне нужен вертикальный свиток. Поэтому я сделал overflow-x: hidden и overflow-y: visible. Теперь горизонтальная прокрутка выключена, но мне нужно обернуть текст вертикальным прокруткой.

А также я решил, что буду использовать max-width: 25%, чтобы он реагировал на все порты просмотра. Есть лучший способ сделать это?

Как выполнить эти задачи?

Answer 1

Почему бы не использовать уровень управления по умолчанию и создать пользовательский L.Control? Делая это, позиционирование все заботятся для вас:

JS:

var MyCustomControl = L.Control.extend({ 
    options: { 
     // Default control position 
     position: 'bottomleft' 
    }, 
    onAdd: function (map) { 
     // Create a container with classname and return it 
     return L.DomUtil.create('div', 'my-custom-control'); 
    }, 
    setContent: function (content) { 
     // Set the innerHTML of the container 
     this.getContainer().innerHTML = content; 
    } 
}); 

// Assign to a variable so you can use it later and add it to your map 
var myCustomControl = new MyCustomControl().addTo(map); 

Теперь добавим стили, принять к сведению :empty pseudoselector, который скроет контейнер, если он пуст.

CSS:

.my-custom-control { 
    padding:5px 10px; 
    background: rgba(0,0,0,0.5); 
    color: #fff; 
    font-size: 11px; 
    line-height: 18px; 
    border-radius: 5px; 
} 

.my-custom-control:empty { 
    display: none; 
} 

Теперь вы можете использовать это в ваших clickhandlers:

// Set content on a marker click 
marker.on('click', function() { 
    myCustomControl.setContent('My awesome content'); 
}); 

// Remove content on map click 
map.on('click', function() { 
    myCustomControl.setContent(''); 
}); 

Вот рабочий пример на Plunker: http://plnkr.co/edit/wrlC7AAHLBWsDgzk8PRw?p=preview