I map 🗺️ & graph 📈 data 🈸
Hello, Unfolded!Unfolded Map SDKUnfolded MapsUnfolded Map ReactUnfolded Map - Getting Started Guide
Map Layers - Creating New Unfolded Map
viewof map = {
unfoldedMap.setMapEventHandlers({
onLoad: () => {
unfoldedMap.setViewState({
longitude: -96.4247,
latitude: 31.51073,
zoom: 1
});
}
});
yield unfoldedMap.iframe;
}
unfoldedMap = mapSDK.createMap({
embed: true,
appendToDocument: false,
width: width,
height: 600,
});
worldLakes = FileAttachment("world-lakes.json").json()
majorWorldRivers = FileAttachment("world-rivers.json").json()
unfoldedMap.addDataset({
uuid: 'world-lakes',
label: 'World Lakes',
data: JSON.stringify(worldLakes)
}, autoCreateLayers)
unfoldedMap.addDataset({
uuid: 'world-rivers',
label: 'World Rivers',
data: JSON.stringify(majorWorldRivers)
}, autoCreateLayers)
worldCities = FileAttachment('world-cities.csv').csv()
worldCitiesFileBlob = FileAttachment('world-cities.csv').blob()
worldCitiesCSV = worldCitiesFileBlob.text()
viewof worldCitiesTable = Inputs.table(worldCities, {sort: 'cityName'})
unfoldedMap.addDataset({
uuid: 'world-cities',
label: 'World Cities',
data: worldCitiesCSV
}, false) // don't autoCreateLayers
unfoldedMap.addLayer({
id: 'world-cities-point-layer',
type: 'point',
config: {
dataId: 'world-cities',
label: ' World Cities',
columns: {
'lat': 'latitude',
'lng': 'longitude'
},
isVisible: true,
}
})
mapSDK = import('https://unpkg.com/@unfolded/map-sdk@0.3.1/dist/index.js?module')
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.
