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);
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 attempting to use leaflet layers on a project using a mapbox GL JS map. Mapbox offers two different ways to instantiate a map, and all the leaflet examples are using the 'classic' Mapbox API. I've build a whole experience using the GL JS way (seemed to have more robust features and documentation):
map = new mapboxgl.Map({
container: 'map', // container id
style: videoStyle,
center: [-73.945360, 40.717533], // starting position
bearing: 90,
zoom: mapInitZoom // starting zoom
});
However, now that I need to use leaflet in order to get the distance from the center point, all of the leaflet documentation instantiates maps like this:
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
Is there a way I can continue my project using the Mapbox GL JS API and leaflet combined? Can anyone direct me to an examples or parts of the API documentation where I can read about this?
Oh, and the reason I think I need leaflet is because I need to add image layers to my map like this reference diagram image:
You can add image to a mapbox-gl-js map. Here is an example on how to do this: https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/
As you can see in the example, you need to add an ImageSource:
map.addSource('overlay', {
type: 'image',
url: 'https://www.mapbox.com/images/foo.png',
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
and then a Raster Layer based on this source:
map.addLayer({
'id': 'overlay',
'source': 'overlay',
'type': 'raster',
'paint': {'raster-opacity': 0.85}
});
Generally speaking Leaflet.js / mapbox.js is best suited for raster tile sets, while mapbox-gl-js is for vector tile sets.
If you want to use Leaflet with a vector tile set, you can have a look at some of the Leaflet plugins that support vector tile sets: https://github.com/mapbox/awesome-vector-tiles#clients
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.
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.
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