md`# Leaflet mapping practice`
L = require("leaflet")
Tabletop = require("tabletop")
omnivore = require('https://bundle.run/leaflet-omnivore@0.3.4')
html ` <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">`
html ` <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<!-- Tabletop allows us to connect to Google Sheets -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<!-- Font awesome has options for icons and stuff -->
<script src="https://kit.fontawesome.com/1e3fb69e1e.js" crossorigin="anonymous"></script>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>`
html `<div id="mapid" style="height: 600px;"></div>`
{ // Set viewing box
var mymap = L.map('mapid').setView([41.8788764,-87.6381036], 4);
// Add tile layer
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
// set the mapbox kayer style here
id: 'mapbox.satellite',
// Access token comes from Mapbox account
accessToken: 'pk.eyJ1IjoiY2hhcmxpZWdpbGVzIiwiYSI6ImNrMmh4NDF6MTA0YXkzZWxhM2c5cHUwdGYifQ.jQAP4_0wk2vo1VcsU1Ju2w'
}).addTo(mymap);
// Add an individual point to a map
// var marker = L.marker([40.8152976,-96.7014155]).addTo(mymap);
L.marker([41.8788764,-87.6381036]).addTo(mymap);
L.marker([40.8005878,-96.7607674]).addTo(mymap);
L.marker([33.640673,-117.9095251]).addTo(mymap);
// Define a function to call data from Google Sheets
/* Tabletop.init({
key: "https://docs.google.com/spreadsheets/d/16Z466d6FhGJBKnyFZymja6b0hLx0Lin60KPLTbq6OZY/edit?usp=sharing",
callback: addPoints,
simpleSheet: true
});
var LeafIcon = L.Icon.extend({
options: {
// iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34]
}
});
var greenIcon = new LeafIcon({
iconUrl: 'https://img.icons8.com/offices/30/000000/leaf.png'
})
// Populate the map with markers from your data - we're looping through each row
function addPoints(data, tabletop) {
for (var row in data) {
var marker = L.marker([
data[row].lat,
data[row].long
], {icon: greenIcon}).addTo(mymap);
// Now we're adding popups
marker.bindPopup("<p>"+ data[row].market_name + "<br/>" + data[row].operation + "</p>");
}
} */
// Style for kml layer
var customLayer = L.geoJson(null, {
// http://leafletjs.com/reference.html#geojson-style
style: function(feature) {
return { color: '#aaa', weight: .5, opacity:.8 };
}
});
// Import kml with omnivore
//
omnivore.kml("https://mrdata.usgs.gov/geology/state/kml/negeol.kml", null, customLayer).addTo(mymap);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
