0

How can I retrieve and object on google map without user interaction. Meaning the user do not click on the object. I have 10 polygons and I want user to navigate to each of them, manipulate maybe the color. without clicking on the polygon itself.

I do have a "next" button that when user click, it suppose to navigate to the next polygon setting it active and to be filled with desire color.

The polygons are store in an array with json format.

Im using Data Layer. I am not sure how to implement this. I can click on polygon itself and change the color, but I need to traverse them without clicking.

Thanks

  • making map:

    function loadJson(url, style)
{
  var jsonfile = $.getJSON(url).done(function (data){
     map.data.addGeoJson(data);
     map.data.setStyle(style);
  });
}

  • change color 

    map.data.addListener('click', function(event) {
mapName.data.overrideStyle(event.feature, currentStyle);

    });

WORKING PROTOTYPE

geocodezip
  • 158,664
  • 13
  • 220
  • 245
LanNguyen
  • 234
  • 3
  • 15
  • What does your code look like? Can you provide a jsfiddle of what you have tried? A [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) would be best. – geocodezip Jun 26 '14 at 20:20
  • i can't post the whole code, because it is long and require lots of dependency. I have added the critical line the color the polygon. And also the link to the working version so you can view and have better understanding. What I want is to click on the arrow, and it would jump to the closest polygon. I have calculate distance and everything, i just do not know how to set focus to the polygon without clicking. – LanNguyen Jun 26 '14 at 20:57

1 Answers1

1

In a data-layer there is no way to access the shapes(e.g. polygons) that have been drawn, you only may access the features.

The problem: the features are not available as array(then it would be easy to iterate over the features or select a feature by index)

Possible solution:

  1. store the polygon-features in an array when they will be added to the layer(could be done via a addfeature-callback)
  2. calculate the bounds of the polygons:(See: How to get LatLngBounds of feature polygon geometry in google maps v3?)

  3. to implement the "next"-feature:

    • use map.data.revertStyle() to reset the style of the previous selected feature
    • select the first feature in the array and apply the desired style and call map.fitBounds() based on the calculated bounds(step2)

    • put the first feature to the end of the array 

      arrayWithFeatures.push(arrayWithFeatures.shift());

Demo: http://jsfiddle.net/doktormolle/anmfe/

Community
  • 1
  • 1
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • you are indeed correct, I was able to navigate around feature by providing it an unique id, and access them via map.data.getFeaturebyId(). But I am running into another issue. Assumedly my arrow will jump to next polygon. I click on the same polygon and try to console log to see if the 2 are the same. The feature id are indeed the same. But the geometry inside them are different. I do not understand why the same feature can have 2 polygon. var nextFeature = map.data.getFeatureById(currentIndex);. Is this line create a clone of the geometry? – LanNguyen Jun 26 '14 at 21:59
  • how exactly do you compare the geometries?(basically there is no need for it, assuming the ID's are unique it should be sufficient to compare the ID's) – Dr.Molle Jun 26 '14 at 22:07
  • The coordinate are the same, everything is the same, but I can't setOverrideStyle for the one that used next arrow. A little weird to me. – LanNguyen Jun 26 '14 at 22:08
  • map2.data.overrideStyle(event.feature, selectedPolygon); //this is the one selected by mouseclick var nextFeature = map.data.getFeatureById(currentIndex); map2.data.overrideStyle(nextFeature, selectedPolygon); // this is the one that use next arrow button. Two of them print out the same feature id, coordinate of the geometry, by click by user work, not click by arrow – LanNguyen Jun 26 '14 at 22:10
  • What is currentIndex? – Dr.Molle Jun 26 '14 at 22:13
  • it is the id of the feature – LanNguyen Jun 26 '14 at 22:14
  • when it's the id of the clicked feature shouldn't you e.g. increment it? – Dr.Molle Jun 26 '14 at 22:16
  • yes i did increment it to the next feature, but i can't change the color of the that feature. For example, if i click on polygon and click the house icon, the polygon turn blue. but if i use the arrow button to navigate, i can't change the color of that feature. – LanNguyen Jun 26 '14 at 22:18
  • It's really hard to answer with some snippets of code, can you provide a demo? – Dr.Molle Jun 26 '14 at 22:20
  • I wish I could, here is the full code of the 2 implementation. http://www.csupomona.edu/~lannguyen/img2.png – LanNguyen Jun 26 '14 at 22:27
  • looking at ur jfiddle give me an idea. let me try something out. could you explain why the map able to focus on the polygon. I only see 1 center declaration. But it was able to zoom in each letter. – LanNguyen Jun 26 '14 at 22:39
  • It calculates the bounds for the polygon (see 2. in my answer) – Dr.Molle Jun 26 '14 at 23:16
  • I ended up parsing the json to each polygon using GeoJSON library and keep them in the array for fully control over. I marked your answer as solve since data layer is out of scope for my requirement. Thanks – LanNguyen Jun 28 '14 at 15:39