Tutorial - Choropleth Map

First, let's create our map, add a base map, and create a feature layer. Also, to keep it simple, we import our data inline.

var map = geo.map({
  node: '#map',
  center: { x: -109, y: 41 },
  zoom: 5
});

map.createLayer('osm');
var layer = map.createLayer('feature');

var states = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "name": "Colorado", "population": 5541000 }, "geometry": { "type": "Polygon", "coordinates": [[[-107.919731, 41.003906], [-105.728954, 40.998429], [-104.053011, 41.003906], [-102.053927, 41.003906], [-102.053927, 40.001626], [-102.042974, 36.994786], [-103.001438, 37.000263], [-104.337812, 36.994786], [-106.868158, 36.994786], [-107.421329, 37.000263], [-109.042503, 37.000263], [-109.042503, 38.166851], [-109.058934, 38.27639], [-109.053457, 39.125316], [-109.04798, 40.998429], [-107.919731, 41.003906]]] } }, { "type": "Feature", "properties": { "name": "New Mexico", "population": 2081000 }, "geometry": { "type": "Polygon", "coordinates": [[[-107.421329, 37.000263], [-106.868158, 36.994786], [-104.337812, 36.994786], [-103.001438, 37.000263], [-103.001438, 36.501861], [-103.039777, 36.501861], [-103.045254, 34.01533], [-103.067161, 33.002096], [-103.067161, 31.999816], [-106.616219, 31.999816], [-106.643603, 31.901231], [-106.528588, 31.786216], [-108.210008, 31.786216], [-108.210008, 31.331629], [-109.04798, 31.331629], [-109.042503, 37.000263], [-107.421329, 37.000263]]] } }, { "type": "Feature", "properties": { "name": "Utah", "population": 3051000 }, "geometry": { "type": "Polygon", "coordinates": [[[-112.164359, 41.995232], [-111.047063, 42.000709], [-111.047063, 40.998429], [-109.04798, 40.998429], [-109.053457, 39.125316], [-109.058934, 38.27639], [-109.042503, 38.166851], [-109.042503, 37.000263], [-110.499369, 37.00574], [-114.048427, 37.000263], [-114.04295, 41.995232], [-112.164359, 41.995232]]] } }, { "type": "Feature", "properties": { "name": "Wyoming", "population": 585000 }, "geometry": { "type": "Polygon", "coordinates": [[[-109.080842, 45.002073], [-105.91517, 45.002073], [-104.058488, 44.996596], [-104.053011, 43.002989], [-104.053011, 41.003906], [-105.728954, 40.998429], [-107.919731, 41.003906], [-109.04798, 40.998429], [-111.047063, 40.998429], [-111.047063, 42.000709], [-111.047063, 44.476286], [-111.05254, 45.002073], [-109.080842, 45.002073]]] } }] };

Step 1

Active

Inactive

We can use GeoJSON reader to create the polygon feature.

Step 2

Active

Inactive

We can also use polygon feature API to create the polygon feature.

Step 2-B

Active

Inactive

Now we style polygon with color.

Step 3

Active

Inactive

Or, we could create our choropleth map with the dedicated choropleth feature, which uses polygon feature internally.

Step 2-C

Active

Inactive

Now we can add a legend to our map.

Step 4

Active

Inactive