Leaflet Introduction with Multivariable Symbology

From CUOSGwiki
Jump to navigationJump to search

Introduction

Download Leaflet & Data

Creating the files

HTML

<html>
    <head>
        <!-- Leflet CSS -->
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
            integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
            crossorigin=""/>
        <style>
            #map { height: 600px; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>
        <script src="script.js"></script>
    </body>
</html>

JS

var map = L.map('map').setView([46.554, -66.136], 7);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

Adding the data/server

Changing the symbology

Adding the legend

References