L = require('leaflet@1.5.0')
html`<link href='${resolve('leaflet@1.5.0/dist/leaflet.css')}' rel='stylesheet' />`
map = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([40.7934, -77.8600], 15);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
}
IST = {
let response = await fetch('https://nominatim.openstreetmap.org/search.php?q=Westgate+building%2C+university+park%2C+pa&polygon_geojson=1&format=json');
let json = await response.json();
return json[0].geojson
}
food = {
let response = await fetch('https://nominatim.openstreetmap.org/search.php?q=Rodney+A.+Erickson%2C+university+park%2C+pa&polygon_geojson=1&format=json');
let json = await response.json();
return json[0].geojson
}
huck = {
let response = await fetch('https://nominatim.openstreetmap.org/search.php?q=Huck+Life+Sciences+Building+%2C+university+park%2C+pa&polygon_geojson=1&format=json');
let json = await response.json();
return json[0].geojson
}
ag = {
let response = await fetch('https://nominatim.openstreetmap.org/search.php?q=Agricultural+Science+and+Industries+Building%2C+pa&polygon_geojson=1&format=json');
let json = await response.json();
return json[0].geojson
}
engineering = {
let response = await fetch('https://nominatim.openstreetmap.org/search.php?q=Reber+Building%2C+pa&polygon_geojson=1&format=json');
let json = await response.json();
return json[0].geojson
}
Thomas = {
let response = await fetch('https://nominatim.openstreetmap.org/search.php?q=Thomas+Building%2C+pa&polygon_geojson=1&format=json');
let json = await response.json();
return json[0].geojson
}
PSU = {
let response = await fetch('https://nominatim.openstreetmap.org/search.php?q=Penn+State+University%2C+Pa&polygon_geojson=1&format=json');
let json = await response.json();
return json[0].geojson
}
PSUMap = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { style: `width:1000px;height:1000px` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([40.8104, -77.8600], 15);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@1x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let PSUPin = L.geoJson(PSU, {
weight: 5,
color: '#432'
}).addTo(map);
PSUPin.bindPopup('PSUPin');
let ISTPin = L.geoJson(IST, {
weight: 5,
color: '#432'
}).addTo(map);
ISTPin.bindPopup('IST');
let foodpin = L.geoJson(food, {
weight: 5,
color: '#432'
}).addTo(map);
foodpin.bindPopup('food');
let huckpin = L.geoJson(huck, {
weight: 5,
color: '#432'
}).addTo(map);
huckpin.bindPopup('huck');
let agpin = L.geoJson(ag, {
weight: 5,
color: '#432'
}).addTo(map);
agpin.bindPopup('ag');
let engineeringpin = L.geoJson(engineering, {
weight: 5,
color: '#432'
}).addTo(map);
engineeringpin.bindPopup('engineering');
let thomasPin = L.geoJson(Thomas, {
weight: 5,
color: '#432'
}).addTo(map);
thomasPin.bindPopup('Thomas');
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.