ebergam/Mappa_D3_Leaflet.html

## Mappa_D3_Leaflet.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>Come fare una mappa con D3.js e Leaflet.js</title>

    <link  rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>

    <style type="text/css">


                #map {width: 600px;
                        height: 400px;
                        padding:0px;
                        border:0px;
                        margin:0px;
                        float:left;
                    }


               #infowindow {color:white;
                            font-size: 15px;
                            font-family:sans-serif;
                            border:0px;
                            padding:0px}
                .d3-tip {
                line-height: 1;
                font-weight: bold;
                padding: 12px;
                background: rgba(0, 0, 0, 0.8);
                color: #fff;
                border-radius: 5px;
                }

                .d3-tip.n:after {
                  margin: -1px 0 0 0;
                  top: 100%;
                  left: 0;
                }
  </style>

</head>
<body>
    <div id="map"></div>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <script type="text/javascript">


        var map = L.map('map').setView([44.8170555, 11.8957962], 9);
        mapLink =
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);


    map._initPathRoot()

   var url = 'http://localhost:8888/comuni_fe.geojson';

    var svg = d3.select("#map").select("svg"),
    g  = svg.append("g");
    d3.json(url, function(collection) {
        collection.features.forEach(function(d) {
            d.LatLng = new L.LatLng(d.geometry.coordinates[1],
                                    d.geometry.coordinates[0]
        )});


   var tip = d3.tip()
              .attr('class', 'd3-tip')
              .offset([-115, -165])
              .html(function(d) {
                console.log(d);
                return "<span id='infowindow'>"+JSON.stringify(d.properties.denominazione) + "</span>";
              });


   var punti = g.selectAll("circle")
            .data(collection.features)
            .enter().append("circle")
            .style("stroke", "#8B0000")
            .style("opacity", .6)
            .style("fill", "red")
            .attr("r", 20)
            .on("mouseover",tip.show)
            .on("mouseout", tip.hide)
            .call(tip);

        map.on("viewreset", update);
        update();

        function update() {
            punti.attr("transform",
            function(d) {
                return "translate("+
                    map.latLngToLayerPoint(d.LatLng).x +","+
                    map.latLngToLayerPoint(d.LatLng).y +")";
                }

            )
        }
    })
</script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<title>Come fare una mappa con D3.js e Leaflet.js</title>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>

	<style type="text/css">


	#map {width: 600px;
	height: 400px;
	padding:0px;
	border:0px;
	margin:0px;
	float:left;
	}


	#infowindow {color:white;
	font-size: 15px;
	font-family:sans-serif;
	border:0px;
	padding:0px}
	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 5px;
	}

	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}
	</style>

	</head>
	<body>
	<div id="map"></div>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script type="text/javascript">


	var map = L.map('map').setView([44.8170555, 11.8957962], 9);
	mapLink =
	'<a href="http://openstreetmap.org">OpenStreetMap</a>';
	L.tileLayer(
	'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© ' + mapLink + ' Contributors',
	maxZoom: 18,
	}).addTo(map);


	map._initPathRoot()

	var url = 'http://localhost:8888/comuni_fe.geojson';

	var svg = d3.select("#map").select("svg"),
	g = svg.append("g");
	d3.json(url, function(collection) {
	collection.features.forEach(function(d) {
	d.LatLng = new L.LatLng(d.geometry.coordinates[1],
	d.geometry.coordinates[0]
	)});


	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([-115, -165])
	.html(function(d) {
	console.log(d);
	return "<span id='infowindow'>"+JSON.stringify(d.properties.denominazione) + "</span>";
	});


	var punti = g.selectAll("circle")
	.data(collection.features)
	.enter().append("circle")
	.style("stroke", "#8B0000")
	.style("opacity", .6)
	.style("fill", "red")
	.attr("r", 20)
	.on("mouseover",tip.show)
	.on("mouseout", tip.hide)
	.call(tip);

	map.on("viewreset", update);
	update();

	function update() {
	punti.attr("transform",
	function(d) {
	return "translate("+
	map.latLngToLayerPoint(d.LatLng).x +","+
	map.latLngToLayerPoint(d.LatLng).y +")";
	}

	)
	}
	})
	</script>
	</body>
	</html>