Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
<!-- Search bar -->
  <div class="input-group">
    <input type="text" class="form-control" id="searchTerm" placeholder="Search Bar">
    <div class="input-group-append">
      <button class="btn btn-info" type="button" id="searchBtn" onclick="search();">Search</button>
    </div>
  </div>
<!-- /Search bar -->

<!-- Panel button -->
  <button type="button" id="panelBtn" class="btn btn-primary mt-5" onclick="togglePanel();">Open Panel ></button>
<!-- /Panel button -->
 
<!-- Panel --> 
  <div id="panel">
    <!-- Dissmiss button to close Sidepanel -->
    <button class="btn btn-secondary" type="button" id="closeBtn" onclick="closePanel();">
      &times;
    </button>
    <p id="panelContent">
    <h2 id="panelTitle">Title</h2>
    <span id="panelText">Text</span>    
    </p>
  </div>
<!-- /Panel -->  

<!-- Map -->
  <div id="mapDemo">
    <!-- Map markers -->
  </div>
<!-- /Map -->

</body>

              
            
!

CSS

              
                /* Basic settings for map */
#mapDemo {
  width: 100vw;
  height: 100vh;
}

/* Search bar */
.input-group{
  position:fixed;
  z-index: 401; /* minimum z-index for content to sit on top of map */
  width: 100vw;
}

@media only screen and (min-width: 501px) {
    .input-group {
        width: 500px;
    }
} /* expand search bar to 100vw on small screens */

/* Open/close panel button */
#panelBtn{
  position:fixed;
  z-index: 401;
} /* allows panel button to sit on top of content */

#panel{
  position: fixed;
  z-index: 401;
  width: 100vw;
  left: -500px;
  top:100px;
  bottom: 0;
  overflow-y: scroll;
  background: #FFFFFF;
  transition: all 0.3s; /* gives a "sliding" effect */
}

@media only screen and (min-width: 500px) {
    #panel {
        width: 500px;
        left: -500px;
    }
} /* expand sidebar to 100vw on small screens (when active) */

#panel.active {
    left: 0;
} /* show sidebar when active, see JS */


/* Autocomplete */
.ui-widget-content{
  z-index:401;
}
              
            
!

JS

              
                // Create map
map = L.map('mapDemo', {
  minZoom: 4,
  maxZoom: 6
});

// Place Zoom Control at screen bottom right of the screen
map.zoomControl.setPosition('bottomright');

// Define map bounds so that it fits data coordinates
var bounds = [[-10,-10], [10,10]];
map.fitBounds(bounds);

// Create a dictionary of markers, with IDs (key), coordinates and content (value)
var markers = {'id1':{'title':'Marker 1','coords':[1,0],'description':'Text for marker 1'}, 'id2':{'title':'Marker 2','coords':[4,2],'description':'Text for marker 2'}, 'id3':{'title':'Marker 3','coords':[8,8],'description':'Text for marker 3'}}

// Define all variables
var layers = L.layerGroup().addTo(map);
var titlesList = [];  
var idToLayer = {};
var titleToId = {};
var idToTitle = {};
var idToText = {};

// Declare updatePanel: open panel, update panel button inner HTML and update content with updateContent(), depending on mId
var updatePanel = function(mId){
  // Open panel
  $('#panel').addClass('active');
  // Update Open/Close Panel button on map
  $("#panelBtn").text('< Close Panel');
  // Store marker title and text in variables
  var markerTitle = idToTitle[mId];
  var markerText = idToText[mId];
  // Update panel content with marker title and text
  $('#panelTitle').text(markerTitle);
  $('#panelText').text(markerText);
};

// Declare markerOnClick: 
var markerOnClick = function(){
  // Store markerId
  var mId = this.options.markerId;
  // Store marker title & update seach placeholder
  var markerTitle = idToTitle[mId];
  $('#searchTerm').val(markerTitle);
  // Update Panel
  updatePanel(mId);
};

// Loop through the dictionary, define coordinates & marker options and add markers to the map
$.each(markers, function(key, val) {
  var markerOptions = {markerId: key,
                       markerTitle: val['title'],
                       markerText: val['description']};

  // Plot markers on the map 
  var marker = L.marker(val['coords'], markerOptions).addTo(map);

  // Set popup options
  var popupContent = val['title'];
  // Bind popup to marker click
  marker.bindPopup(popupContent);

  // Create a list of marker titles 
  titlesList.push(val['title']);

  // Call markerOnClick when event click on marker 
  marker.on('click', markerOnClick);

  // Create a layer for each marker that is part of the feature group of layers  
  layers.addLayer(marker)

  // -- Append dictionaries --
  //{key:'title',value:id}  
  titleToId[val['title']] = key;
  //{key:id,value:'title'} 
  idToTitle[key] = val['title'];  
  // {key:id,value:'text'}  
  idToText[key] = val['description'];

});

// loup through and append dictionnary of {key:id,value:layerId} 
$.each(layers._layers, function(key,val){
  idToLayer[val.options.markerId] = key;
});  

// SEARCH
$(function() {
   $("#searchTerm").autocomplete({
     source: titlesList,
     minLength: 1, // minimum number of characters required to trigger autocomplete
     select: function(event, ui) { // update the input field and run the search function on select
       $("#searchTerm").val(ui.item.label);
       console.log(ui.item.label);
       search();
     }
   });
 });

// Search function
var search = function(){
   $("#searchTerm").blur(); //close autocomplete after click event
   // get value from search field
   var markerTitle = $("#searchTerm").val();
   var markerId = titleToId[markerTitle];

   // find the corresponding layer and open the marker popup on the map
   var layerId = idToLayer[markerId];
   var layer = layers._layers[layerId];
   layer.openPopup();

   // open panel and display marker info
   updatePanel(markerId);
}

// Open/Close button (map): toggle panel & update #panelBtn
var togglePanel = function() {
  $('#panel').toggleClass('active'); 
  $("#panelBtn").text(($("#panelBtn").text() == 'Open Panel >') ? '< Close Panel' : 'Open Panel >'); 
}

// Close button (panel): close panel & update #panelBtn
var closePanel = function() {
  $('#panel').removeClass('active');
  $('#panelBtn').text('Open Panel >');
}

              
            
!
999px

Console