Public
Edited
Jan 25, 2023
1 star
import {Mapa, GraphicMapa, GraphicAAG} from '@mbrickmaps/make-a-map'
import {dot} from '@observablehq/graphviz' //sweet sweet diagrams
import {font} from '@mbrickmaps/fonts' // add support for non-system fonts for viewing on Observable
fonts = font
new Mapa()
new Mapa().draw
new Mapa()
svg`<svg width=680 height=500 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 500" preserveAspectRatio="xMinYMin meet">${new Mapa().draw.outerHTML}</svg>`
Updates Dec 2021
{ extent: "bounds", margin: 0, include: mediumMapExtent[0] }
{'geo': ne10m,'iso': 'ADM0_A3','name': 'NAME'}
genRoutes: { show: false },
exampleMap = new Mapa(680, 500, 'geoStereographic', {
extent:"extent",
margin:50,
include:[]
},
-104,
null, null, {show:false,addCustom:{
show:false,
geom:null,
style:{
fill:'red',
stroke:'blue',
'stroke-width':0.5
},
type:'polyline'
},genRoutes:{show:false},adminRegionName:{name:['Xinjiang'],style:{fill:'#AECB9E'},label:true},adminRegionCountry:{name:['China'], style:{fill:'none', stroke:'white' ,'stroke-width':0.5, opacity:1}, label:false},marineRegionName:{name:['Yellow Sea', 'South China Sea','Philippine Sea', 'Sea of Japan', 'East China Sea'],style:{fill:'none', stroke:' blue' ,'stroke-width':1, opacity:0.2},label:true},landRegionName:{name:['Gobi Desert'],style:null, label:true},addDisputed:{show:true,style:{'stroke-width':1,stroke:'SteelBlue','stroke-dash-array':'4 4'}}, graticule:{show:false,h:[38,36],v:[],east:0,west:-361,style:{stroke:'red' ,'stroke-width':1, 'stroke-dasharray':'none'}}}, { land : '#fffff9', water : '#f2f2f2', border : '#dedede', highlight : '#8CB574', country :{ KHM : '#CAE4BA', MNG:'#CA9FB3', IND:'#F0B061' } },{ show : false, topValue : 3333333, topUnit :'ft', bottomValue : 500, bottomUnit : 'mi', offset : [180,50] }, { extent : ['CHN','IND'], render : ['CHN'] , clip:true,clipBuffer:0}, {show : true, data : places },{method:'polylabel',show : true, country:['China','India','Japan','Cambodia','Mongolia','Russia']}).style
exampleParam = new Mapa(680, 500, 'geoStereographic', { extent : "extent", margin:50 }, -104, null, null, {show:true,adminRegionName:{name:['Xinjiang'],style:{fill:'#AECB9E'},label:true},adminRegionCountry:{name:['China'], style:{fill:'none', stroke:'white' ,'stroke-width':0.5, opacity:1}, label:false},marineRegionName:{name:['Yellow Sea', 'South China Sea','Philippine Sea', 'Sea of Japan', 'East China Sea'],style:{fill:'none', stroke:' blue' ,'stroke-width':1, opacity:0.2},label:true},landRegionName:{name:['Gobi Desert'],style:null, label:true},addDisputed:{show:true,style:{'stroke-width':1,stroke:'SteelBlue','stroke-dash-array':'4 4'}}}, { land : '#fffff9', water : '#f2f2f2', border : '#dedede', highlight : '#8CB574', country :{ KHM : '#CAE4BA', MNG:'#CA9FB3', IND:'#F0B061' } },{ show : false, topValue : 3333333, topUnit :'ft', bottomValue : 500, bottomUnit : 'mi', offset : [180,50] }, { extent : ['CHN','IND'], render : ['CHN'] , clip:true,clipBuffer:0}, {show : true, data : places },{method:'polylabel',show : true, country:['China','India','Japan','Cambodia','Mongolia','Russia']})
places
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
new GraphicMapa
new GraphicAAG(null,null,new Mapa(),null,'Source','This is the source.',680,800,null).draw
labels = [{x:0,y:0,title: "Area", text: "Tempor labore est qui reprehenderit non consequat elit nisi."},
{x:0,y:0,title: "Form of Government", text: "TEMPOR LABORE EST QUI REPREHENDERIT NON CONSEQUAT ELIT NISI."},
{x:0,y:0,title: "GDP", text: "Amet nostrud reprehenderit voluptate Lorem."},
{x:0,y:0,title: "Languages", text: "Eiusmod adipisicing voluptate labore excepteur enim esse."}]
makeAAGtext
aag680 = makeAAGtext('Russia At A Glance', labels, 2, 680, 550, 15, 75, 175, 18, 'px')
aag360 = makeAAGtext('Russia At A Glance', labels, 4, 360, 340, 15,75, 180, 16, 'px')
new GraphicAAG(null,null,new Mapa(),null,'Source','This is the source.',680,800,aag680).draw
new GraphicAAG(null,null,new Mapa(360,300),null,'Source','This is the source.', 360, 715, aag360).draw
russianCities = [
{name: "Moscow", lat: "37.6155228259", lng: "55.7521641226", type: "Admin-0 capital", dir: "NE"},
{name: "Sevastapol", lat: "33.4649751371", lng: "44.5999766226", type: "Admin-1 capital", dir: "NE"},
{name: "St. Petersburg", lat: "30.3160200589", lng: "59.9390145051", type: "Admin-1 capital", dir: "S"},
{name: "Vladivostok", lat: "131.910025593", lng: "43.1300146678", type: "Admin-1 capital", dir: "SW"}
]
russiaText = [
{x:0,y:0,title: "Legislature", text: "bicameral Federal Assembly Federation Council (170 seats) and State Duma (450 seats)"},
{x:0,y:0,title: "Ethnicity", text: "Russian 77.7%, Tatar 3.7%, Ukrainian 1.4%, Bashkir 1.1%, other 12.2%, unspecified 3.9% (2010 est.)"},
{x:0,y:0,title: "Languages", text: "Russian (official) 85.7%, Tatar 3.2%, Chechen 1%, other 10.1% (2010 est.)"},
{x:0,y:0,title: "Population", text: "141.7 million (July 2020 est.)"}
]
russiaAAG = makeAAGtext('Russia At A Glance', russiaText, 2, 680, 500, 165, 18, 'px')
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.
