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 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ü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 ] ] ] } }
]
}