Published
Edited
Nov 9, 2019
32 forks
1 star
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>
<!-- Omnivore lets us ingest lots of different kinds of data -->
<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 coordinates
var mymap = L.map('mapid').setView([41.9049617,-99.6452142], 7);
// 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 base layer style here
id: 'mapbox.streets',
// Access token comes from Mapbox account
accessToken: 'pk.eyJ1Ijoib2xnaXRhZmFqaXRhIiwiYSI6ImNrMmd3dnU4azB6bHQzYnQ4Mmpydjk1bXMifQ.1hOM1rZfn4n0DdNSEED7fg'
}).addTo(mymap);
// Add an individual point to a map
//var marker = L.marker([40.8152976,-96.7014155]).addTo(mymap);
// Define a function to call data from Google Sheets
/*
Tabletop.init({
key: "https://docs.google.com/spreadsheets/d/1thLVzQ2_zQZcVT1jh3eexTmb94UoSvE_OT3tGYl-I1U/edit?usp=sharing",
callback: addPoints,
simpleSheet: true
});
*/
/*
// 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].Latitude,
data[row].Longitude
]).addTo(mymap);
// Now we're adding popups - plain version, bolded and colored
marker.bindPopup("<p>" + "<strong style='color: #84b819'>" + data[row].Name + "</strong style>" + "</p>");
}
}
*/
// If we want a bolded header
//"<strong>" and then "</strong>"
// If we want a bold header with color
//"<strong style='color: #84b819'>" and then "</strong style>"
/*
// Populate the map with markers with images from your data - we're still looping through each row
function addPoints(data, tabletop) {
for (var row in data) {
var marker = L.marker([
data[row].lat,
data[row].long
]).addTo(mymap);
// Now we're adding popups - plain version, bolded and colored
marker.bindPopup("<p>" + data[row].market_name + "<br/>" + data[row].operation + "<br/>" + data[row].weekday + "<br/>" + "<img src='" + data[row].image_url + "' height='100' />" + "</p>");
}
}
*/
/*
// If we want other images for our icons
// Specify marker style
var LeafIcon = L.Icon.extend({
options: {
// iconSize: [25, 41],
iconAnchor: [12, 30],
popupAnchor: [1, -34]
}
});
// Specify icon url
var greenIcon = new LeafIcon({
iconUrl: 'https://img.icons8.com/offices/30/000000/leaf.png'
})
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 - plain version, bolded and colored
marker.bindPopup("<p>" + data[row].market_name + "<br/>" + data[row].operation + "<br/>" + data[row].weekday + "</p>");
}
}
*/
/*
//color markers based on some additional value
//specify colors
var colors = {
orange: '#ffa500',
blue: '#0000ff',
green: '#008000',
pink: '#ffc0cb',
};
//set marker opacity
var markerOptions = {
opacity: 1,
};
switch(Data[i].value) {
case "A":
markerOptions.color = colors.orange;
break;
case "B":
markerOptions.color = colors.blue;
break;
case "C":
markerOptions.color = colors.green;
break;
default:
markerOptions.color = colors.pink;
break;
}
var marker = new L.circleMarker(markerLocation,markerOptions).addTo(map);
*/
// Style for kml layer
var whoopingLayer = L.geoJson(null, {
// http://leafletjs.com/reference.html#geojson-style
style: function(feature) {
return { color: '#7fcdbb', weight: .5, opacity:1 };
}
});
// Style for kml layer
var beetleLayer = L.geoJson(null, {
// http://leafletjs.com/reference.html#geojson-style
style: function(feature) {
return { color: '#c51b8a', weight: .5, opacity:1 };
}
});
// Import kml with omnivore
/*
omnivore.kml("https://mrdata.usgs.gov/geology/state/kml/negeol.kml", null, customLayer).addTo(mymap);
*/
// Map whooping crane habitat
omnivore.kml("https://opendata.arcgis.com/datasets/74997701f62f468d9a097e9062fb9dea_68.kml?where=CommonName%20%3D%20%27Whooping%20Crane%27&outSR=%7B%22latestVcsWkid%22%3A5703%2C%22latestWkid%22%3A3857%2C%22wkid%22%3A102100%2C%22vcsWkid%22%3A5703%7D", null, whoopingLayer).addTo(mymap)
omnivore.kml("https://opendata.arcgis.com/datasets/74997701f62f468d9a097e9062fb9dea_68.kml?where=CommonName%20%3D%20%27Salt%20Creek%20Tiger%20Beetle%27&outSR=%7B%22latestVcsWkid%22%3A5703%2C%22latestWkid%22%3A3857%2C%22wkid%22%3A102100%2C%22vcsWkid%22%3A5703%7D", null, beetleLayer).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.
