i using openlayers 3. values contained in vector geojson, want fill dropdown menu. when selecting value dropdown menu, want zoom in on entity.
my problem want generate html attributes of geojson. tried simple code doesn't work :
var menu = document.getelementbyid('menudropdown'); vector2.getsource().foreachfeature(function() { menu.innerhtml = feature.get('nom').join(', '); });
edit: i'm able populate dropdown menu list:
var list = ['a','b','c']; var myselect = $('#myselect'); $.each(list, function(val, text) { myselect.append( $('<option></option>').val(val).html(text) ); });
what want it's populate list attribute of vector try this:
// vector2 it's geojson integrate on map vector2.getsource().getfeatures().foreachfeature(function(feature) { list.push(feature.get('nom')); });
firstly i'm assuming have pass parameter callback:
vector2.getsource().foreachfeature(function(feature) {
then can append item dropdown so:
var item = document.createelement('option'); item.setattribute('value', feature.get('nom')); var textnode = document.createtextnode(feature.get('nom')); item.appendchild(textnode) menu.appendchild(item);
all together:
var menu = document.getelementbyid('menudropdown'); vector2.getsource().foreachfeature(function(feature) { var item = document.createelement('option'); item.setattribute('value', feature.get('nom')); var textnode = document.createtextnode(feature.get('nom')); item.appendchild(textnode) menu.appendchild(item); });