Skip to content

Commit

Permalink
Deploy andrewgryan/leaflet-html to andrewgryan/leaflet-html:gh-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
GitHub Actions committed May 9, 2024
0 parents commit 719b82e
Show file tree
Hide file tree
Showing 13 changed files with 514 additions and 0 deletions.
3 changes: 3 additions & 0 deletions 404.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!doctype html>
<title>404 Not Found</title>
<h1>404 Not Found</h1>
128 changes: 128 additions & 0 deletions articles/basic/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
</style>
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="/leaflet-html/style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script type="importmap">
{
"imports": {
"leaflet": "https://unpkg.com/[email protected]/dist/leaflet-src.esm.js"
}
}
</script>
<script
type="module"
src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
></script>
</head>
<body>
<nav>
<a href="https://andrewgryan.github.io/leaflet-html/">Home</a>
<a href="https://andrewgryan.github.io/leaflet-html/articles/">Articles</a>
</nav>

<main>
<h1>Basic usage</h1>
<p>The minimal <code>leaflet-html</code> app is a basemap centered and zoomed on a location.</p>
<pre data-lang="html" style="background-color:#2b303b;color:#c0c5ce;" class="language-html "><code class="language-html" data-lang="html"><span>&lt;</span><span style="color:#bf616a;">l-map </span><span style="color:#d08770;">center</span><span>=&quot;</span><span style="color:#a3be8c;">[53, 0]</span><span>&quot; </span><span style="color:#d08770;">zoom</span><span>=&quot;</span><span style="color:#a3be8c;">4</span><span>&quot;&gt;
</span><span> &lt;</span><span style="color:#bf616a;">l-tile-layer
</span><span> </span><span style="color:#d08770;">url-template</span><span>=&quot;</span><span style="color:#a3be8c;">https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png</span><span>&quot;
</span><span> &gt;&lt;/</span><span style="color:#bf616a;">l-tile-layer</span><span>&gt;
</span><span>&lt;/</span><span style="color:#bf616a;">l-map</span><span>&gt;
</span></code></pre>
<l-map center="[53, 0]" zoom="4">
<l-tile-layer
url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
></l-tile-layer>
</l-map>
<p>To add the above widget to a HTML document both JS and CSS tags need to be included in the <code>&lt;head&gt;</code> of the page.</p>
<h2 id="assets">Assets</h2>
<p>Basic HTML recommended settings, e.g. <code>charset</code>, <code>lang</code>, and <code>viewport</code> to help with cross device support.
Can be placed in the <code>&lt;head&gt;</code> tag, along with CSS and JS assets.</p>
<pre data-lang="html" style="background-color:#2b303b;color:#c0c5ce;" class="language-html "><code class="language-html" data-lang="html"><span>&lt;</span><span style="color:#bf616a;">head </span><span style="color:#d08770;">lang</span><span>=&quot;</span><span style="color:#a3be8c;">en</span><span>&quot;&gt;
</span><span> &lt;</span><span style="color:#bf616a;">meta </span><span style="color:#d08770;">charset</span><span>=&quot;</span><span style="color:#a3be8c;">utf-8</span><span>&quot; /&gt;
</span><span> &lt;</span><span style="color:#bf616a;">meta </span><span style="color:#d08770;">name</span><span>=&quot;</span><span style="color:#a3be8c;">viewport</span><span>&quot; </span><span style="color:#d08770;">content</span><span>=&quot;</span><span style="color:#a3be8c;">width=device-width, initial-scale=1</span><span>&quot; /&gt;
</span><span>&lt;/</span><span style="color:#bf616a;">head</span><span>&gt;
</span></code></pre>
<h3 id="leaflet">Leaflet</h3>
<p>Leaflet is an external dependency of <code>leaflet-html</code>, as such,
the standard Leaflet assets should be included.</p>
<pre data-lang="html" style="background-color:#2b303b;color:#c0c5ce;" class="language-html "><code class="language-html" data-lang="html"><span>&lt;</span><span style="color:#bf616a;">head</span><span>&gt;
</span><span>...
</span><span>&lt;</span><span style="color:#bf616a;">link
</span><span> </span><span style="color:#d08770;">rel</span><span>=&quot;</span><span style="color:#a3be8c;">stylesheet</span><span>&quot;
</span><span> </span><span style="color:#d08770;">href</span><span>=&quot;</span><span style="color:#a3be8c;">https://unpkg.com/[email protected]/dist/leaflet.css</span><span>&quot;
</span><span> </span><span style="color:#d08770;">integrity</span><span>=&quot;</span><span style="color:#a3be8c;">sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=</span><span>&quot;
</span><span> </span><span style="color:#d08770;">crossorigin</span><span>=&quot;&quot;
</span><span>/&gt;
</span><span>&lt;</span><span style="color:#bf616a;">script
</span><span> </span><span style="color:#d08770;">src</span><span>=&quot;</span><span style="color:#a3be8c;">https://unpkg.com/[email protected]/dist/leaflet.js</span><span>&quot;
</span><span> </span><span style="color:#d08770;">integrity</span><span>=&quot;</span><span style="color:#a3be8c;">sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=</span><span>&quot;
</span><span> </span><span style="color:#d08770;">crossorigin</span><span>=&quot;&quot;
</span><span>&gt;&lt;/</span><span style="color:#bf616a;">script</span><span>&gt;
</span><span>...
</span><span>&lt;/</span><span style="color:#bf616a;">head</span><span>&gt;
</span></code></pre>
<h3 id="leaflet-html">Leaflet-HTML</h3>
<p>Leaflet-HTML is available via <strong>npm</strong> and <strong>unpkg</strong>.
To get started quickly, use the CDN version available on <strong>unpkg</strong>.</p>
<pre data-lang="html" style="background-color:#2b303b;color:#c0c5ce;" class="language-html "><code class="language-html" data-lang="html"><span>&lt;</span><span style="color:#bf616a;">script </span><span style="color:#d08770;">type</span><span>=&quot;</span><span style="color:#a3be8c;">importmap</span><span>&quot;&gt;
</span><span>{
</span><span> &quot;imports&quot;: {
</span><span> &quot;leaflet&quot;: &quot;https://unpkg.com/[email protected]/dist/leaflet.js&quot;
</span><span> }
</span><span>}
</span><span>&lt;/</span><span style="color:#bf616a;">script</span><span>&gt;
</span></code></pre>
<pre data-lang="html" style="background-color:#2b303b;color:#c0c5ce;" class="language-html "><code class="language-html" data-lang="html"><span>&lt;</span><span style="color:#bf616a;">script
</span><span> </span><span style="color:#d08770;">type</span><span>=&quot;</span><span style="color:#a3be8c;">module</span><span>&quot;
</span><span> </span><span style="color:#d08770;">src</span><span>=&quot;</span><span style="color:#a3be8c;">https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js</span><span>&quot;
</span><span>&gt;&lt;/</span><span style="color:#bf616a;">script</span><span>&gt;
</span></code></pre>
<p>The <code>@latest</code> keyword should keep your site up to date during development.</p>
<h2 id="minimal-style">Minimal style</h2>
<p>By default Custom elements are <code>display: inline</code>,
meaning they are unaffected by <code>height</code>.
Add the following ruleset to your stylesheet to enable map size.</p>
<pre data-lang="css" style="background-color:#2b303b;color:#c0c5ce;" class="language-css "><code class="language-css" data-lang="css"><span style="color:#bf616a;">l-map </span><span>{
</span><span> display: block;
</span><span>}
</span></code></pre>
<p>It's not always necessary to set <code>block</code> directly on an <code>l-map</code> tag.
For example, a parent with <code>display: grid</code>, will size the <code>l-map</code> tag appropriately.</p>
<h3 id="z-index">Z-index</h3>
<p>Leaflet has fairly strong <code>z-index</code> settings that are not easy to override.
The easiest way to get around them is to start a new stacking context using <code>isolation: isolate</code>.</p>
<h3 id="sensible-defaults">Sensible defaults</h3>
<p>Without knowing anything specific about your application the following settings should be a good starting place.</p>
<pre data-lang="css" style="background-color:#2b303b;color:#c0c5ce;" class="language-css "><code class="language-css" data-lang="css"><span style="color:#bf616a;">l-map </span><span>{
</span><span> display: block;
</span><span> block-size: </span><span style="color:#d08770;">40ch</span><span>;
</span><span> isolation: isolate;
</span><span> z-index: </span><span style="color:#d08770;">1</span><span>;
</span><span>}
</span></code></pre>
<p>This allows overlaying your own UI elements and gives full control over size and position of each map on the page.</p>

</main>

<footer>
<div class="logo">Leaflet-HTML</div>
</footer>
</body>
</html>
84 changes: 84 additions & 0 deletions articles/icons/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
</style>
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="/leaflet-html/style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script type="importmap">
{
"imports": {
"leaflet": "https://unpkg.com/[email protected]/dist/leaflet-src.esm.js"
}
}
</script>
<script
type="module"
src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
></script>
</head>
<body>
<nav>
<a href="https://andrewgryan.github.io/leaflet-html/">Home</a>
<a href="https://andrewgryan.github.io/leaflet-html/articles/">Articles</a>
</nav>

<main>
<h1>Custom icons</h1>
<p>There are two ways to add an icon to a marker.
One is to specify a <code>icon</code> attribute containing a JSON string of <code>L.Icon</code> options.</p>
<pre data-lang="html" style="background-color:#2b303b;color:#c0c5ce;" class="language-html "><code class="language-html" data-lang="html"><span>&lt;</span><span style="color:#bf616a;">l-marker
</span><span> </span><span style="color:#d08770;">lat-lng</span><span>=&quot;</span><span style="color:#a3be8c;">[51.5, -0.09]</span><span>&quot;
</span><span> </span><span style="color:#d08770;">icon</span><span>=&#39;</span><span style="color:#a3be8c;">{&quot;iconUrl&quot;: &quot;icons/leaf-green.png&quot;}</span><span>&#39;
</span><span>&gt;&lt;/</span><span style="color:#bf616a;">l-marker</span><span>&gt;
</span></code></pre>
<p>The other way is to create a separate HTML tag to configure the icon.
This is a more HTML centered approach.
The above JSON approach may be suitable in cases where the icon data is available in a data structure.</p>
<pre data-lang="html" style="background-color:#2b303b;color:#c0c5ce;" class="language-html "><code class="language-html" data-lang="html"><span>&lt;</span><span style="color:#bf616a;">l-marker </span><span style="color:#d08770;">lat-lng</span><span>=&quot;</span><span style="color:#a3be8c;">[51.5, -0.09]</span><span>&quot;&gt;&lt;</span><span style="color:#bf616a;">l-icon
</span><span> </span><span style="color:#d08770;">icon-url</span><span>=&quot;</span><span style="color:#a3be8c;">/icons/leaf-green.png</span><span>&quot;
</span><span> </span><span style="color:#d08770;">shadow-url</span><span>=&quot;</span><span style="color:#a3be8c;">/icons/leaf-shadow.png</span><span>&quot;
</span><span> </span><span style="color:#d08770;">icon-size</span><span>=&quot;</span><span style="color:#a3be8c;">[38, 95]</span><span>&quot;
</span><span> </span><span style="color:#d08770;">shadow-size</span><span>=&quot;</span><span style="color:#a3be8c;">[50, 64]</span><span>&quot;
</span><span> </span><span style="color:#d08770;">icon-anchor</span><span>=&quot;</span><span style="color:#a3be8c;">[22, 94]</span><span>&quot;
</span><span> </span><span style="color:#d08770;">shadow-anchor</span><span>=&quot;</span><span style="color:#a3be8c;">[4, 62]</span><span>&quot;
</span><span> </span><span style="color:#d08770;">popup-anchor</span><span>=&quot;</span><span style="color:#a3be8c;">[-3, -76]</span><span>&quot;
</span><span> &gt;&lt;/</span><span style="color:#bf616a;">l-icon</span><span>&gt;
</span></code></pre>
<p>Both are supported, choose whichever is most convenient.</p>
<l-map center="[51.5, -0.09]" zoom="12">
<l-tile-layer
url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
></l-tile-layer>
<l-marker lat-lng="[51.5, -0.09]"><l-icon
icon-url="/leaflet-html/icons/leaf-green.png"
shadow-url="/leaflet-html/icons/leaf-shadow.png"
icon-size="[38, 95]"
shadow-size="[50, 64]"
icon-anchor="[22, 94]"
shadow-anchor="[4, 62]"
popup-anchor="[-3, -76]"
></l-icon>
</l-marker>
</l-map>

</main>

<footer>
<div class="logo">Leaflet-HTML</div>
</footer>
</body>
</html>
56 changes: 56 additions & 0 deletions articles/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
</style>
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="/leaflet-html/style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script type="importmap">
{
"imports": {
"leaflet": "https://unpkg.com/[email protected]/dist/leaflet-src.esm.js"
}
}
</script>
<script
type="module"
src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
></script>
</head>
<body>
<nav>
<a href="https://andrewgryan.github.io/leaflet-html/">Home</a>
<a href="https://andrewgryan.github.io/leaflet-html/articles/">Articles</a>
</nav>

<main>
<h1>Leaflet HTML articles</h1>
<ul>

<li><a href="https://andrewgryan.github.io/leaflet-html/articles/icons/">Custom icons</a></li>

<li><a href="https://andrewgryan.github.io/leaflet-html/articles/style/">Styling leaflet objects</a></li>

<li><a href="https://andrewgryan.github.io/leaflet-html/articles/basic/">Basic usage</a></li>

</ul>
</main>

<footer>
<div class="logo">Leaflet-HTML</div>
</footer>
</body>
</html>
55 changes: 55 additions & 0 deletions articles/style/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
</style>
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="/leaflet-html/style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script type="importmap">
{
"imports": {
"leaflet": "https://unpkg.com/[email protected]/dist/leaflet-src.esm.js"
}
}
</script>
<script
type="module"
src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
></script>
</head>
<body>
<nav>
<a href="https://andrewgryan.github.io/leaflet-html/">Home</a>
<a href="https://andrewgryan.github.io/leaflet-html/articles/">Articles</a>
</nav>

<main>
<h1>Styling leaflet objects</h1>
<h2 id="naming-convention">Naming convention</h2>
<p>Leaflet styles objects using the <code>style</code> keyword option.
Leaflet HTML, on the other hand, needs to support inline style and leaflet style.
Therefore, the keyword <code>l-style</code> is used to style the underlying leaflet objects.</p>
<h2 id="example">Example</h2>
<pre data-lang="html" style="background-color:#2b303b;color:#c0c5ce;" class="language-html "><code class="language-html" data-lang="html"><span>&lt;</span><span style="color:#bf616a;">l-marker </span><span style="color:#d08770;">l-style</span><span>=&#39;</span><span style="color:#a3be8c;">{&quot;color&quot;: &quot;hotpink&quot;}</span><span>&#39;&gt;&lt;/</span><span style="color:#bf616a;">l-marker</span><span>&gt;
</span></code></pre>

</main>

<footer>
<div class="logo">Leaflet-HTML</div>
</footer>
</body>
</html>
Binary file added icons/leaf-green.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/leaf-orange.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/leaf-red.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/leaf-shadow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 719b82e

Please sign in to comment.