Question: How can I alter GeoJson data before it is placed on the map?

[P Jakobsen]

I'd like to add some info windows to incoming geojson data before it's placed on the map.

 var path = '/earthquakes/feed/v1.0/summary/all_day.geojson';
$.getJSON(domain + path, function (data) {
      // Do something here to each element, or to some elements
     map.addGeoJson(data);
});

[Yagor]

Hey @pjakobsen,
since these are Features not Markers, to display an info window you have to attach an event listener to the data object.
Here it is an example:

var map = new mapTools({
    id: 'mymap',
    lat: 35,
    lng: -105,
    zoom: 4
  }, function (err, map) {  
   var infoWindow = new google.maps.InfoWindow({content: ''});  
    if (!err) {
      var domain = 'http://earthquake.usgs.gov';
      var path = '/earthquakes/feed/v1.0/summary/all_day.geojson';
    $.getJSON(domain + path, function (data) {               
        map.addGeoJson(data);      
        map.instance.data.addListener('click', function(event) {          
          var feature = event.feature;      
          var content = '<div>' + feature.data.type + ' Magnitude: ' +feature.data.mag +'</div>';    
          infoWindow.setContent(content);         
          var anchor = new google.maps.MVCObject();
                  anchor.set("position",event.latLng);
                  infoWindow.open(map.instance,anchor);          
        });                
      });    
    }
  });

Note: Please use the latest map-tools 2.0.1, I found a problem when testing this.

[Yagor]

I could provide a helper similar to what I have for Markers. Do you have any suggestions on how the API should look like for Features @hergert ?

This is my proposal:

map.addGeoJson(data, {
infoWindow: {
    open: {on: 'click'},
    close: {on: 'mouseout', duration: 2000},
    content: '<p>{type} Magnitude: {mag}</p>'
  }
})

[P Jakobsen]

@yagoferrer I wonder what the best way is to manipulate the position of the InfoWindow, given that the CSS is not accessible by class.

This seems like a bit of hack for moving the window up above the marker so it doesn't cover it:

      var anchor = new google.maps.MVCObject();
      newLatLng = new google.maps.LatLng(event.latLng.lat()+0.003,event.latLng.lng());
      anchor.set("position",newLatLng);
      infoWindow.open(map.instance,anchor);

Any suggestions?

[P Jakobsen]

@yagoferrer Forgot to mention that your proposal above makes perfect sense. I'm sure you are busy, so I'll try to implement it in my fork for your review. :)

[Yagor]

@pjakobsen that would be awesome. There is already an implementation for infoWindow:
https://github.com/yagoferrer/map-tools/blob/master/lib/infoWindow.ts
Basically this file needs to be updated so that allows you to attach events to Markers or to map.instance.data directly. Let me know if I can help with that.

[Yagor]

event.latLng.lat()+0.003

You could manipulate the infoWindow CSS wrapper container: the div found two levels above the

.gm-style-iw

using: .parent().parent()

This is another great topic. We could add setting that helps you style the infoWindow