Leaflet dropdown menu für hiking routes

Communities Deutschland (Germany)
1

Für mein Projekt möchte ich ein dropdown menu einfügen. Ich habe es mit http://labs.easyblog.it/maps/leaflet-geojson-selector/examples/custom-item.html versucht und zu verstehen :confused: und umzuschreiben, doch das kann ich nicht.
Mit https://github.com/daiyanze/leaflet-menu hab ich nach einiger Zeit etwas hinbekommen, aber für meine Zwecke ist das nichts.

Fotomontage

Ist es überhaupt möglich, ein Icon vor die Auswahl zu platzieren? So wie unten klappt es nicht! Klar! Für eine korrekte Wahl (select) hab ich zu wenig Kenntnisse.


<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="leaflet/leaflet.css"/>
  <script src="leaflet/leaflet.js"></script>
  <script src="jquery/jquery.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  // initialize the map
  var map = L.map('map').setView([49.33, 8.12], 13);

  // load a tile layer
  L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by OSM</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

var legend = L.control({position: 'topright'});
legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = '<select><option><img src ="pwvmark/rot-weiss.png">Rot-Weiss</option><option>Rot-Gr&uuml;n</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option><option>32</option><option>33</option><option>34</option><option>35</option><option>36</option><option>37</option><option>38</option><option>39</option><option>40</option></select>';
    div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;
    return div;
};
legend.addTo(map);

$('select').change(function(){
    alert('changed');
});

  </script>
</body>
</html>

So etwas habe ich das im inet gefunden und etwas geändert. Das funktioniert so nicht und dient hier als Beispiel.

Weiß jemand wie ich Route für Route so darstellen kann, entweder immer nur eine oder immer eine dazu?

Jede Route liegt als geojson vor, ca 40 Stück. Als verküztes Beispiel:


{
"type": "FeatureCollection",
"name": "geometry_rot_weiss_406527",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 7.1943341, 49.278352499999983 ], [ 7.1949032, 49.278483 ], [ 7.19571640000001, 49.278688799999983 ], [ 7.196575, 49.278898099999985 ], [ 7.1982492, 49.2792032 ], [ 7.1992345, 49.279331199999966 ], [ 7.1999586, 49.2793995 ], [ 7.2007892, 49.2794426 ], [ 7.2016291, 49.279453299999957 ], [ 7.2026621, 49.279422199999978 ], [ 7.207377299999981, 49.2791635 ], [ 7.2088763, 49.279088600000016 ], [ 7.2115586, 49.279088600000016 ], [ 7.214777199999988, 49.279144599999981 ], [ 7.2169015, 49.2792006 ], [ 7.2170903, 49.279232599999958 ], [ 7.2174675, 49.279309699999963 ], [ 7.2176461, 49.279352799999984 ], [ 7.2180444, 49.279477499999977 ], [ 7.2186935, 49.279696199999961 ], [ 7.219234, 49.2800453 ], [ 7.220630799999984, 49.280988600000022 ], [ 7.2214636, 49.2815153 ], [ 7.222147499999982, 49.281971099999943 ] ], [ [ 7.3299454, 49.388099199999985 ], [ 7.3310872, 49.388078499999963 ], [ 7.3312797, 49.3880709 ], [ 7.3314989, 49.3879618 ], [ 7.3320047, 49.387993 ], [ 7.332643299999987, 49.3880422 ], [ 7.332673, 49.388028599999963 ], [ 7.3327085, 49.3880124 ], [ 7.3327844, 49.387662199999959 ], [ 7.332803099999989, 49.387455899999956 ], [ 7.332805, 49.387407799999963 ] ] ] } }
]
}
2

Hi,

Geh ich recht in der Annahme das du die einzelnen Layer auch auswählen willst?

Also mit dem normalen Layer selector könntest du mit addOverlay arbeiten.
addOverlay( layer, name) wobei name natürlich auch HTML Code sein kann. Das Resultat wäre dann ein Menüeintrag mit einer checkbox vorne und danach deinem HTML Code (Bild, Text etc.).



var layerControl=L.control.layers(baseLayers,overlays).addTo(mymap);

var newLayer=new L.GeoJSON.AJAX(...);
layerControl.addOverlay(newLayer,"<img src='[Yourimage]'  ...> Your Text");

baseLayers und overlays sind schon vorher definierte fixe Layer die auf jeden Fall im Menü sein sollen

LG Tom

3

Hallo Tom,

danke für deinen Beitrag.

Ja das würde gehen, jedoch möchte ich eine zweite Karte nur für die hiking routes ohne layerControl bereit stellen. Das Karte in Graustufen gefällt mir gut. Die erste Karte hat schon ein layerControl mit mehreren Themen, das Control würde allerdings so lang werden, dass ich mir es so ausgedacht habe.

Ich habe wohl die Zutaten, kann aber den Kuchen nicht backen.

Edit:

Du hast mich auf eine Idee gebracht. Ich werde etwas versuchen…

4

Das Layercontrol Menu kannst du mit folgendem CSS Override begrenzen:


<style>		
		.leaflet-control-layers-expanded {
			max-height: 500px;/*less than map height! */
			min-width: 150px;
			overflow: auto;
		}	
	</style>

Wegen dem Dropdown kömma uns gerne mal ausserhalb vom Forum zusammensprechen. Das bekommt man schon hin.
Schreib mir einfach ne PN in OSM

Und hats funktioniert?

LG Tom

5

Hey Tom,

ich werde mich gerne melden.