API Leaflet. Меню

246
20 июня 2018, 08:20

Как сделать такое меню. Никак не получаеться, возможно что-то упускаю.

var cities = L.layerGroup(); 
 
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities), 
  L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities), 
  L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities), 
  L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities); 
 
 
var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + 
  '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
  'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', 
  mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; 
 
var grayscale = L.tileLayer(mbUrl, { 
    id: 'mapbox.light', 
    attribution: mbAttr 
  }), 
  streets = L.tileLayer(mbUrl, { 
    id: 'mapbox.streets', 
    attribution: mbAttr 
  }); 
 
var map = L.map('map', { 
  center: [39.73, -104.99], 
  zoom: 10, 
  layers: [grayscale, cities] 
}); 
 
var baseLayers = { 
  "Grayscale": grayscale, 
  "Streets": streets 
}; 
 
var overlays = { 
  "Cities": cities 
}; 
 
L.control.layers(baseLayers, overlays).addTo(map); 
 
//Create Menu 
var drawControl = global.drawControl = new L.Control.Draw({ 
  edit: { 
    featureGroup: drawnItems, 
    edit: { 
      selectedPathOptions: { 
        maintainColor: true, 
        moveMarkers: true 
      } 
    } 
  } 
}); 
map.addControl(drawControl); 
 
map.on('draw:created', function(e) { 
  var type = e.layerType, 
    layer = e.layer; 
 
  if (type === 'marker') { 
    layer.bindPopup('A popup!'); 
  } 
 
  drawnItems.addLayer(layer); 
}); 
 
var toolbar = global.toolbar = (function() { 
  for (var type in drawControl._toolbars) { 
    if (drawControl._toolbars[type] instanceof L.EditToolbar) { 
      return drawControl._toolbars[type]; 
    } 
  } 
})(); 
 
toolbar._modes.edit.handler.enable(); 
 
L.DomEvent.on(document.querySelector('.centroids'), 'change', function(e) { 
  setTimeout(function() { 
    //if (e.target.checked) { 
    L.EditToolbar.Edit.MOVE_MARKERS = e.target.checked; 
    toolbar._modes.edit.handler.disable(); 
    toolbar._modes.edit.handler.enable(); 
    //} 
  }, 50); 
});
html, 
body { 
  height: 100%; 
} 
 
#map { 
  height: 100%; 
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <title>A Leaflet map!</title> 
 
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" /> 
 
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> 
 
</head> 
 
<body> 
  <div id="map"></div> 
</body> 
 
</html>

READ ALSO
Использование переменной в методе equals в лямбда-выражении
Java

Использование переменной в методе equals в лямбда-выражении

Можно ли как-то реализовать сравнение строк в лямбда-выражении при условии, что одна из строк - это переменная? Хочу сделать DAO интерфейс с методом...

 239
Субтитры в javaFX приложении
Java

Субтитры в javaFX приложении

 267
Когда нужно делать clean package Мавеном
Java

Когда нужно делать clean package Мавеном

У меня есть непонимание после каких изменений нужно делать clean-packageУ меня довольно большой проект и тратить по 10-15 минут на clean-package каждый...

 235
Как отправить POST запрос в Input у которой нет Name
Java

Как отправить POST запрос в Input у которой нет Name

Есть такой Input строка:

 278