JSFiddle - React, Tailwind, and code Playground

by sduermael78

HTML

<script src="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/Leaflet.fullscreen.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js"></script>
<div id="mapid"></div>
<input id='search' class='search-ui' placeholder='Taper le code unité' />

CSS

body {
  margin: 0;
  padding: 0;
}

#mapid {
  height: 400px;
  width: 100%
}

.search-ui {
  position: absolute;
  top: 10px;
  right: 200px;
  z-index: 1000;
}

JavaScript

L.mapbox.accessToken = 'pk.eyJ1IjoiZHVlcm1hZWwiLCJhIjoiNTRmNjc2MjYzN2Y0NDk5ZjRjMTM1MDA2YjQzYTY4NjUifQ.zdJRPPXa8WvpcMZC1_RAyw';
var mymap = L.map('mapid').setView([31.728, 3.691], 3).addControl(L.mapbox.geocoderControl('mapbox.places'));

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZHVlcm1hZWwiLCJhIjoiNTRmNjc2MjYzN2Y0NDk5ZjRjMTM1MDA2YjQzYTY4NjUifQ.zdJRPPXa8WvpcMZC1_RAyw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.emerald'
}).addTo(mymap);
L.control.scale().addTo(mymap);

var baselayers = {
  satellite: L.mapbox.tileLayer('mapbox.satellite'),
  streets: L.mapbox.tileLayer('mapbox.streets'),
  emerald: L.mapbox.tileLayer('mapbox.emerald')
};
baselayers.emerald.addTo(mymap);
var overlays = {
  
};

L.control.layers(baselayers, overlays).addTo(mymap);
L.control.fullscreen().addTo(mymap);

$('#search').keyup(search);

var markers = L.markerClusterGroup();

var geojsonLayer = omnivore.geojson('https://gist.githubusercontent.com/Duermael/2f1a218458c84fe94192625b4daaaf51/raw/f7b9a6cc3ee399d3736f03758c4b31dcd6d331f5/map.geojson', null, L.mapbox.featureLayer())
  
  .on("ready", function() {
  
    attachPopups();
    
    // Now we can transfer single layers / markers to the marker cluster group.
    markers.addLayer(geojsonLayer); // use the global variable markers.
    mymap.fitBounds(geojsonLayer.getBounds());
    markers.addTo(mymap);
  });

function search() {
  // get the value of the search input field
  var searchString = $('#search').val().toLowerCase();

  geojsonLayer.setFilter(showCode); // this will "hide" markers that do not match the filter.
  attachPopups();
  
  // replace the content of marker cluster group.
  markers.clearLayers();
  markers.addLayer(geojsonLayer);

  // here we're...