Published
Edited
Dec 8, 2019
md`# Set`
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([38.85682, 115.515404], 13);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
}
d3 = require("https://d3js.org/d3.v5.min.js")
acirclegeojson = ({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"shape": "Circle",
"radius": 658.3624718356838,
"name": "Unnamed Layer",
"category": "default",
"id": "3bc350da-8151-4eee-91f6-56a67d20b583"
},
"geometry": {
"type": "Point",
"coordinates": [115.496463, 38.862227]
}
}]
})
bGeoJSON = ({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"shape": "Line",
"name": "Sample Ploygen"
},
"geometry": {
"type": "LineString",
"coordinates": [
[115.518494, 38.862434],
[115.551109, 38.872993],
[115.563297, 38.85174],
[115.528278, 38.842382],
[115.54493, 38.823126],
[115.581493, 38.838237],
[115.575657, 38.810821],
[115.553856, 38.809082],
[115.494461, 38.810687],
[115.48502, 38.830481],
[115.498066, 38.842382],
[115.48708, 38.858959],
[115.518494, 38.862434]
]
}
}]
})
d3map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([38.85682, 115.515404], 13);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const saJson = acirclegeojson['features'][0]['geometry']['coordinates'];
const sbJson = acirclegeojson['features'][0]['properties']['radius'];
const mapScaleInMeters = ({ map }) => {
const x = map.getSize().x
const y = map.getSize().y
const maxMeters = map.containerPointToLatLng([0,y]).distanceTo(map.containerPointToLatLng([x,y]))
return maxMeters / x
}
const mapScaleInMetersValue = mapScaleInMeters({map})
const rInSvg = sbJson / mapScaleInMetersValue
svg.selectAll('circle')
.data(acirclegeojson['features'])
.enter()
.append('circle')
.attr('cx', d => map.latLngToLayerPoint(saJson[1], saJson[0]).x)
.attr('cy', d => map.latLngToLayerPoint(saJson[1], saJson[0]).y)
.attr('r', rInSvg)
.style('fill', 'black')
.style('opacity', '0.4')
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
