Difference between revisions of "Leaflet Introduction with Multivariable Symbology"

From CUOSGwiki
Jump to navigationJump to search
Line 2: Line 2:
 
=Download Leaflet & Data=
  
=Download Leaflet & Data=
 
=Creating the files=
  
=Creating the files=
  +
HTML
  +
<pre>
  +
<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>
  +
</pre>
  +
JS
  +
<pre>
  +
var map = L.map('map').setView([46.554, -66.136], 7);
  +
  +
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  +
maxZoom: 18,
  +
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  +
}).addTo(map);
  +
</pre>
  +
 
=Adding the data/server=
  
=Adding the data/server=
 
=Changing the symbology=
  
=Changing the symbology=

Revision as of 14:09, 19 December 2025

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

Retrieved from "https://dges.carleton.ca/CUOSGwiki/index.php?title=Leaflet_Introduction_with_Multivariable_Symbology&oldid=23536"