JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://leafletjs.com/examples/sample-geojson.js" type="text/javascript"></script>
    <script src="http://leafletjs.com/dist/leaflet.js"></script>

CSS

</style>
<!-- access to the HEAD element -->
    <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css" /><![endif]-->
<style>

JavaScript

var map = L.map('map').setView([39.747,-104.989], 15);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

L.geoJson([bicycleRental], {
   pointToLayer: function (feature, latlng) {
       return L.circle(latlng, {
/* WHY "L.circle" DOESN'T WORK ???
   According to this, it should:  https://github.com/Leaflet/Leaflet/pull/1877#issuecomment-21123922
*/           
           radius: 20,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
       });
   }
}).addTo(map);