A simple map

Here we follow the getting started example to create a map with a starting camera location and one of the default map styles.

Map styles can be edited online using the Mapbox Studio editor.

This cell creates the interactive GL map view and returns the map object that can be used to interact with the data and layers via the Mapbox GL JS API.

`; container.appendChild(leftPane); container.appendChild( html`

` ); yield container; // Inititalize the GL map let map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location center: [-74.5, 40], // starting position [lng, lat] zoom: 5 // starting zoom }); // Wait until the map loads. map.on("load", () => { map.addSource('wms-test-source', { type: 'raster', tiles: [ `https://gibs.earthdata.nasa.gov/twms/epsg3857/${type}/twms.cgi?request=GetMap&layers=${layer}&srs=EPSG:3857&format=image/${format}&styles=&time=${date}&width=256&height=256&bbox={bbox-epsg-3857}` ], tileSize: 256 }); map.addLayer( { id: 'wms-test-layer', type: 'raster', source: 'wms-test-source', paint: {} }, 'aeroway-line' ); container.value = map; container.dispatchEvent(new CustomEvent("input")); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }31:T414,viewof map2 = { const container = html`

`; // Describe the map view const leftPane = html`

A custom map

All customizations of the map can be done within the map cell. Here we set a custom camera position and change the style Mapbox GL examples.

`; container.appendChild(leftPane); // const mapContainer = html`

`; container.appendChild(mapContainer); yield mapContainer; yield container; // Inititalize the GL map let map = addMap({ container: mapContainer }); // Wait until the map loads. map.on("load", () => { container.value = map; container.dispatchEvent(new CustomEvent("input")); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }32:[] 2e:{"title":"NASA GIBS Browser","cells":[{"id":0,"value":"md`# NASA GIBS Browser\n\nhttps://wiki.earthdata.nasa.gov/display/GIBS/GIBS+API+for+Developers\nhttps://worldview.earthdata.nasa.gov/\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"date = '2020-06-04T00:00:00Z'","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"eartdataUrl = \"v=60.092043992864475,17.859856702822725,87.7051079724928,33.37656334998547&l=AIRS_L2_Carbon_Monoxide_500hPa_Volume_Mixing_Ratio_Night(hidden),AIRS_Prata_SO2_Index_Night(hidden),SMAP_L2_Passive_Enhanced_Night_Soil_Moisture_Option1(hidden),LPRM_AMSR2_Surface_Soil_Moisture_C1_Band_Night_Daily(hidden),AMSRU2_Soil_Moisture_NPD_Night(hidden),VIIRS_NOAA20_Thermal_Anomalies_375m_All,OMPS_SO2_Lower_Troposphere(hidden),VIIRS_SNPP_DayNightBand_ENCC(palette=blue_8),VIIRS_SNPP_Brightness_Temp_BandI5_Day(hidden),Reference_Labels(hidden),Reference_Features(hidden),Coastlines(hidden),VIIRS_SNPP_CorrectedReflectance_TrueColor(hidden),MODIS_Aqua_CorrectedReflectance_TrueColor(hidden),MODIS_Terra_CorrectedReflectance_TrueColor\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"viewof layer = radio({\n options: [\n {\n label: 'MODIS Terra Aerosol',\n value: 'MODIS_Terra_Aerosol'\n },\n {\n label: 'MODIS_Terra_CorrectedReflectance_TrueColor',\n value: 'MODIS_Terra_CorrectedReflectance_TrueColor'\n },\n {\n label: 'VIIRS_NOAA20_Thermal_Anomalies_375m_All',\n value: 'VIIRS_NOAA20_Thermal_Anomalies_375m_All'\n }\n ],\n value: 'MODIS_Terra_Aerosol'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"viewof format = radio({\n options: [\n {\n label: 'jpeg',\n value: 'jpeg'\n },\n {\n label: 'png',\n value: 'png'\n }\n ],\n value: 'jpeg'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"viewof type = radio({\n options: [\n {\n label: 'All',\n value: 'all'\n },\n {\n label: 'Best',\n value: 'best'\n },\n {\n label: 'Real time',\n value: 'nrt'\n }\n ],\n value: 'best'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"https://gibs-a.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi?TIME=2020-06-04T00:00:00Z&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=VIIRS_NOAA20_Thermal_Anomalies_375m_All&WIDTH=256&HEIGHT=256&SRS=EPSG%3A4326&STYLES=&BBOX=-36%2C-54%2C36%2C18","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"https://gibs.earthdata.nasa.gov/twms/epsg3857/best/twms.cgi?request=GetMap&layers=VIIRS_NOAA20_Thermal_Anomalies_375m_All&srs=EPSG:3857&format=image/png&styles=&time=2020-06-04T00:00:00Z&width=512&height=512&bbox=-7514065.628545966,5009377.085697312,-6261721.357121639,6261721.357121639","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"location","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"md`## Customize the map\n\nThe GL map is composed of various layers, each having a data source, data filters and styling defined to give the final output. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"mapLayers = map2.getStyle().layers","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"md`## Setup\n\nReplace the \"mapboxgl.accessToken\" with one from your [Mapbox account](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). Its recommended to create a new token with a URL scope to observable account \"https://USERNAME.static.observableusercontent.com\" to prevent misuse.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"mapboxglAccessToken = \"pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiY2s4bnI0bWN0MTE1MzNlcXN0a2M4aTJzYiJ9.N9PCXHPAeJb4N6lBd2_a0Q\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"import { mapboxgl } with {\n mapboxglAccessToken as accessToken\n} from \"@planemad/mapbox-gl-cartography\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"md`Option Mapbox GL JS helper function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"import {\n addMap,\n addLayers,\n duplicateLayer,\n inspectLayer,\n addMapPopups\n} from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"import { slider, radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}