##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.
Hi,
I really like how your widget looks and would like to use it for my own small project, but I can't get it running. I just end up with a white box without anything except the title. This holds for this camap and for the usmap.
I followed your instructions, but in the javascript console the following error shows up: "Uncaught ReferenceError: topojson is not defined"
Any idea what is missing? How do I install the topojson module? There is no gem and google only finds node.js stuff.
Thanks for your help,
Christian