2c:null 2d:["$","title",null,{"children":"Map | Christoph Pahmeyer | Observable"}] 32: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 | `33:Tcf1,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); // 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); }34:[] 30:{"id":"24f8bf990bf2bc61","slug":"map","title":"Map","thumbnail":"0c5fbb048a82f0146fcb731570690e3e3fb9d47113b352f340f3ec0a746ccafc","access_level":"public","create_time":"$D2020-10-19T22:08:16.562Z","update_time":"$D2026-01-09T13:52:56.524Z","view_time":null,"first_public_time":"$D2020-11-04T16:22:12.372Z","fork":{"id":"d51c5ec513ac9b20","slug":"map","title":"Map","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":2,"starred":false,"owner":{"type":"team","id":"d2dc6c8d94d1ea2c","login":"chrispahm","name":"Christoph Pahmeyer","avatar_url":"https://avatars-next.observableusercontent.com/5f4a345410b8a1f574bf0beecf9c7b18c1140fb1c085b289e271718ef4ed0d57","tier":"starter_2024"},"version":325,"publish_version":325,"role":null,"authored":false,"authors":[{"type":"individual","id":"e3c99024cde17af0","login":"chrispahm","name":"Christoph Pahmeyer","avatar_url":"https://avatars-next.observableusercontent.com/5f4a345410b8a1f574bf0beecf9c7b18c1140fb1c085b289e271718ef4ed0d57","tier":null}],"members":[{"type":"individual","id":"e3c99024cde17af0","login":"chrispahm","name":"Christoph Pahmeyer","avatar_url":"https://avatars-next.observableusercontent.com/5f4a345410b8a1f574bf0beecf9c7b18c1140fb1c085b289e271718ef4ed0d57","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"6c7ff609de80b6e2","slug":"maps","title":"Geo","owner":{"id":"d2dc6c8d94d1ea2c","login":"chrispahm","name":"Christoph Pahmeyer"}},"type":"notebook","body":{"title":"Map","cells":[{"id":0,"value":"md`# Map\n\nThis is a fork of the wonderful map function created by Tom MacWright (original notebook: [@tmcw/map](https://observablehq.com/@tmcw/map)).\n\nIt has been extended to allow for more customizations when displaying features on a map.\n\n~~~js\nimport {map} from \"@chrispahm/map\"\n~~~\n\n~~~js\nmap(geojson)\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"md`### Custom map tiles and container sizes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":188,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"turf = require(\"@turf/turf\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"L = {\n let l = await require(\"leaflet@1.8.0-beta.3\");\n l.Icon.Default.imagePath =\n \"https://unpkg.com/leaflet@1.8.0-beta.3/dist/images/\";\n return l;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"concious_analytics(html``.href)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"import { concious_analytics } from 'ff90685a875a43ac'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"