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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.