If my hometown in Montgomery, New York were to overlay my current location in Austin, Texas.
Experimenting with qGIS, ogr2ogr and TopoJSON.
var arcs = new Datamap({ | |
scope: 'world', | |
element: document.getElementById('arcs'), | |
projection: 'mercator', | |
geographyConfig: { | |
highlightBorderColor: '#bada55', | |
popupTemplate: function(geography, data) { | |
if ( data ) | |
return '<div class="hoverinfo" style="max-width: 300px;"><strong>' + geography.properties.name + '</strong> <br />' + data.desc + ' </div>' |
If my hometown in Montgomery, New York were to overlay my current location in Austin, Texas.
Experimenting with qGIS, ogr2ogr and TopoJSON.
### Keybase proof | |
I hereby claim: | |
* I am markmarkoh on github. | |
* I am markmarkoh (https://keybase.io/markmarkoh) on keybase. | |
* I have a public key whose fingerprint is 3E98 C273 2434 4AB1 832C DD4C 7875 6107 8850 09AE | |
To claim this, I am signing this object: |
<script id='popup-template' type='text/x-handlebars-template'> | |
{{{ popup_template }}} | |
</script> | |
<script> | |
var chartParams = {{{ chartParams }}} | |
chartParams.element = document.getElementById('{{chartId}}') | |
{{# popup_template }} | |
var tmplFn = Handlebars.compile( | |
document.getElementById("popup-template").innerHTML.replace(/\"#!(.*?)!#\"/g, "\\$1") |
Instead of passing a distinct latitude
/longitude
with each bubble, you can optionally pass a centered
property which should be the ISO ID ( 2 character for US states (like NY
), 3 character for Countries (like USA
) ). The bubbles will appeared in the centermost point of each geography.
More DataMaps here
<!DOCTYPE html> | |
<html> | |
<meta charset="utf-8"> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<script src="http://datamaps.github.io/scripts/datamaps.none.min.js"></script> | |
<div id="container" style="position: relative; width: 500px; height: 300px;"></div> | |
<script> |
The Voronoi tessellation shows the closest point on the plane for a given set of points. This example updates the Voronoi diagram in response to mouse interaction! Colors by Cynthia Brewer; algorithm by Steven Fortune; implementation based on work by Nicolas Garcia Belmonte; interaction inspired by Raymond Hill.
Since the custom map data requires a AJAX request, all of the map plugins need to be instantiated in the done
callback provided by Datamaps.
http://datamaps.markmarkoh.com/using-custom-map-data-w-datamaps/
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Realtime Traffic Mapper</title> | |
<link rel="stylesheet" href="http://www.maxux.net/devs/maptraffic/style.css" media="all" type="text/css" /> | |
<style> | |
html, body, #map { | |
height: 100%; |