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.
Related
I've searched through the Google Maps JavaScript API documentation and I can't seem to find the appropriate options to make my map's labels and location markers look like this:
Rather than this:
I realize the differences are subtle but it's what my client wants.
Using the Google Maps Styling Wizard, the styles on the top image appear to be produced by the Standard map with no styling at all (the JSON produced is just an empty array).
The closest I can get is the bottom image, using the following (which is not much more than just the default options):
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 26.769528, lng: -82.265607},
zoom: 15,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'terrain'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
fullscreenControl: false,
streetViewControl: false
});
Any guidance would be greatly appreciated.
#xomena was correct - the tile style has changed in the release and experimental version. Had to use the previous version of 3.31 to match the look.
I'm trying to put multiple leaflet maps on one page, but I have problem with two of them - the second one rewrites the first one, so first one is rendering map, and the second has just grey area.
Here is the code:
var map_a = new L.Map( "smallMap", {
fullscreenControl: false,
layers: [osmMap]
}).setView([51.005, -0.09], 14);
var map_b = new L.Map( "smallMapSecond", {
fullscreenControl: false,
layers: [osmMap]
}).setView([51.505, -0.09], 14);
I have appropriate divs called smallMap and smallMapSecond. When I Initialize only one map, it works. Where could be the problem?
Well,one of the potential problems I see here without having a jsFiddle available is that you are using the same tileLayer osmMap for both maps. Sharing TileLayers between map instances is going to cause problems. Initialize tileLayers one per map.
Hi i am currently working on angular Google maps https://github.com/dylanfprice/angular-gm
i am facing difficulties in setting the bounds and map center
<gm-map gm-map-id="'infoWindows'" gm-center="options.map.center" gm-zoom="options.map.zoom" gm-bounds="bounds" gm-map-options="options.map" class="map">
<gm-markers gm-objects="clinics"
gm-get-lat-lng="{ lat: object.practice.latitude, lng: object.practice.longitude }"
gm-get-marker-options="{ title: object.practice.name }"
gm-on-click="clk = object; infoWindow.open(marker.getMap(), marker);">
</gm-markers>
</gm-map>
make sure your map is already loaded.
therefor it is highly recommended to use promises.
var gmapPromise = angulargmContainer.getMapPromise('<mapId>');
gmapPromise.then(function(gmap) {
$scope.myGoogleMap = gmap;
});
In your case would be 'infoWindows'.
as there is to less context in your question, i can't really give you an answer what is wrong with your particular code but i'll give you some snippet which is always useful:
$scope.updateGoogleMap = function(map, options) {
// triggers a resize of the map and sets the correct center position
// requires a google map object and a google maps mapOptions object
$timeout(function(){
google.maps.event.trigger(map, 'resize');
map.setOptions(options);
});
};
a Google Maps mapOption object looks like this:
{
center: new google.maps.LatLng(47.123, 10.123),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
as ng-hide/show lead to some google maps resize misbehaviour, you might wanna call this when toggling views.
**by the way, if your are using the gm-map-options tag with a valid google.maps.MapOptions, you don't need the the extra 'gm-bounds', 'gm-zoom' or 'gm-center' arguments
I will use google maps for my project. As the overlay I will use a map, with streets.
The problem is, that google has placed on this overlay a lot of things that I don't need.
How company's and some way info, and at the end it is not only painted, it is click-able, so that it creates info window with details of this point and URL if exist.
This is what I do not need. How can I remove it with Google Maps API?
Are you talking about removing the labels of various objects from the map? If so, then you need to use a map styles array, and then set the visibility of the particular object to off. So for example, this:
var styleArray = [
{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
will turn business labels off so that you don't see them, nor will they be clickable any more. You would create the object as shown above, then set this object to the "styles" property of your map options object before finally giving it to your map:
myOptions = {
center: new google.maps.LatLng(38.955, -94.806),
zoom: 13,
minZoom:13,
maxZoom:23,
scaleControl:true,
styles: styleArray,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
I am using google map API in my project. My code is :
var map;
var op = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("container"), op);
My problem is that google loads a static image instead of an interactive map. I also tried
useStaticMap: false in options but after using this it loads nothing, (no map, no image).
Please tell me whats going on here?
150.644, -34.397, this coordinate doesn't exists
When you say static map does that mean that you can't zoom, pan, etc. It's been a while since I worked with Google Maps, but as I recall you can provide settings that would enable the zooming and panning. Try enabling those features as opposed to using the static map. Or conversely maybe you have disabled them.
I guess it could also be the javasscript file that you are including. Also, there are two API's and it seems like you can have two different API keys. Maybe you have the static one. So there are about three different options there. Most likely one of those is the issue because the code is very small and looks well formed to me.
API v3
https://developers.google.com/maps/documentation/javascript/tutorial
Static Maps
https://developers.google.com/maps/documentation/staticmaps/
I would try adding a control. Or maybe giving us a little more of your code.
Adding Controls to the Map
You may wish to tailor your interface by removing, adding, or modifying UI behavior or controls and ensure that future updates don't alter this behavior. If you wish to only add or modify existing behavior, you need to ensure that the control is explicitly added to your application.
Some controls appear on the map by default while others will not appear unless you specifically request them. Adding or removing controls from the map is specified in the following Map options object's fields, which you set to true to make them visible or set to false to hide them:
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}
The following example sets the map to hide the navigation (Zoom and Pan) controls and display the scale control. Note that we do not explicitly disable the default UI, so these modifications are additive to the default UI behavior.
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Here is the reference to the code.
https://developers.google.com/maps/documentation/javascript/controls