22

I would like to load two geojson layers to my map and be able to style them independently with different rules. I can display both my geojson files with the below code, but since they are both part of the same map.data object I have only been able to apply universal styling to both. Is there any way around this? Ultimately(longer term goal) I would also like to be able to toggle the different layers on and off with a checkbox as well (I am focusing on independent styling first so as not to overcomplicate the problem)

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
  zoom: 12,
  center: {lat: 39.218509,  lng: -94.563703}
});

map.data.loadGeoJson('https://url1');
map.data.loadGeoJson('https://url2');

map.data.setStyle(function(feature) { //styling rules here}

google.maps.event.addDomListener(window, 'load', initialize);

any help would be very much appreciated. I saw some threads that looked applicable (such as Google maps GeoJSON- toggle marker layers?) but I wasn't sure how to apply it specifically for my purposes.

Community
  • 1
  • 1
user3750486
  • 225
  • 2
  • 8

1 Answers1

62

So I just had to do something similar and needed to add 2 geojson files and style them differently. What you want to do is initialize the map and then add 2 different layers. Basically set the styling for both. Below is my code with notes. I actually used this function Angular in a service and returned a promise.

Set up your map options

var mapOptions = {
            zoom: 4,
            scrollwheel: false,
            center: new google.maps.LatLng(40.00, -98),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

Set your map to a variable.

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

Initialize 2 variable that will take layers. I did state and county.

var countyLayer = new google.maps.Data();
var stateLayer = new google.maps.Data();

Then load the GeoJson files for each layer.

countyLayer.loadGeoJson('counties.json');
stateLayer.loadGeoJson('states.json');

After that set the style for each layer.

stateLayer.setStyle({
  strokeColor: 'red',
  strokeWeight: 5
 });

countyLayer.setStyle({
  strokeColor: 'black',
  strokeWeight: 1
});

The last step is to set the layer to the map.

countyLayer.setMap(map);
stateLayer.setMap(map);

After this I returned a promise but you could just return the map object. Does this make sense / help answer your question?

Also, within each layer setStyle() function you can add dynamic styling through functions. Like add a function to fillColor that would change the color based on data in the GeoJson file.

Daniel Margol
  • 691
  • 6
  • 6