JSFiddle - React, Tailwind, and code Playground

by alrick

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<script src="http://leafletjs.com/examples/us-states.js"></script>
<script src="https://dl.dropboxusercontent.com/s/fzc7ivxw80h5nnd/swiss-cantons.js"></script>
<div id="map"></div>

CSS

#map { height: 600px; }

JavaScript

////////////////////
// FUNCTIONS
////////////////////

// Highlight styling
function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
    }
}

// Reset styling (mouseout)
function resetHighlight(e) {
    geojson.resetStyle(e.target);
}

// Default styling
function style(feature) {
    return {
        fillColor: "#f9c47c",
        weight: 2,
        opacity: 1,
        color: "white",
        dashArray: "3",
        fillOpacity: 0.7
    };
}

// Called when feature clicked
function sayClicked() {
    alert("clicked");
}

// Add listener to features
function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: sayClicked,
    });
}

////////////////////
// FLOW
////////////////////

// Init map
var map = L.map('map').setView([46.961511,8.481445], 8);

// Setup tile layer bg
L.tileLayer("http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png", {
    key: "c692bacd28ce471f820690c73a71d75b",
    styleId: 22677
}).addTo(map);

var geojson;
geojson = L.geoJson(kantons, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);