The latest articles on DEV Community by Diego HH (@dieghernan). https://dev.to/dieghernan https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2036548%2F319fb606-cb8d-46be-adb9-d4830c0bb97f.jpeg https://dev.to/dieghernan en Diego HH Sun, 25 Oct 2020 23:00:00 +0000 https://dev.to/dieghernan/leaflet-providersesp-36g5 https://dev.to/dieghernan/leaflet-providersesp-36g5 <p><strong>Leaflet-providersESP</strong> is a plugin for <a href="https://leafletjs.com/" rel="noopener noreferrer">Leaflet</a> that contains configurations for various tile layers provided by public agencies in Spain.</p> <h2> Demo </h2> <p>Full docs and examples are available at <a href="https://dieghernan.github.io/leaflet-providersESP/" rel="noopener noreferrer">https://dieghernan.github.io/leaflet-providersESP/</a>.</p> <p>This code generates a Leaflet map with a layer provided by Leaflet-providersESP.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="nt">/&gt;</span> <span class="nt">&lt;title&gt;</span>Minimal page | leaflet-providersESP<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="nt">/&gt;</span> <span class="c">&lt;!-- Load Leaflet --&gt;</span> <span class="nt">&lt;link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"</span> <span class="nt">/&gt;</span> <span class="nt">&lt;script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="c">&lt;!-- Install leaflet-providersESP --&gt;</span> <span class="nt">&lt;script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/gh/dieghernan/leaflet-providersESP/dist/leaflet-providersESP.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="c">&lt;!-- Display map full page --&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">html</span> <span class="p">{</span> <span class="nl">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> <span class="p">}</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span> <span class="nn">#mapid</span> <span class="p">{</span> <span class="nl">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="c">&lt;!-- Create map --&gt;</span> <span class="nt">&lt;div</span> <span class="na">id</span><span class="o">=</span><span class="s">"mapid"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="c">&lt;!-- Puerta del Sol - IDErioja server --&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="kd">var</span> <span class="n">mymap</span> <span class="o">=</span> <span class="no">L</span><span class="p">.</span><span class="nf">map</span><span class="p">(</span><span class="s2">"mapid"</span><span class="p">)</span><span class="p">.</span><span class="nf">setView</span><span class="p">(</span><span class="p">[</span><span class="mf">40.4166</span><span class="p">,</span> <span class="o">-</span><span class="mf">3.70384</span><span class="p">]</span><span class="p">,</span> <span class="mi">18</span><span class="p">)</span><span class="p">;</span> <span class="no">L</span><span class="p">.</span><span class="n">tileLayer</span><span class="p">.</span><span class="nf">providerESP</span><span class="p">(</span><span class="s2">"IDErioja"</span><span class="p">)</span><span class="p">.</span><span class="nf">addTo</span><span class="p">(</span><span class="n">mymap</span><span class="p">)</span><span class="p">;</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <h2> All providers </h2> <p><a href="https://dieghernan.github.io/leaflet-providersESP/allproviders/" rel="noopener noreferrer">Open the map in a full window</a><a href="https://dieghernan.github.io/leaflet-providersESP/" rel="noopener noreferrer">Documentation</a></p> projects leaflet maps project