I tried to create my chart using leaflet
and caught an error that say L.minichart is not a function
. And here is my script :
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script> <script src="assets/js/leaflet-panel-layers-master/src/leaflet-panel-layers.js"></script> <script src="assets/js/leaflet.ajax.js"></script> <script type="text/javascript"> var map = L.map('mapid').setView([-7.7951371, 110.1039079], 11); var LayerKita = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw' }); map.addLayer(LayerKita); // script pie chart coba dari github var options = { data: { 'dataPoint1': 5 * 20, 'dataPoint2': 7 * 20, 'dataPoint3': 9 * 20, 'dataPoint4': 3 * 20 }, chartOptions: { 'dataPoint1': { fillColor: '#FEE5D9', minValue: 0, maxValue: 20, maxHeight: 20, displayText: function (value) { return value.toFixed(2); } }, 'dataPoint2': { fillColor: '#FCAE91', minValue: 0, maxValue: 20, maxHeight: 20, displayText: function (value) { return value.toFixed(2); } }, 'dataPoint3': { fillColor: '#FB6A4A', minValue: 0, maxValue: 20, maxHeight: 20, displayText: function (value) { return value.toFixed(2); } }, 'dataPoint4': { fillColor: '#CB181D', minValue: 0, maxValue: 20, maxHeight: 20, displayText: function (value) { return value.toFixed(2); } } }, weight: 1, color: '#000000', } var barChartMarker = L.minichart([-7.900886,110.073918], {data: [1, 2, 3], maxValues: 3}); map.addLayer(barChartMarker); </script>
Advertisement
Answer
You have not imported the library. Include it inside the head tag after importing leaftet css and js:
<head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script> </head>
<!DOCTYPE html> <html> <head> <title>Quick Start - Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script> </head> <body> <div id="mapid" style="width: 600px; height: 400px;"></div> <script> var map = L.map('mapid').setView([-7.7951371, 110.1039079], 11); var LayerKita = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw' }); map.addLayer(LayerKita); // script pie chart coba dari github var options = { data: { 'dataPoint1': 5 * 20, 'dataPoint2': 7 * 20, 'dataPoint3': 9 * 20, 'dataPoint4': 3 * 20 }, chartOptions: { 'dataPoint1': { fillColor: '#FEE5D9', minValue: 0, maxValue: 20, maxHeight: 20, displayText: function(value) { return value.toFixed(2); } }, 'dataPoint2': { fillColor: '#FCAE91', minValue: 0, maxValue: 20, maxHeight: 20, displayText: function(value) { return value.toFixed(2); } }, 'dataPoint3': { fillColor: '#FB6A4A', minValue: 0, maxValue: 20, maxHeight: 20, displayText: function(value) { return value.toFixed(2); } }, 'dataPoint4': { fillColor: '#CB181D', minValue: 0, maxValue: 20, maxHeight: 20, displayText: function(value) { return value.toFixed(2); } } }, weight: 1, color: '#000000', } var barChartMarker = L.minichart([-7.900886, 110.073918], { data: [1, 2, 3], maxValues: 3 }); map.addLayer(barChartMarker); </script> </body> </html>