2a:null 2b:["$","title",null,{"children":"Mapping data on OpenStreetMap (using LeafLet) | olemi | Observable"}] 30:T64b,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Now we create a map object and add a layer to it. let map = L.map(container).setView([40.7299, 20], 2); let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', { attribution: 'Wikimedia maps beta | © OpenStreetMap contributors' }).addTo(map); let scale = d3.scalePow().domain([0,100]).range([1,6]) dataGeoJson.features.forEach((c, i) => { L.geoJson(c, { pointToLayer: (geo, latlng) => L.circleMarker(latlng, { radius: scale(+120 /*geo.properties.injuries*/) }), style: (feature) => {return { color: bubbleColorScale(feature.properties.division), fillOpacity: 0.75, stroke: false}} }) .bindTooltip( (layer) => `${layer.feature.properties.division}
${layer.feature.properties['sub-division']}

${layer.feature.properties.city}
${layer.feature.properties.country}` ) .addTo(map) }) let legend = L.control({position: 'topright'}); legend.onAdd = function (map) { let div = d3.select(document.createElement("div")) .classed('legend', true); let p = div.selectAll('p') .data(divisions) .enter() .append('p') p.append('span').classed('legend-item', true).style('background-color', d => bubbleColorScale(d)); p.append('span').text(d => d); return div.node(); }; legend.addTo(map); }31:[] 2e:{"id":"3202f79963ed7b40","slug":"mapping-data-on-openstreetmap-using-leaflet","title":"Mapping data on OpenStreetMap (using LeafLet)","thumbnail":"c237febe2a64f0f28a29b318042c92609258e8271f82e469f8a19960347815c4","access_level":"public","create_time":"$D2018-04-18T12:37:32.011Z","update_time":"$D2018-04-19T13:26:47.968Z","view_time":null,"first_public_time":"$D2018-04-24T18:47:09.253Z","fork":{"id":"ebcb430d83690bf6","slug":"some-mapping-practice","title":"Some mapping practice","owner":{"id":"879ac4363e420e42","login":"thecristen","name":"cristen jones"}},"stars":4,"starred":false,"owner":{"type":"team","id":"4b029f0b8018ee2b","login":"olemi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a3dc23267a4297889e8fedc4141e94faf68f20f8f4173a23a25473514157615b","tier":"starter_2024"},"version":628,"publish_version":628,"role":null,"authored":false,"authors":[{"type":"individual","id":"26548b4a0958285a","login":"olemi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a3dc23267a4297889e8fedc4141e94faf68f20f8f4173a23a25473514157615b","tier":null}],"members":[{"type":"individual","id":"26548b4a0958285a","login":"olemi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a3dc23267a4297889e8fedc4141e94faf68f20f8f4173a23a25473514157615b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Mapping data on OpenStreetMap (using LeafLet)","cells":[{"id":0,"value":"md`# Mapping data on OpenStreetMap (using LeafLet)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"md`## Bubble chart example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":432,"value":"bubbleColorScale = d3.scaleOrdinal(d3.schemeAccent).domain(divisions) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"\nmd`#### The data`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"data=d3.csv('https://gist.githubusercontent.com/olemi/60d46497dc1cb2993d92a935d2d778fd/raw/2c9bd0f89927241354a7bf47d6603c8ef0c37920/Bi_Locations%2520v6_sanitized.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"md`#### Technical: Convert data to geoJson format and other data manipulations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"dataGeoJson = {\n let geojson = {}\n geojson['type'] = 'FeatureCollection'\n geojson['features'] = data.map((row) => {\n return {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [row.lon, row.lat]\n },\n \"properties\": row//{...row}\n }\n })\n \n return geojson\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"divisions = dataGeoJson.features.map( (c, i) => c.properties.division )\n .filter ((item, i, ar) => ar.indexOf(item) ===i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"subdivisions = dataGeoJson.features.map( (c, i) => c.properties['sub-division'] )\n .filter ((item, i, ar) => ar.indexOf(item) ===i)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"md`#### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":375,"value":"html`

Leaflet style sheet

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":586,"value":"html`

Additional inline styling

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"