Difference between revisions of "Leaflet Introduction with Multivariable Symbology"
From CUOSGwiki
Jump to navigationJump to searchAJ Monfette (talk | contribs) |
AJ Monfette (talk | contribs) |
||
| Line 3: | Line 3: | ||
=Creating the files= |
=Creating the files= |
||
HTML |
HTML |
||
| + | <syntaxhighlight lang="html"> |
||
| − | <pre> |
||
<html> |
<html> |
||
<head> |
<head> |
||
| Line 22: | Line 22: | ||
</body> |
</body> |
||
</html> |
</html> |
||
| + | </syntaxhighlight> |
||
| − | </pre> |
||
JS |
JS |
||
| + | <syntaxhighlight lang="JavaScrip"> |
||
| − | <pre> |
||
var map = L.map('map').setView([46.554, -66.136], 7); |
var map = L.map('map').setView([46.554, -66.136], 7); |
||
| Line 31: | Line 31: | ||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' |
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' |
||
}).addTo(map); |
}).addTo(map); |
||
| + | </syntaxhighlight> |
||
| − | </pre> |
||
=Adding the data/server= |
=Adding the data/server= |
||
Revision as of 14:10, 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);
