29:null 2a:["$","title",null,{"children":"Map | James Gordon | Observable"}] 2f:Td06,md` ### API documentation #### map(geojson,options) Takes a geojson feature, feature collection, or array of features and displays it on a map. #### Arguments | Argument | Type | Description | |----------|---------|---------------------------------------------------| | geojson | GeoJSON | GeoJSON or array of GeoJSON features to be mapped | | options | Object | Optional parameters. see below | #### Options | Prop | Type | Default | Description | |----------------|---------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | width | number | width | Width of the container | | height | number | width / 1.6 | Height of the container | | stringifyProps | boolean | false | Turn off the popup beautifier and use JSON.stringify instead | | tileURL | string | [OSM Standard Tile Layer](https://wiki.openstreetmap.org/wiki/Standard_tile_layer) | Use a different map tile source. A list of alternative map tiles can be found [here](https://wiki.openstreetmap.org/wiki/Tiles#Base_maps) and [here](http://maps.stamen.com/#toner/12/37.7706/-122.3782) | | attribution | string | © OpenStreetMap contributors | A custom attribution when not using OSM tiles | | center | array | [0,0] | This prop is only active if no GeoJSON data is passed. Centers the map to the given coordinates | | zoom | number | 3 | This prop is only active if no GeoJSON data is passed. Sets the map zoom to the given value | `30:Td09,function* map(geojson, options = {}) { if (!options.tileURL) options.tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; document.head.appendChild( html`` ); // 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. const displayWidth = options.width || width; const displayHeight = options.height || displayWidth / 1.6; let container = html`

`; // 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; let map = L.map(container, { preferCanvas: true }); // Now we create a map object and add a layer to it. if (geojson) { // In case an array of featuers was passed, we convert it to a GeoJSON // feature collection first if (Array.isArray(geojson)) { geojson = { type: "FeatureCollection", features: geojson }; } function onEachFeature(feature, layer) { // by default, we try to beautify the properties object // this may be switched off by passing stringifyProps: true in the // options if (feature.properties) { if (options.stringifyProps) { layer.bindPopup( html`

${JSON.stringify(
              feature.properties,
              null,
              2
            )}

` ); } else { const popupString = Object.keys(feature.properties).reduce( (str, prop) => { let value = feature.properties[prop]; if (typeof feature.properties[prop] === "object") { value = JSON.stringify(feature.properties[prop], null, 2); } return (str += `${prop}: ${value}\n`); }, "" ); layer.bindPopup( html`

${popupString}

` ); } } } function style(feature) { if (feature.properties) { return feature.properties.style; } } let gj = L.geoJson(geojson, { onEachFeature, style }).addTo(map); // gj.eachLayer; map.fitBounds(gj.getBounds()); if ( !geojson.features || (geojson.features && geojson.features.length === 1) ) { map.eachLayer(function (layer) { layer.openPopup(); }); } } else { const center = options.center || [0, 0]; const zoom = options.zoom || 3; map.setView(center, zoom); } container.value = map; let osmLayer = L.tileLayer(options.tileURL, { attribution: options.attribution || '© OpenStreetMap contributors' }).addTo(map); }31:[] 2d:{"id":"7f7bd8e35ba3d3a3","slug":"map","title":"Map","thumbnail":"e0e657ce599f8aed58c2b931ced0f0628381c35c6e1f9f3298010bf9e1c21ddc","access_level":"public","create_time":"$D2022-08-04T01:28:04.930Z","update_time":"$D2022-08-04T01:39:47.312Z","view_time":null,"first_public_time":"$D2022-08-04T01:35:04.562Z","has_unpublished_edits":null,"fork":{"id":"24f8bf990bf2bc61","slug":"map","title":"Map","owner":{"id":"d2dc6c8d94d1ea2c","login":"chrispahm","name":"Christoph Pahmeyer"}},"stars":1,"starred":false,"owner":{"type":"team","id":"2d80b5cb66725353","login":"gordo-ts","name":"James Gordon","avatar_url":"https://avatars-next.observableusercontent.com/67a39968898ee5f5fd2c602cca1882d83060aea874e87a1ea6711b6cd54afa6e","tier":"starter_2024"},"version":334,"publish_version":334,"role":null,"authored":false,"authors":[{"type":"individual","id":"b994c936cb92cfce","login":"gordo-ts","name":"James Gordon","avatar_url":"https://avatars-next.observableusercontent.com/67a39968898ee5f5fd2c602cca1882d83060aea874e87a1ea6711b6cd54afa6e","tier":null}],"members":[{"type":"individual","id":"b994c936cb92cfce","login":"gordo-ts","name":"James Gordon","avatar_url":"https://avatars-next.observableusercontent.com/67a39968898ee5f5fd2c602cca1882d83060aea874e87a1ea6711b6cd54afa6e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Map","cells":[{"id":0,"value":"md`# Map\n\nMore details [here](https://observablehq.com/@chrispahm/map).\n\n\n~~~js\nimport {map} from \"@gordo-ts/map\"\n~~~\n\n~~~js\nmap(geojson)\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`### Custom colors and styles\nYou can optionally style each feature by passing a \\`style\\` key in the features \\`properties\\` object.\n\nRead the Leaflet [GeoJSON \\`style\\` documentation](https://leafletjs.com/reference-1.6.0.html#path-option) to learn about the possible styling options.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"map({\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n properties: { style: { color: \"#ff0000\", fillOpacity: 0.2 } },\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [-104.05, 48.99],\n [-97.22, 48.98],\n [-96.58, 45.94],\n [-104.03, 45.94],\n [-104.05, 48.99]\n ]\n ]\n }\n },\n {\n type: \"Feature\",\n properties: { style: { color: \"#0000ff\", dashArray: \"5,3,2\" } },\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [-109.05, 41.0],\n [-102.06, 40.99],\n [-102.03, 36.99],\n [-109.04, 36.99],\n [-109.05, 41.0]\n ]\n ]\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`### Custom map tiles and container sizes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"map(\n {\n type: \"Feature\",\n geometry: { type: \"Point\", coordinates: [7.0858402, 50.72769] },\n properties: { hi: \"There\" }\n },\n {\n height: 400,\n tileURL: \"https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png\",\n attribution:\n 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.'\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"map(undefined, {\n center: [40.086, 13.447],\n zoom: 5,\n width: 600,\n tileURL: 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',\n attribution:\n 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2e:"$2d:body"