CODEWITHSUNDEEP
drop-down-menuopenlayers-3
FatAl
FatAl

Reputation: 899

Dropdown menu with OpenLayers 3

I am using openlayers 3. From the values contained in a vector GeoJSON, I want to fill a dropdown menu. When selecting a value from the dropdown menu, I want to zoom in on the entity.

My problem now is that I want to generate my HTML from the attributes of my GeoJSON. So I tried this simple code but it doesn't work :

var menu = document.getElementById('menuDropDown');
vector2.getSource().forEachFeature(function() {
    menu.innerHTML = feature.get('NOM').join(', ');
  });

EDIT: I'm able to populate a dropdown menu from a list:

var list = ['a','b','c'];
var mySelect = $('#mySelect');
    $.each(list, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });

What i want to do it's to populate this list from the attribute of my vector So i try this:

// vector2 it's a GeoJSON who is integrate on my map
vector2.getSource().getFeatures().forEachFeature(function(feature) {
    list.push(feature.get('NOM'));
});

Upvotes: 1

Views: 1692

Answers (2)

FatAl
FatAl

Reputation: 899

I have resolve my problem:

vector2.getSource().on('change', function(evt){
      var source = evt.target;
      var list = [];
        source.forEachFeature(function(feature) {
            list.push(feature.get('NOM')); 
            });
        // console.log("Ecrit moi les noms : " + list);

Thanks you to those who took the time to respond

Upvotes: 0

Jimmie Tyrrell
Jimmie Tyrrell

Reputation: 1658

Firstly I'm assuming you have to pass some parameter to your callback:

vector2.getSource().forEachFeature(function(feature) {

Then you can append an item to a dropdown like 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);
});

Upvotes: 1

Related Questions