Test
width: 100%; max-width: 100%; max-height: 100%;
} </style>
</head>
<body>
<script> var url = 'usa.json'; // my GeoJSON data source, in same folder as my html page.
var map = L.map('map').setView([10, 5], 4);
var topo=new L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{ attribution: '© <a href="http://osm.org/copyright">OpenTopoMap</a> contributors'}).addTo(map); var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
// Set style function that sets fill color property
function style(feature) {
return {
fillColor: '#e24e14',
fillOpacity: 0.5,
weight: 2,
opacity: 1,
color: '#e24e14',
dashArray: '3'
};
} // var highlight = { // 'fillColor': 'yellow', // 'weight': 2, // 'opacity': 1 // };
function forEachFeature(feature, layer) {
var popupContent = "
STATE: "+ feature.properties.STATE_NAME +'
';
layer.bindPopup(popupContent);
// layer.on("click", function (e) {
// stateLayer.setStyle(style); //resets layer colors
// layer.setStyle(highlight); //highlights selected.
// });
}
// Null variable that will hold layer var stateLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: style});
$.getJSON(url, function(data) {
stateLayer.addData(data); });
stateLayer.addTo(map);
// for Layer Control var baseMaps = {
"Open Street Map": osm, "Open Topo Map": topo,
};
var overlayMaps = {
"USA":stateLayer
};
//Add layer control L.control.layers(baseMaps, overlayMaps).addTo(map);
</script> </body> </html>