<h2 class="toc">Markers</h2>
{% apply view_source %}
<style scoped>
  #markers-map {
    height: 500px;
  }
</style>
<div id="markers-map"></div>
<script>
  var map = g1.mapviewer({
    id: 'markers-map',
    fitbounds: {paddingTopLeft: [55, 55], animate: false},
    layers: {
      worldMapper: { type: 'tile', url: 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png' },
      cityCircleMarkers: {
        type: 'marker',
        url: 'cities.json',
        latitude: 'lat',
        longitude: 'long',
        options: {
          title: '$$ tooltip text',
        },
        attrs: {
          tooltip: function (d) {
            return '<div>State: ' + d.name + '</div>'
          }
        }
      }
    }
  })
</script>
{% end %}
