almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-29 11:52:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: display wikipedia link in OSM popup template when possible (#2358)

Browse source 
![image](https://github.com/user-attachments/assets/b22fd52e-1dfc-48f5-9f9e-0db12bf87fbe)

(And move popup related CSS to a dedicated file.)

cf #661
This commit is contained in:
Yohan Boniface 2024-12-11 17:48:40 +01:00 committed by GitHub
commit c41bf9129d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 135 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
umap/static/umap/css/popup.css Normal file
View file

@ -0,0 +1,125 @@
.umap-popup {
display: flex;
flex-flow: column nowrap;
height:100%;
}
.umap-popup-footer {
position: relative;
background-color: rgb(68, 68, 68);
color: white;
display: flex;
width: 100%;
margin-top: auto;
min-width: 99px;
border-radius: 2px;
max-height: 24px;
justify-content: space-around;
}
.umap-popup a:hover {
text-decoration: underline;
}
.popup-title {
display: flex;
align-items: center;
}
.popup-title .icon {
margin: 5px;
}
a[href^='mailto']::before {
content: '✉︎ ';
}
a[href^='tel']::before {
content: '☎︎ ';
}
address span {
padding-inline-end: 5px;
}
.osm-link {
margin-top: 10px;
text-align: end;
font-style: italic;
}
.wikipedia-link a::before {
content: '⇒ ';
}
span.popup-icon {
padding: 5px;
}
.leaflet-popup-content {
min-width: 200px;
line-height: inherit;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.leaflet-popup-content-wrapper {
border-radius: 4px;
}
.umap-popup-content {
max-height: 500px;
flex-grow: 1;
margin-bottom: 4px;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
.umap-popup-content iframe {
min-width: 300px;
max-width: 100%;
}
.umap-popup-content tr:nth-child(odd) {
background-color: #f6f6f6;
}
.umap-popup-content th {
text-align: start;
}
.umap-popup-content td {
word-break: break-word;
}
.umap-popup-content th,
.umap-popup-content td {
padding: 1px 3px;
}
.umap-popup-container {
flex-grow: 1;
margin-bottom: 10px;
}
.umap-popup-container ul {
list-style-type: disc;
}
.leaflet-control-toolbar,
.leaflet-bar {
box-shadow: none;
}
.marker-cluster {
background-color: white;
width: 40px;
height: 40px;
}
.leaflet-contextmenu-icon {
display: none;
}
.umap-popup-large iframe {
/* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
max-width: 100% !important;
min-width: 500px;
}
.umap-popup-large .umap-popup-content {
width: 500px;
}
.umap-popup-content img {
max-width: 100%;
}
.umap-georss-link .popup-title {
text-align: center;
}
@media all and (max-width: 480px) {
.umap-popup-large iframe {
min-width: 300px;
}
.umap-popup-large .umap-popup-content {
width: 300px;
}
}

9
umap/static/umap/js/modules/rendering/template.js
View file

@ -175,6 +175,7 @@ class OSM extends TitleMixin(PopupTemplate) {
renderBody(feature) { renderBody(feature) {
const props = feature.properties const props = feature.properties
const body = document.createElement('div') const body = document.createElement('div')
const locale = getLocale()
const street = props['addr:street'] const street = props['addr:street']
if (street) { if (street) {
const row = DomUtil.add('address', 'address', body) const row = DomUtil.add('address', 'address', body)
@ -218,6 +219,14 @@ class OSM extends TitleMixin(PopupTemplate) {
) )
) )
} }
const wikipedia = props[`wikipedia:${locale}`] || props.wikipedia
if (wikipedia) {
body.appendChild(
Utils.loadTemplate(
`<div class="wikipedia-link"><a href="https://wikipedia.org/wiki/${wikipedia}" target="_blank">${translate('Wikipedia')}</a></div>`
)
)
}
const id = props['@id'] || props.id const id = props['@id'] || props.id
if (id) { if (id) {
body.appendChild( body.appendChild(

123
umap/static/umap/map.css
View file

@ -789,54 +789,6 @@ a.umap-control-caption,
text-align: center; text-align: center;
} }
/* ********************************* */
/* Popup */
/* ********************************* */
.umap-popup {
display: flex;
flex-flow: column nowrap;
height:100%;
}
.umap-popup-footer {
position: relative;
background-color: rgb(68, 68, 68);
color: white;
display: flex;
width: 100%;
margin-top: auto;
min-width: 99px;
border-radius: 2px;
max-height: 24px;
justify-content: space-around;
}
.umap-popup a:hover {
text-decoration: underline;
}
.popup-title {
display: flex;
align-items: center;
}
.popup-title .icon {
margin: 5px;
}
a[href^='mailto']::before {
content: '✉︎ ';
}
a[href^='tel']::before {
content: '☎︎ ';
}
address span {
padding-inline-end: 5px;
}
.osm-link {
margin-top: 10px;
text-align: end;
font-style: italic;
}
span.popup-icon {
padding: 5px;
}
/* ************* */ /* ************* */
@ -1167,75 +1119,6 @@ span.popup-icon {
.leaflet-top, .leaflet-bottom { .leaflet-top, .leaflet-bottom {
z-index: var(--zindex-controls); z-index: var(--zindex-controls);
} }
.leaflet-popup-content {
min-width: 200px;
line-height: inherit;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.leaflet-popup-content-wrapper {
border-radius: 4px;
}
.umap-popup-content {
max-height: 500px;
flex-grow: 1;
margin-bottom: 4px;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
.umap-popup-content iframe {
min-width: 300px;
max-width: 100%;
}
.umap-popup-content tr:nth-child(odd) {
background-color: #f6f6f6;
}
.umap-popup-content th {
text-align: start;
}
.umap-popup-content td {
word-break: break-word;
}
.umap-popup-content th,
.umap-popup-content td {
padding: 1px 3px;
}
.umap-popup-container {
flex-grow: 1;
margin-bottom: 10px;
}
.umap-popup-container ul {
list-style-type: disc;
}
.leaflet-control-toolbar,
.leaflet-bar {
box-shadow: none;
}
.marker-cluster {
background-color: white;
width: 40px;
height: 40px;
}
.leaflet-contextmenu-icon {
display: none;
}
.umap-popup-large iframe {
/* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
max-width: 100% !important;
min-width: 500px;
}
.umap-popup-large .umap-popup-content {
width: 500px;
}
.umap-popup-content img {
max-width: 100%;
}
.umap-georss-link .popup-title {
text-align: center;
}
.leaflet-inplace-toolbar { .leaflet-inplace-toolbar {
z-index: var(--zindex-toolbar)!important; z-index: var(--zindex-toolbar)!important;
} }
@ -1311,12 +1194,6 @@ span.popup-icon {
.umap-permanent-credits-container { .umap-permanent-credits-container {
max-width: 100%; max-width: 100%;
} }
.umap-popup-large iframe {
min-width: 300px;
}
.umap-popup-large .umap-popup-content {
width: 300px;
}
.attribution-toggle { .attribution-toggle {
display: inline-block; display: inline-block;

1
umap/templates/umap/css.html
View file

@ -24,6 +24,7 @@
<link rel="stylesheet" href="{% static 'umap/font.css' %}" /> <link rel="stylesheet" href="{% static 'umap/font.css' %}" />
<link rel="stylesheet" href="{% static 'umap/css/icon.css' %}" /> <link rel="stylesheet" href="{% static 'umap/css/icon.css' %}" />
<link rel="stylesheet" href="{% static 'umap/base.css' %}" /> <link rel="stylesheet" href="{% static 'umap/base.css' %}" />
<link rel="stylesheet" href="{% static 'umap/css/popup.css' %}" />
<link rel="stylesheet" href="{% static 'umap/css/form.css' %}" /> <link rel="stylesheet" href="{% static 'umap/css/form.css' %}" />
<link rel="stylesheet" href="{% static 'umap/content.css' %}" /> <link rel="stylesheet" href="{% static 'umap/content.css' %}" />
<link rel="stylesheet" href="{% static 'umap/nav.css' %}" /> <link rel="stylesheet" href="{% static 'umap/nav.css' %}" />