JSFiddle - React, Tailwind, and code Playground

by denvut

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://googledrive.com/host/0B55_4P6vMjhIdzUteXhjVDVHYjg/leaflet.fusesearch.js"></script>
<script src="https://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/fuse.min.js"></script>
<link rel="stylesheet" href="http://rawgit.com/denvut/leaflet-fusesearch/master/src/leaflet.fusesearch.css">
<script src="https://rawgit.com/denvut/Leaflet.draw/master/dist/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://rawgit.com/denvut/Leaflet.draw/master/dist/leaflet.draw.css">
<link rel="stylesheet" href="https://rawgit.com/denvut/Leaflet.toolbar/master/dist/leaflet.toolbar.css">
<script src="https://rawgit.com/denvut/Leaflet.toolbar/master/dist/leaflet.toolbar.js"></script>
<div id="map"></div>

CSS

#map {
    height: 500px;
    width: 500px;
}

JavaScript

//Creating the map and adding a tileLayer
var map = L.map('map').setView([44.639509, 22.653488], 13);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

//the options for the search control
var options = {
	placeholder: 'search pizza',
	threshold: 0.5,
	showResultFct: function(feature, container) {
		props = feature.properties;
		var name = L.DomUtil.create('p', 'searchbox', container);
        //this doesn't work, I get undefined
		name.innerHTML = props.Menu.Name;
		container.appendChild(L.DomUtil.create('p', 'searchcontent', container));
		var info = '' +  props.Menu.Ingredients + ', ' + props.Name;
        container.appendChild(document.createTextNode(info));
    }
};

//creating the search control
var fuseSearchCtrl = L.control.fuseSearch(options);
map.addControl(fuseSearchCtrl);

//adding the geojson file
$.getJSON('https://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/pizza.geojson', function(data) {
	var pizzerii = L.geoJson(data, {
		onEachFeature: function (feature, layer) {
			feature.layer = layer;
		}
	}).addTo(map);
    //I want to search by ingredients, and show all the objects that contain the search values
	fuseSearchCtrl.indexFeatures(data.features, ['Menu.Ingredients']);
});
// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    if (type === 'marker') {
        // Do marker specific actions
    }

    // Do whatever else you need to. (save to db, add to map etc)
    map.addLayer(layer);
});
map.on('draw:edited', function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        //do whatever you want, most likely save back...