How detailed does your map need to be?
Choose from some preset regions
To use your map with Leaflet:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet GeoJSON Example</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<style type="text/css">
.leaflet-container{background-color:#c5e8ff;}
</style>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script>
var myGeoJSONPath = 'path/to/mymap.geo.json';
var myCustomStyle = {
stroke: false,
fill: true,
fillColor: '#fff',
fillOpacity: 1
}
$.getJSON(myGeoJSONPath,function(data){
var map = L.map('map').setView([39.74739, -105], 4);
L.geoJson(data, {
clickable: false,
style: myCustomStyle
}).addTo(map);
})
</script>
</body>
</html>
Your custom map is shown below. Your map size is 0 KB (before gzip compression.)
If you're still not sure, check out the following resource for some background and explainers.