xxxxxxxxxx
<html>
<head>
<title>HTML5</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=650, user-scalable=yes">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#mapcanvas{
height:100%;
}
</style>
<script>
var geoJsonObject;
$(document).ready(function(){
map = new L.Map('mapcanvas');
var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
// start the map in South-East England
map.setView(new L.LatLng(36.788283, -119.805891),6);
map.addLayer(osm);
//county.json is a topojson file
var myStyle = {
"color": "#003399",
"weight": 1,
"opacity": 0.65
};
$.getJSON("township.json", function(data){
geoJsonObject = topojson.feature(data, data.objects.township)
L.geoJson(geoJsonObject,{
style:myStyle
}).addTo(map);
});
});//end document ready
</script>
</head>
<body>
<div id="mapcanvas">
</div>
</body>
</html>
Modified http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js to a secure url
Modified http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js
https://d3js.org/topojson.v1.min.js