Internet Geographies LCST 2060Web Map ComponentsWhat and Where Is The InternetWeb Map Components-More ExamplesDebugging Mapbox GL JS in Observable for studentsInfrastructure Data Sources and general mapping resourcesTelegeography Submarine Cable geojson With Owner Data and Length Data
Geocoding Intro
d3 = require('d3')
data = `10410 Bunge Ave, Council Bluffs, IA 51503`
request = d3.json(
`https://www.mapquestapi.com/geocoding/v1/address?key=s0VVKAjqexVJ7O1c7bPGGieyfriJIMgv&location=${data}`
)
request.results[0].locations[0]
latln = [
request.results[0].locations[0].latLng.lat,
request.results[0].locations[0].latLng.lng
]
L = require('leaflet@1.2.0')
html`<link href='${resolve(
'leaflet@1.2.0/dist/leaflet.css'
)}' rel='stylesheet' />`
map = {
//added height to the div
let container = DOM.element('div', { style: 'height:800px;' });
yield container;
let map = L.map(container).setView(latln, 13);
let osmLayer = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);
L.marker(latln).addTo(map);
array.map(a => L.marker(a).addTo(map));
L.polyline(array).addTo(map);
L.geoJSON(geojson).addTo(map);
}
geojson = FileAttachment('map.geojson').json()
JSON.parse(
`{"type": "Feature","properties": {},"geometry": { "type": "LineString", "coordinates":[${JSON.stringify(
array
)}]}}`
)
JSON.stringify(array)
datacenters = [
'300 Riverside Parkway. Lithia Springs, GA 30122',
'Google Clarksville TN. 100 Solar Way, Clarksville, TN 37040',
'3800 Railport Pkwy, Midlothian, TX 76065',
'2 Jurong West Street 23, Singapore',
'12396 Grant St, Thornton, CO 80241'
]
array = Promise.all(
datacenters.map(async d => {
let req = await d3.json(
`https://www.mapquestapi.com/geocoding/v1/address?key=s0VVKAjqexVJ7O1c7bPGGieyfriJIMgv&location=${d}`
);
return [
req.results[0].locations[0].latLng.lat,
req.results[0].locations[0].latLng.lng
];
})
)
geocode = require('@esri/arcgis-rest-geocoding')
result = geocode.geocode(data)
result.candidates[0].location
Promise.all(datacenters.map(async d => await geocode.geocode(d)))
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.