A KMZ file loader for Leaflet Maps
For a working example see demo
- include CSS & JavaScript
<head> ... <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style> <!-- Leaflet (JS/CSS) --> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <!-- JSZIP --> <script src="https://unpkg.com/[email protected]/dist/jszip.min.js"></script> <!-- togeojson --> <script src="https://unpkg.com/[email protected]/togeojson.js"></script> <!-- geojson-vt --> <script src="https://unpkg.com/[email protected]/geojson-vt.js"></script> <!-- Leaflet-KMZ --> <script src="https://unpkg.com/[email protected]/libs/KMZParser.js"></script> <script src="https://unpkg.com/[email protected]/libs/GridLayer.GeoJSON.js"></script> ... </head>
- choose a div container used for the slippy map
<body> ... <div id="map"></div> ... </body>
- create your first simple “leaflet-kmz slippy map
<script> var map = L.map('map'); map.setView(new L.LatLng(43.5978, 12.7059), 5); var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { maxZoom: 17, attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)', opacity: 0.90 }); OpenTopoMap.addTo(map); // Instantiate KMZ parser (async) var kmzParser = new L.KMZParser({ onKMZLoaded: function(layer, name) { control.addOverlay(layer, name); layer.addTo(map); } }); // Add remote KMZ files as layers (NB if they are 3rd-party servers, they MUST have CORS enabled) kmzParser.load('https://raruto.github.io/examples/leaflet-kmz/regions.kmz'); kmzParser.load('https://raruto.github.io/examples/leaflet-kmz/capitals.kmz'); kmzParser.load('https://raruto.github.io/examples/leaflet-kmz/globe.kmz'); var control = L.control.layers(null, null, { collapsed:false }).addTo(map); </script>
Notes:
- to be able to use Google files (eg. Google My Maps) you MUST use a valid third-party kml proxy server
- the plugin will identify and process both zipped (kmz) or unzipped (kml) files
Compatibile with: [email protected], [email protected], [email protected], [email protected]
Contributors: Raruto
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent