GeoJSON MultiPoint not showing on map - leaflet

Question

var feature = {
"type": "feature",
"properties": {
"style": {
"color": "#004070",
"weight": 4,
"opacity": 1
}
},
"geometry": {
"type": "MultiPoint",
"coordinates": [[
[0.25, 51.47],
[0.26, 51.47],
[0.27, 51.47]
]]
}
};
var geojsonLayer = new L.GeoJSON(feature);
map.addLayer(geojsonLayer);
I am trying to show the above three points on my map. Why are the markers not appearing?

Answer 1

Make sure your GeoJSON data is compliant as per the spec. You have online linting tools available, e.g. http://geojsonlint.com/ and http://geojson.io/
In your case:
"Feature" type must be capitalized.
"coordinates" for a "MultiPoint" geometry type must be an array of positions / coordinates. But you have an array of array of coordinates. (one extra level)
Once these 2 mistakes are corrected, everything works:
var map = L.map('map');
var feature = {
"type": "Feature",
"properties": {
"style": {
"color": "#004070",
"weight": 4,
"opacity": 1
}
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[0.25, 51.47],
[0.26, 51.47],
[0.27, 51.47]
]
}
};
var geojsonLayer = new L.GeoJSON(feature);
map.addLayer(geojsonLayer).fitBounds(geojsonLayer.getBounds());
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>