JSFiddle - React, Tailwind, and code Playground

by Teppo Jussmäki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<p>Takkatie 18
<div id='hack_kartta' class='rChart leaflet'></div>

CSS

#hack_kartta {
	height: 500px;
	width: 100%;
}
.avain {
    font-family: EntypoRegular;
    font-size: 20pt;
    color:#4B0082;
}
.avain:before {content: '-';}

.jasen {
    font-family: EntypoRegular;
    font-size: 20pt;
}
.jasen:before {content: '+';}

.ikonityyli {
    font-family: EntypoRegular;
    font-size: 25pt;
    line-height: 15pt;
    float: left;
    clear: none;
}

JavaScript

var spec = {
    "dom": "hack_kartta",
    "width": 400,
    "height": 400,
    "urlTemplate": "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
    "layerOpts": {
    "attribution": "Map data<a href=\"http://openstreetmap.org\">OpenStreetMap</a>\n contributors, Imagery<a href=\"http://mapbox.com\">MapBox</a>"
    },
    "center": [60.22205, 24.85190],
    "zoom": 18,
    "id": "hack_kartta"
};
var map = L.map(spec.dom, spec.mapOpts);

map.setView(spec.center, spec.zoom);
if (spec.provider) {
    L.tileLayer.provider(spec.provider).addTo(map);
} else {
    L.tileLayer(spec.urlTemplate, spec.layerOpts).addTo(map);
}
/*
var hacklabIcon = L.icon({
    iconUrl: 'https://dl.dropboxusercontent.com/s/xnsb1hhquysdt1v/logo.png',
    shadowUrl: 'https://dl.dropboxusercontent.com/s/icf79sksnjkvysc/varjo.png',
    iconSize: [30, 30], // size of the icon
    shadowSize: [40, 40], // size of the shadow
    iconAnchor: [15, 15], // point of the icon which will correspond to marker's location
    shadowAnchor: [15, 25], // the same for the shadow
    popupAnchor: [-5, -10] // point from which the popup should open relative to the iconAnchor
});*/

/*
L.marker([60.22205, 24.85190], { icon: hacklabIcon })
   .addTo(map).bindPopup("Helsinki Hacklab, our current location");
*/
/* 7 = tähti, Q = salama, ym. katso loput http://www.fonts2u.com/entypo.font */


/*60.22205, 24.85190*/
var Nuoli= L.polygon([[60.22197, 24.85196],[60.22193, 24.85190],[60.22194, 24.85195],
                  [60.22190, 24.85195],[60.22192, 24.85170],[60.22230, 24.85158],
                  [60.22229, 24.85150],[60.22190, 24.85165],[60.22187, 24.85200],
                  [60.22194, 24.85198],[60.22193, 24.85203]]).addTo(map);

var linja550 =...