Difference between revisions of "Leaflet Introduction with Multivariable Symbology"
From CUOSGwiki
Jump to navigationJump to searchAJ Monfette (talk | contribs) |
AJ Monfette (talk | contribs) |
||
| 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: '© <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
Contents
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);
