Scaled points

Scaling circles based on data contained in GeoJSON.

<!DOCTYPE html>
<meta charset=utf-8 />
<title>Scaled points</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src=''></script>
<link href='' rel='stylesheet' />
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
<div id='map'></div>

L.mapbox.accessToken = '<your access token here>';
var map ='map', 'mapbox.streets')
    .setView([24, 122], 7);

// GeoJSON data: see for the full description of this format.
// In these lines, we create some random points. This, of course, you can change:
// instead, your data can be hardcoded as a Javascript object, or pulled in
// from an external file with AJAX, or loaded from Mapbox automatically.
var geoJsonData = {
  type: "FeatureCollection",
  features: []
for (var i = 0; i < 30; i++) {
        type: 'Feature',
        properties: {
            // The important part is here: that each feature has some property
            // that we refer to later on, in `pointToLayer`, that determines
            // the size of the scaled circle.
            count: Math.random() * 20
        geometry: {
            type: 'Point',
            coordinates: [120 + Math.random() * 2, 23 + Math.random() * 2]

var geoJson = L.geoJson(geoJsonData, {
    pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
            // Here we use the `count` property in GeoJSON verbatim: if it's
            // to small or two large, we can use basic math in Javascript to
            // adjust it so that it fits the map better.
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example