Node radius by population
Example how to extend the internal Leaflet map to add additional map layers using custom plugins.
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var settings = {
container: document.getElementById("demo"),
area: { height: null },
data: { url: "/dvsl/data/geo-chart/USA-largest-capitals.json" },
navigation: {
initialLat: 37,
initialLng: -95,
initialZoom: 4,
minZoom:3,
maxZoom:12,
},
layers: [{
type: "items",
style: {
nodeStyleFunction: function (node) {
node.label = node.data.name;
var pop = node.data.population / 20000;
if(pop < 6) {
pop = 6;
}
node.radius = pop;
node.fillColor = "rgba(222,103,44,0.9)";
node.lineColor = "rgba(222,103,44,0.5)";
node.lineWidth = 8;
node.labelStyle = {
backgroundStyle: {
fillColor:"#09c",
lineColor:"#09c",
lineWidth:3
},
textStyle: {
fillColor: "white"
}
}
}
}
}],
background: {
url:'http://{s}.tile.stamen.com/terrain-background/{z}/{x}/{y}.jpg',
params: {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a','b','c','d']
}
}
};
var chart = new GeoChart(settings);
Data
Data
Download Data
{
"nodes": [
{
"state": "AK",
"population": "31275",
"id": "2",
"coordinates": [
"-134.406794",
"58.299740"
],
"name": "Juneau"
},
{
"state": "AZ",
"population": "1445632",
"id": "4",
"coordinates": [
"-112.075774",
"33.448260"
],
"name": "Phoenix"
},
{
"state": "CA",
"population": "466488",
"id": "6",
"coordinates": [
"-121.491014",
"38.579065"
],
"name": "Sacramento"
},
{
"state": "CO",
"population": "600158",
"id": "8",
"coordinates": [
"-104.992259",
"39.740010"
],
"name": "Denver"
},
{
"state": "FL",
"population": "181376",
"id": "12",
"coordinates": [
"-84.280649",
"30.439775"
],
"name": "Tallahassee"
},
{
"state": "GA",
"population": "420003",
"id": "13",
"coordinates": [
"-84.391109",
"33.748315"
],
"name": "Atlanta"
},
{
"state": "HI",
"population": "337256",
"id": "15",
"coordinates": [
"-157.857614",
"21.304770"
],
"name": "Honolulu"
},
{
"state": "IN",
"population": "820445",
"id": "18",
"coordinates": [
"-86.149964",
"39.766910"
],
"name": "Indianapolis"
},
{
"state": "MA",
"population": "617594",
"id": "25",
"coordinates": [
"-71.056699",
"42.358635"
],
"name": "Boston"
},
{
"state": "MN",
"population": "285068",
"id": "27",
"coordinates": [
"-93.093326",
"44.943829"
],
"name": "Saint Paul"
},
{
"state": "NE",
"population": "258379",
"id": "31",
"coordinates": [
"-96.707739",
"40.813620"
],
"name": "Lincoln"
},
{
"state": "NM",
"population": "67947",
"id": "35",
"coordinates": [
"-105.937406",
"35.691543"
],
"name": "Santa Fe"
},
{
"state": "ND",
"population": "61272",
"id": "38",
"coordinates": [
"-100.779334",
"46.805372"
],
"name": "Bismarck"
},
{
"state": "OK",
"population": "579999",
"id": "40",
"coordinates": [
"-97.520354",
"35.472015"
],
"name": "Oklahoma City"
},
{
"state": "OR",
"population": "154637",
"id": "41",
"coordinates": [
"-123.043814",
"44.933260"
],
"name": "Salem"
},
{
"state": "TN",
"population": "601222",
"id": "47",
"coordinates": [
"-86.778365",
"36.167783"
],
"name": "Nashville"
},
{
"state": "TX",
"population": "790390",
"id": "48",
"coordinates": [
"-97.742984",
"30.267605"
],
"name": "Austin"
},
{
"state": "UT",
"population": "186440",
"id": "49",
"coordinates": [
"-111.888229",
"40.759505"
],
"name": "Salt Lake City"
},
{
"state": "VA",
"population": "204214",
"id": "51",
"coordinates": [
"-77.433654",
"37.540700"
],
"name": "Richmond"
},
{
"state": "WI",
"population": "233209",
"id": "55",
"coordinates": [
"-89.386694",
"43.072950"
],
"name": "Madison"
}
]
}