##Preview
Dashing widget to display geo points in Canada. This widget is designed as a general purpose map for any api that returns latitude and longitude data.
##Dependencies
Move topojson.v1.min.js
to /assets/javascripts
and ca.topojson
to the /public
directory so D3 can load the map data.
##Usage
To use this widget, copy camap.html
, camap.coffee
, and camap.scss
into the /widgets/camap
directory.
You will have to create a custom job to populate the geo point data. The JSON data follows this format
{
"points": [
{
"id": 12345,
"lat": 35,
"lon": -70,
"type": "red"
},
{
"id": 678910,
"lat": 35,
"lon": -70,
"type": "green"
}
]
}
Each point must have a unique id
, so it can be properly added and removed by d3. The type
field is optional and will be appended as a class to the svg circle. By default all points are blue and there are CSS classes for red and green.
To include the widget in a dashboard, add the following snippet to the dashboard layout file:
<li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
<div data-id="camap" data-view="Camap" data-title="Flickr Activity"></div>
</li>
Visit this page for a demo of the map connected to the Flickr api.