phillipadsmith/map.html Secret

## map.html
<html>
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
        <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
        <![endif]-->
        <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
        <script type="text/javascript" src="ridings.js"></script>
        <style type="text/css" media="all">
         #map { height: 780px; border: 1px solid black; }
        .info {
            padding: 10px;
            font: 16px/18px Arial, Helvetica, sans-serif;
            background: white;
            background: rgba(255,255,255,0.8);
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            border-radius: 5px;
            height: 100px;
        }
        .info h4 {
            margin: 0 0 5px;
            color: #777;
        }
        </style>
    </head>
    <body>
        <div id="map">
        </div>
    </body>
    <script>
        var map = L.map('map', {doubleClickZoom:false} ).setView([51.2385, -123.1185], 7);

        L.tileLayer('http://{s}.tile.cloudmade.com/8df2e4e99eb94de2a136db10bf4e9afa/1796@2x/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
        }).addTo(map);

var style = {
     weight: 2,
     color: 'black',
     opacity: 0.2,
     fillColor: '#fff',
     fillOpacity: 0.2
};

var styleHighlight = {
    weight: 2,
    color: '#666',
    dashArray: '',
    fillColor: '#A8D14B',
    fillOpacity: 0.7
};

var geojson;

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle(styleHighlight);

    info.update(layer.feature.properties);
}

function resetHighlight(e) {
    var layer = e.target
    layer.setStyle(style);
    info.update();
}

function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

function linkToPage(e) {
    alert("Link to a page!");
}

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature,
        dblclick: linkToPage
    });
}

geojson = L.geoJson(ridingData, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);


// control that shows state info on hover
var info = L.control();

info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
};

info.update = function (props) {
        this._div.innerHTML = '<h4>Electoral Districts</h4>' +  (props ?
        '<b>' + props.name + '</b><br /><br />Double-click to read more on this district'
                : 'Hover over a district for more info');
};

info.addTo(map);
    </script>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
	<script type="text/javascript" src="ridings.js"></script>
	<style type="text/css" media="all">
	#map { height: 780px; border: 1px solid black; }
	.info {
	padding: 10px;
	font: 16px/18px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
	height: 100px;
	}
	.info h4 {
	margin: 0 0 5px;
	color: #777;
	}
	</style>
	</head>
	<body>
	<div id="map">
	</div>
	</body>
	<script>
	var map = L.map('map', {doubleClickZoom:false} ).setView([51.2385, -123.1185], 7);

	L.tileLayer('http://{s}.tile.cloudmade.com/8df2e4e99eb94de2a136db10bf4e9afa/1796@2x/256/{z}/{x}/{y}.png', {
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
	}).addTo(map);

	var style = {
	weight: 2,
	color: 'black',
	opacity: 0.2,
	fillColor: '#fff',
	fillOpacity: 0.2
	};

	var styleHighlight = {
	weight: 2,
	color: '#666',
	dashArray: '',
	fillColor: '#A8D14B',
	fillOpacity: 0.7
	};

	var geojson;

	function highlightFeature(e) {
	var layer = e.target;

	layer.setStyle(styleHighlight);

	info.update(layer.feature.properties);
	}

	function resetHighlight(e) {
	var layer = e.target
	layer.setStyle(style);
	info.update();
	}

	function zoomToFeature(e) {
	map.fitBounds(e.target.getBounds());
	}

	function linkToPage(e) {
	alert("Link to a page!");
	}

	function onEachFeature(feature, layer) {
	layer.on({
	mouseover: highlightFeature,
	mouseout: resetHighlight,
	click: zoomToFeature,
	dblclick: linkToPage
	});
	}

	geojson = L.geoJson(ridingData, {
	style: style,
	onEachFeature: onEachFeature
	}).addTo(map);


	// control that shows state info on hover
	var info = L.control();

	info.onAdd = function (map) {
	this._div = L.DomUtil.create('div', 'info');
	this.update();
	return this._div;
	};

	info.update = function (props) {
	this._div.innerHTML = '<h4>Electoral Districts</h4>' + (props ?
	'<b>' + props.name + '</b><br /><br />Double-click to read more on this district'
	: 'Hover over a district for more info');
	};

	info.addTo(map);
	</script>
	</html>