Responsive map examples (#7950)

This commit is contained in:
Robert Linder
2022-01-27 10:16:55 +01:00
committed by GitHub
parent f1f4e05ba1
commit 9ea16a2e3f
2 changed files with 10 additions and 8 deletions

View File

@ -1,8 +1,9 @@
<table role="presentation">
<tr><td style='text-align: center; border: none'>
<tr><td style='text-align: center; border: none; padding: 0;'>
<iframe src='{{ include.url }}'
width='{% if include.width %}{{ include.width }}{% else %}616{% endif %}'
height='{% if include.height %}{{ include.height }}{% else %}416{% endif %}'></iframe>
width='{% if include.width %}{{ include.width }}{% else %}600{% endif %}'
height='{% if include.height %}{{ include.height }}{% else %}400{% endif %}'
style="max-width: 100%; max-height: 90vh; box-sizing: border-box;"></iframe>
</td></tr>
<tr><td style='text-align: center; border: none'>
<small><a href='{{ include.url }}'>See this example stand-alone.</a></small>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
{% capture title %}{% if page.title %}{{ page.title }} - {% elsif post.title %}{{ post.title }} - {% endif %}{% endcapture %}
<title>{{ title }}Leaflet</title>
@ -12,18 +12,19 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.css" integrity="{{site.integrity_hash_css}}" crossorigin=""/>
<script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.js" integrity="{{site.integrity_hash_uglified}}" crossorigin=""></script>
{% unless page.customMapContainer == "true" %}
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
.leaflet-container {
height: 400px;
width: 600px;
max-width: 100%;
max-height: 100%;
}
</style>
{% endunless %}
{% if page.css %}<style>{{ page.css }}</style>{% endif %}
</head>
<body{% if page.bodyclass %} class="{{ page.bodyclass }}"{% endif %}>