Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

D3 + TopoJSON + Leaflet

View gironde-epci.topo.json
Octocat spinner 128
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
View gironde-epci.topo.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
<!doctype html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>itineraire-dechets</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css styles/vendor.css -->
<link rel="stylesheet" href="lib/styles/leaflet.css">
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<link rel="shortcut icon" href="/favicon.ico">
 
</head>
<body>
<header class="group">
<div class="appName">
itineraire-dechets
</div>
</header>
 
<div class="map-application">
<div id="map" class="map"></div>
</div>
 
 
<!-- build:js scripts/vendor.js -->
<script src="lib/scripts/leaflet.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/topojson/topojson.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>
View gironde-epci.topo.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
/**
* Heavily based on Mike Bostocks work: http://bost.ocks.org/mike/leaflet/
* @param {[type]} window [description]
* @param {[type]} document [description]
* @param {[type]} L [description]
* @param {[type]} undefined [description]
* @return {[type]} [description]
*/
(function (window, document, L, undefined) {
'use strict';
 
/* create leaflet map */
var map = L.map('map', {
center: [44.8997, -0.8157],
zoom: 9
});
 
/* add default stamen tile layer */
new L.tileLayer('http://{s}.tiles.mapbox.com/v3/examples.map-vyofok3q/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 18,
attribution: 'Map data © <a href="http://www.openstreetmap.org">OpenStreetMap contributors</a>'
}).addTo(map);
 
var svg = d3.select(map.getPanes().overlayPane).append('svg'),
g = svg.append('g').attr('class', 'leaflet-zoom-hide');
 
d3.json('scripts/gironde-epci.topo.json', function (collection) {
var bounds = d3.geo.bounds(topojson.feature(collection, collection.objects['gironde-epci.geo']));
var path = d3.geo.path().projection(projectPoint);
 
 
var feature = g.selectAll('.entity')
.data(topojson.feature(collection, collection.objects['gironde-epci.geo']).features)
.enter()
.append('path')
.attr('class', 'entity')
;
var label = g.selectAll('.entity-label')
.data(topojson.feature(collection, collection.objects['gironde-epci.geo']).features)
.enter()
.append('text')
.attr('class', 'entity-label')
;
 
map.on('viewreset', reset);
reset();
 
// Reposition the SVG to cover the features.
function reset() {
var bottomLeft = projectPoint(bounds[0]),
topRight = projectPoint(bounds[1]);
 
svg.attr('width', topRight[0] - bottomLeft[0])
.attr('height', bottomLeft[1] - topRight[1])
.style('margin-left', bottomLeft[0] + 'px')
.style('margin-top', topRight[1] + 'px');
 
var translation = -bottomLeft[0] + ',' + -topRight[1];
g.attr('transform', 'translate(' + -bottomLeft[0] + ',' + -topRight[1] + ')');
feature.attr('d', path);
 
label.attr('id', function (d) { return d.id; })
.attr('class', 'entity-label')
.attr('transform', function (d) { return 'translate(' + path.centroid(d) + ')'; })
.attr('x', -20)
.attr('dy', '.35em')
.text(function (d) { return toProperCase(d.id); })
;
}
 
/*
Preserve keywords (CUB, COBAN, COBAS, CDC) in uppercase.
@return {string}
*/
function toProperCase(str) {
var pc = str.replace(/\w\S*/g, function (s) {
return s.charAt(0).toUpperCase() + s.substr(1).toLowerCase();
});
return pc.replace(/cub|coban|cobas|cdc/i, function (m) {
return m.toUpperCase();
});
};
 
// Use Leaflet to implement a D3 geographic projection.
function projectPoint(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
});
}(window, document, L));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.