31: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); }32:[] 2f:{"title":"Mapping data on OpenStreetMap (using LeafLet)","cells":[{"id":0,"value":"md`# Mapping data on OpenStreetMap (using LeafLet)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"md`## Bubble chart example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"bubbleColorScale = d3.scaleOrdinal(d3.schemeAccent).domain(divisions) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"\nmd`#### The data`\n","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":392,"value":"md`#### Technical: Convert data to geoJson format and other data manipulations`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":377,"value":"md`#### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"html`

Leaflet style sheet

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

Additional inline styling

\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}