Download vector maps

Build your map

Click the map to select your countries or choose from the presets to the right.

Resolution

How detailed does your map need to be?

Regions

Choose from some preset regions

Download your custom map

The Setup

To use your map with Leaflet:

  1. Rename your downloaded geojson file and publish it to your webserver.
  2. Create a HTML page using the template below.
  3. Replace myGeoJSONPath with the path to your own file.
  4. That's it!

The Code


<!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>

A preview

Your custom map is shown below. Your map size is 0 KB (before gzip compression.)

Further Reading

If you're still not sure, check out the following resource for some background and explainers.

Fork me on GitHub