CSS с LeafLet

Я использую Angular 6 и Leaflet. Я не понимаю, почему не могу определить свой css в моем компоненте ... Это мой код:

HTML

<div class = "custom-popup" id = "frugalmap">

CSS

.custom-popup .leaflet-popup-content-wrapper {
    background:#2c3e50;
    color:#fff;
    font-size:160px;
    line-height:24px;
    border-radius: 0px;
}

.custom-popup .leaflet-popup-content-wrapper a {
    color:rgba(255,255,255,0.1);
}

.custom-popup .leaflet-popup-tip-container {
    width:30px;
    height:15px;
}

.custom-popup .leaflet-popup-tip {
    background: transparent;
    border: none;
    box-shadow: none;
}

var customPopup = "<h4>CHU Nantes</h4>" 
var customOptions = {'className' : 'custom' }
var CHUNantes= L.marker([47.21082, -1.55446], {icon: myIcon}).bindPopup(customPopup,customOptions).on('mouseover', function (e) { this.openPopup();});

Что вы имеете в виду, что не можете определить свой CSS в компоненте? Вы можете использовать styleUrls

— 07.09.2018 20:31

мой css не работает, понимаете почему?

— 07.09.2018 20:34

javascript css angular typescript leaflet

07.09.2018 19:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

823

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо определить пользовательский маркер следующим образом и поместите CSS в global styles.css:

const myIcon = L.icon({
     // place your icon url
     iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
     iconSize: [32, 37],
     iconAnchor: [16, 37],
     popupAnchor: [0, -28]
});

const customPopup = "<h4>CHU Nantes</h4>" 
const customOptions = {'className' : 'custom-popup' }
const nantes= L.marker([47.21082, -1.55446], {icon: myIcon}).addTo(map);

nantes.bindPopup(customPopup,customOptions)
      .on('mouseover', function (e) { this.openPopup()});

Демо

07.09.2018 21:03