edouard-lopez/gironde-epci.topo.json

## gironde-epci.topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              gironde-epci.topo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!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>

## main.js
/**
* 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));
	<!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>
	/**
	* 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));