javascript - interact with geojson layers independently in google maps api v3 -
javascript - interact with geojson layers independently in google maps api v3 -
i load 2 geojson layers map , able style them independently different rules. can display both geojson files below code, since both part of same map.data object have been able apply universal styling both. there way around this? ultimately(longer term goal) able toggle different layers on , off checkbox (i focusing on independent styling first not overcomplicate 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 much appreciated. saw threads looked applicable (such google maps geojson- toggle marker layers?) wasn't sure how apply purposes.
so had similar , needed add together 2 geojson files , style them differently. want initialize map , add together 2 different layers. set styling both. below code notes. used function angular in service , returned promise.
set map options
var mapoptions = { zoom: 4, scrollwheel: false, center: new google.maps.latlng(40.00, -98), maptypeid: google.maps.maptypeid.roadmap };
set map variable.
var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);
initialize 2 variable take layers. did state , county.
var countylayer = new google.maps.data(); var statelayer = new google.maps.data();
then load geojson files each layer.
countylayer.loadgeojson('counties.json'); statelayer.loadgeojson('states.json');
after set style each layer.
statelayer.setstyle({ strokecolor: 'red', strokeweight: 5 }); countylayer.setstyle({ strokecolor: 'black', strokeweight: 1 });
the lastly step set layer map.
countylayer.setmap(map); statelayer.setmap(map);
after returned promise homecoming map object. create sense / help reply question?
also, within each layer setstyle() function can add together dynamic styling through functions. add together function fillcolor alter color based on info in geojson file.
javascript json google-maps google-maps-api-3 geojson
Comments
Post a Comment