Material Vue.js Leaflet Heatmap Card

index.html

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<template id='v-card-content'>
  <div id="map-canvas" class="heatmap"></div>
</template>

<!-- material card template for vue.js -->
<template id="v-card">
  <div class="widget card">
        <div class="card-content">
          <span class="card-title grey-text text-darken-4">{{title}}</span>
          <v-card-content></v-card-content>
        </div>
        <div class="card-action">
          <a href="//materializecss.com">Documentation</a>
          <a href='//github.com/Grace'>GitHub</a>
        </div>
      </div>
      
    </div>
</template>

<div id="demo">
  <v-card title="Material Vue.js Heatmap Card" content='Example'>
  </v-card>
</div>

Material Vue.js Leaflet Heatmap Card.markdown

Material Vue.js Leaflet Heatmap Card

Material design card implemented using Vue.js

Forked from Grace's Pen Vue.js Material Card.

A Pen by Captain Anonymous on CodePen.

License.

script.js

// define
var Card = Vue.extend({
  props: ['title'],
  template: '#v-card'
});

var CardContent = Vue.extend({
  template: '#v-card-content'
});

// Register MaterialCard Component
Vue.component('v-card', Card);
Vue.component('v-card-content', CardContent);

// Root Instance
var vm = new Vue({
  el: '#demo'
});

$('.widget').draggable();

var map = L.map('map-canvas').setView([-37.87, 175.475], 12);

var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

addressPoints = addressPoints.map(function (p) { return [p[0], p[1]]; });

var heat = L.heatLayer(addressPoints).addTo(map);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/example/realworld.10000.js"></script>

style.css

.widget {
  width: 650px;
  height: 500px;
}

#map-canvas { height: 350px; }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" rel="stylesheet" />