Menu
I have a function where I load a geoJSON into a map, then replace it when I hit specific zoom levels. The following works when the window.map.data.setMap(null); is commented out, but only to pile on all maps as the zoom level changes. Uncommenting out the setMap(null) lines removes the map once the zoom level changes, but does not allow a new file to replace it; I'm consistently getting undefined when binding the data layer to a variable (see image at end):
if($('#map').length) {
var styledMapType = new google.maps.StyledMapType(
//this is all styling
}
], {name: 'Styled Map'});
var toronto = {lat: 43.687508, lng: -79.304293};
if ($('#map').length) {
window.map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: toronto,
disableDefaultUI: false,
scrollwheel: false,
streetViewControl: false,
fullscreenControl: false,
mapTypeControl: false,
zoomControl: true,
});
zoom: 16,
center: listing_address,
disableDefaultUI: false,
scrollwheel: false,
streetViewControl: false,
fullscreenControl: false,
mapTypeControl: false,
});
.var county = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "AREA_NAME": "Toronto Region", "Name": "", "Description": "" }, "geometry": { "type": "Polygon", "coordinates": [ [
[ -79.331290752373903, 43.6257878530946 ],
[ -79.331317617252296, 43.6256985447421 ],
[ -79.331512561913399, 43.625640321883701 ],
[ -79.331752709965201, 43.625618170498399 ],
[ -79.331959376709506, 43.625519457784897 ],
[ -79.332109811020601, 43.625312645786401 ],
[ -79.333209007789605, 43.644149630451302 ],
[ -79.333365435394498, 43.644032839820198 ],
[ -79.431165436417103, 43.630306805590003 ],
[ -79.431488362803094, 43.630361005759099 ],
[ -79.431821347539696, 43.630419711640798 ],
[ -79.432139201596499, 43.630500911132103 ],
[ -79.432442343991099, 43.630573099758003 ],
[ -79.475947295799898, 43.623398134852998 ],
[ -79.280866209706105, 43.671017401276799 ],
[ -79.307699740463903, 43.656122040811901 ],
[ -79.307771442967393, 43.655987140776503 ],
[ -79.331356425413802, 43.625806618446397 ],
[ -79.331290752373903, 43.6257878530946 ] ] ] } }
]
}
var district = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "AREA_ID": "108", "CITY_NAME": "", "CITY_NAME": "", "AREA_NAME": "Briar Hill-Belgravia" }, "geometry": { "type": "Polygon", "coordinates": [ [
[ -79.464620647999908, 43.692155605999957 ],
[ -79.46522206099992, 43.693230269999958 ],
[ -79.465251297999913, 43.693298486999957 ],
[ -79.465279791999919, 43.693366811999958 ],
[ -79.46530741699992, 43.693435416999954 ],
[ -79.465719907999926, 43.694757514999957 ],
[ -79.44101562199991, 43.705410816999958 ],
[ -79.440110285999921, 43.705585372999955 ],
[ -79.447685296999921, 43.696258794999956 ],
[ -79.449336555999921, 43.695897948999956 ],
[ -79.450278980999911, 43.695691998999955 ],
[ -79.451201995999909, 43.695476191999958 ],
[ -79.462902461999917, 43.69287652099996 ],
[ -79.463998089999919, 43.692404465999957 ],
[ -79.464620647999908, 43.692155605999957 ] ] ] } }
]
}
var cities ={
"type":"FeatureCollection", "features": [
{"type":"Feature","properties":
{"AREA_ID":49884,"AREA_NAME":"YORK","OBJECTID":11093905},"geometry":{"type":"Polygon","coordinates":[[[-79.49262446,43.64744493],
[-79.49249144,43.64772528],
[-79.49149894,43.65163426],
[-79.50094749,43.65228262],
[-79.503085,43.66113086],
[-79.5123581,43.67258877],
[-79.5126394,43.68922995],
[-79.50556991,43.70925399],
[-79.42776901,43.70053559],
[-79.42848543,43.68173363],
[-79.42909608,43.68160367],
[-79.48394351,43.66992188],
[-79.48405475,43.66989696],
[-79.48367372999999,43.66897745],
[-79.49262446,43.64744493]]]}},
]
}
window.map.mapTypes.set('styled_map', styledMapType);
window.map.setMapTypeId('styled_map');
// issue in question below:
if ($('#map').length) {
window.map.data.loadGeoJson( cities );
window.map.addListener('zoom_changed', function() {
var zoomLevel = map.getZoom();
if (zoomLevel <= 12 && zoomLevel >= 9) {
window.map.data.addGeoJson( cities );
} else if (zoomLevel < 9) {
window.map.data.addGeoJson( county );
} else if (zoomLevel > 12) {
window.map.data.addGeoJson( district );
};
})
window.map.data.setStyle({
fillOpacity: 0.2,
strokeWeight: 1,
strokeColor: '#1e1d1d',
fillColor: '#1e1d1d'
});
window.map.data.addListener('mouseover', function(event) {
window.map.data.overrideStyle(event.feature, {
strokeColor: '#0076c0',
fillColor: '#0076c0',
strokeWeight: 2.5,
});
});
window.map.data.addListener('mouseout', function(event) {
window.map.data.revertStyle();
});
window.map.data.addListener('click', function(event) {
window.map.data.overrideStyle(event.feature, {
strokeColor: '#0076c0',
fillColor: '#0076c0',
fillOpacity: 0.2
});
});
};
};
});
I tried the following already as per How to remove data from gmap? . Adding those variables wither above the first line of my code, or as the first section of the function before the if statement gave me unexpected identifier problems (I removed the actual code, this was my reference):
// load data - do the same for data2, data3 or whatever
data1 = new google.maps.Data();
data1.loadGeoJson(url1);
// create some layer control logic for turning on data1
data1.setMap(map) // or restyle or whatever
// turn off data1 and turn on data2
data1.setMap(null) // hides it
data2.setMap(map) // displays data2
And this is the result I'm currently getting when I set breakpoints:
What is the linkage I'm missing? The docs (https://developers.google.com/maps/documentation/javascript/reference/3.exp/#Data) suggest that loadGeoJSON and zoomchange aren't compatible methods, which seems really unlikely.
519
There are a several reasons why your google maps may not be working, the most common issue being no Google Map API key set or set incorrectly. To use the Google Maps JavaScript API, you must register your app project on the Google Cloud Platform Console and get a Google API key which you can add to your app.
Go to APIs & Services → Dashboard → Enable APIs & Services at the top and Choose Maps JavaScrip API from the API Library. This will open up the Map JavaScript API page, and Enable it.
With the Data layer, you can add GeoJSON data to a Google map in just one line of code. map. data. loadGeoJson('google.
A map layer is a GIS database containing groups of point, line, or area (polygon) features representing a particular class or type of real-world entities such as customers, streets, or postal codes. Layers can also be of raster images such as those taken by satellites.
Seems to me what you want to do is create a DataLayer for each of the data sets. Then manage those based on the zoom level. Create them when they are first visible, set their map property to null when they are hidden, to your map variable when you want them visible.
var districtLayer, cityLayer, countyLayer;
window.map.addListener('zoom_changed', function() {
var zoomLevel = map.getZoom();
if (zoomLevel < 12 && zoomLevel > 9) {
// city level, hide district and county layers
if (districtLayer && districtLayer.setMap)
districtLayer.setMap(null);
if (countyLayer && countyLayer.setMap)
countyLayer.setMap(null);
if (countyLayer && countyLayer.setMap)
countyLayer.setMap(null);
if (!cityLayer) {
cityLayer = new google.maps.Data();
cityLayer.addGeoJson(cities);
}
cityLayer.setMap(map);
} else if (zoomLevel <= 9) {
// county level, hide city and county layers
if (cityLayer && cityLayer.setMap)
cityLayer.setMap(null);
if (districtLayer && districtLayer.setMap)
districtLayer.setMap(null);
if (!countyLayer) {
countyLayer = new google.maps.Data();
countyLayer.addGeoJson(county);
}
countyLayer.setMap(map);
} else if (zoomLevel >= 12) {
// city level, hide district and county layers
if (cityLayer && cityLayer.setMap)
cityLayer.setMap(null);
if (countyLayer && countyLayer.setMap)
countyLayer.setMap(null);
if (!districtLayer) {
districtLayer = new google.maps.Data();
districtLayer.addGeoJson(district);
}
districtLayer.setMap(map);
}
});
proof of concept fiddle
code snippet:
function initialize() {
var districtLayer, cityLayer, countyLayer;
if ($('#map').length) {
var toronto = {
lat: 43.689577,
lng: -79.453715
};
window.map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: toronto,
disableDefaultUI: false,
scrollwheel: false,
streetViewControl: false,
fullscreenControl: false,
mapTypeControl: false,
});
window.map.addListener('zoom_changed', function() {
var zoomLevel = map.getZoom();
if (districtLayer && districtLayer.setMap)
districtLayer.setMap(null);
if (countyLayer && countyLayer.setMap)
countyLayer.setMap(null);
document.getElementById('zoom').innerHTML = zoomLevel;
if (zoomLevel < 12 && zoomLevel > 9) {
document.getElementById('zoom').innerHTML += ":city";
if (countyLayer && countyLayer.setMap)
countyLayer.setMap(null);
if (!cityLayer) {
cityLayer = new google.maps.Data();
cityLayer.addGeoJson(cities);
}
cityLayer.setMap(map);
} else if (zoomLevel <= 9) {
document.getElementById('zoom').innerHTML += ":county";
if (cityLayer && cityLayer.setMap)
cityLayer.setMap(null);
if (districtLayer && districtLayer.setMap)
districtLayer.setMap(null);
if (!countyLayer) {
countyLayer = new google.maps.Data();
countyLayer.addGeoJson(county);
}
countyLayer.setMap(map);
} else if (zoomLevel >= 12) {
document.getElementById('zoom').innerHTML += ":district";
if (cityLayer && cityLayer.setMap)
cityLayer.setMap(null);
if (countyLayer && countyLayer.setMap)
countyLayer.setMap(null);
if (!districtLayer) {
districtLayer = new google.maps.Data();
districtLayer.addGeoJson(district);
}
districtLayer.setMap(map);
}
});
google.maps.event.trigger(map, 'zoom_changed');
}
}
google.maps.event.addDomListener(window, "load", initialize);
var county = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"AREA_NAME": "Toronto Region",
"Name": "",
"Description": ""
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-79.486178, 43.59873],
[-79.514712, 43.719608],
[-79.260958, 43.755659],
[-79.230746, 43.634522],
[-79.486178, 43.59873]
]
]
}
}]
};
var district = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"AREA_ID": "108",
"CITY_NAME": "",
"CITY_NAME": "",
"AREA_NAME": "Briar Hill-Belgravia"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-79.464620647999908, 43.692155605999957],
[-79.46522206099992, 43.693230269999958],
[-79.465251297999913, 43.693298486999957],
[-79.465279791999919, 43.693366811999958],
[-79.46530741699992, 43.693435416999954],
[-79.465719907999926, 43.694757514999957],
[-79.44101562199991, 43.705410816999958],
[-79.440110285999921, 43.705585372999955],
[-79.447685296999921, 43.696258794999956],
[-79.449336555999921, 43.695897948999956],
[-79.450278980999911, 43.695691998999955],
[-79.451201995999909, 43.695476191999958],
[-79.462902461999917, 43.69287652099996],
[-79.463998089999919, 43.692404465999957],
[-79.464620647999908, 43.692155605999957]
]
]
}
}]
}
var cities = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties":
{
"AREA_ID": 49884,
"AREA_NAME": "YORK",
"OBJECTID": 11093905
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-79.49262446, 43.64744493],
[-79.49249144, 43.64772528],
[-79.49149894, 43.65163426],
[-79.50094749, 43.65228262],
[-79.503085, 43.66113086],
[-79.5123581, 43.67258877],
[-79.5126394, 43.68922995],
[-79.50556991, 43.70925399],
[-79.42776901, 43.70053559],
[-79.42848543, 43.68173363],
[-79.42909608, 43.68160367],
[-79.48394351, 43.66992188],
[-79.48405475, 43.66989696],
[-79.48367372999999, 43.66897745],
[-79.49262446, 43.64744493]
]
]
}
}, ]
};html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="zoom"></div>
<div id="map"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
