<h2 class="toc">Circle Markers</h2>
{% apply view_source %}
<style scoped>
  #circlemarker-map {
    height: 500px;
    width: 60%;
  }
</style>
<div id="circlemarker-map"></div>
<script>
var map = g1.mapviewer({
  id: 'circlemarker-map',
  layers: {
    worldMap: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
    cityMarkers: {
      type: 'circleMarker',
      url: 'cities.json',
      latitude: 'lat',
      longitude: 'long',
      tooltip: function (d) {
        return `${d.name}: ${d.crimes}`
      },
      attrs: {
        fillColor: {
          metric: 'pollution',
          scheme: 'RdYlGn'
        }
      }
    }
  }
})
</script>
{% end %}
