Social development practitioner. Trying to understand our world.
Published
Edited
Feb 4, 2021
1 fork
7 stars
Columbia Glacier Alaska | Wayback Imagery 2014 - 2020World Bank API - Meet Vega LiteGoogle GanttToggling a Button's Text and Color for Multiple ValuesBootstrap BoilerplateSimple HTML Table from JS ArrayCalculate Working Days, Excluding Weekends & HolidaysDynamic Reporting from Dropdown InputsReporting Data Values using JavaScriptQuick Coordinate EstimationD3 Point on Globe with Input SlidersMermaid.jsInteractive Stacked Bar Chart in D3(v4)Point-Along-Path InterpolationData-Driven SVG Faucet with D3 v4Provinces in IndonesiaD3 Real Time Chart with Multiple Data StreamsToggle Data Views in Google MapsLeaflet referencing GeoJSON and In-Line PolygonsDataMapsDataTablesReal-time multi-series time series chart data (D3v3)Learning JavaScript (and Observable) by Converting a FiddleGraphvizCaseload & Budget, 2000 - 2017 as C3.js Dual-Axis Bar and Line ChartImage Re-Size Using Input
ESRI / ArcGIS Layers Preview
Also listed in…
Learning By Doing
map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.35}px` });
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([21.926,77.0444], 4.5);
let mapbox_api_key = 'pk.eyJ1IjoibGVnaW9uZ2lzIiwiYSI6ImNqZWlzMnJ4bjExNTczM3FzYXRzdTJuYWgifQ.SOKVGzSV0q-vM6U1Ag5a-g'
let osm_outdoors = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/tiles/256/{z}/{x}/{y}?access_token='+mapbox_api_key,{
maxNativeZoom:18,
maxZoom:15,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
let nat_geo = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
});
let usa_topo = L.tileLayer('https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 20,
attribution: 'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>'
});
let world_imagry = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxZoom: 15
});
let physical = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: US National Park Service',
maxZoom: 8
});
let shaded = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri',
maxZoom: 13
});
let street = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
});
let terrain = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: USGS, Esri, TANA, DeLorme, and NPS',
maxZoom: 13
});
let topo = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
});
let delorme = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Copyright: ©2012 DeLorme',
minZoom: 1,
maxZoom: 11
});
let dark_grey = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
maxZoom: 20,
attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
let dark_grey_ref = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
});
let light_grey = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', {
maxZoom: 20,
attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
let light_grey_ref = L.tiledMapLayer({
url: 'https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Reference/MapServer',
maxZoom: 15
});
let nav_chart = L.tiledMapLayer({
url: 'https://services.arcgisonline.com/arcgis/rest/services/Specialty/World_Navigation_Charts/MapServer',
maxZoom: 15
});
let world_topo = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
});
let baseLayers = {
"NatGeo World Map":nat_geo,
"World Imagery":world_imagry,
"World Physical Map": physical,
"World Shaded Relief": shaded,
"World Street Map": street,
"World Terrain Base": terrain,
"World Topo Map":world_topo,
"DeLorme World Base":delorme,
// "Canvas/Dark Gray Base":dark_grey,
//"Navigation Charts":nav_chart,
};
let overlayLayers = {
};
let c_layers = new L.control.layers(baseLayers, overlayLayers,{position:'topright',collapsed:false})
map.addLayer(physical);
map.addControl(c_layers);
}
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.
