Develop Reference

The map keeps repeating - leaflet

I'm working on a custom interactive map but I'm running into the issue of my map repeats on the x & z.
I've added the noWarp: true but that is not making a difference.
const mymap = L.map('map', {
crs: L.CRS.Simple,
noWarp: true,
minZoom: 1,
maxZoom: 6,
zoom: 1,
center: [465, 465],
});
L.tileLayer("https://", {
}).addTo(mymap);

How to use GoogleMaps InfoWindow() on a google.maps.Circle?

The InfoWindow is not displayed if I use it in a loop.
Here is an example of how to use it with Marker:
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/infowindow-simple
I made similar but with Circle, code below, as you can see, console.log is working, but the Infowindow isn't.
What am I missing?
function initMap() {
// Map settings, location : Barcelona, Spain
let map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.37, lng: 2.17},
zoom: 15,
mapTypeId: 'roadmap',
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true
});
// Circle distribution data : location, radius, data
let distribution = {
target_garden: {
center: {lat: 41.371400, lng: 2.171942},
population: 1,
data: `<div>Text 01</div>`
},
target_wtc: {
center: {lat: 41.373477, lng: 2.177650},
population: 2,
data: `<div>Text 02</div>`
}
};
// Display 2 red circles on map
let target;
for (target in distribution) {
let circle = new google.maps.Circle({
// colors
strokeColor: '#000',
strokeOpacity: .2,
strokeWeight: 3,
fillColor: '#f00',
fillOpacity: 0.5,
// position
map: map,
center: distribution[target].center,
radius: Math.sqrt(distribution[target].population) * 100,
// settings
draggable: false,
editable: false,
clickable: true
});
let infowindow = new google.maps.InfoWindow({
content: distribution[target].data
});
// Event : on click a circle open infowindow
circle.addListener('click', function () {
infowindow.open(map, circle);
console.log('on');
});
}
}
I expect a click on the red circle to open an InfoWindow.

The problem isn't the loop, it's that you're trying to anchor the InfoWindow to a Circle. This is from the Maps API documentation:
open([map, anchor])
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the
core API, the only anchor is the Marker class. However, an anchor can
be any MVCObject that exposes a LatLng position property and
optionally a Point anchorPoint property for calculating the
pixelOffset (see InfoWindowOptions).
So, you could extend Circle somehow to make sure it has a position property, or you can set the position of InfoWindow explicitly (and not use anchor):
circle.addListener('click', function () {
infowindow.setPosition(circle.center)
infowindow.open(map);
});

How to define locate control in Leaflet and Angular 2

I would like to define a locate control in my Leaflet Angular 2 project.
For now I have this code
ngOnInit() {
let map = L.map("map", {
center: [48.13, 11.57],
zoom: 13,
zoomControl: true,
maxZoom: 30,
minZoom: 8,
}).addLayer(this.googleStreets);
map.invalidateSize();
map.locate({setView: true, maxZoom: 16, watch: true});
L.control.scale().addTo(map);
function onLocationFound(e) {
var radius = e.accuracy/2;
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
}
The map searches location automatically and shows where user is.
I would like to add GPS icon thing to my map, like on the picture.
How could I implement this in Angular 2?

You can just use the location that you got from the locationFound() function and add a new marker with that latlngs.

Google Map- How to display only one country in google map

I have requirement to display only one country in google map either i can pass the country code and country should appear on the google map if you have any solution please revert below find the code which i was trying to do same?
I have highlighted this part using a below code
I saw many solution but they did it by hiding google properties and set image for the particular country but i want to show the labels as well
map_options = {
center: new google.maps.LatLng(21.098116, 96.033701),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControl: false,
streetViewControl: false,
minZoom: 6, maxZoom: 15,
zoomControl: true,
//0.2
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
var world_geometry = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
where: "ISO_2DIGIT IN ('MM')"
},
styles: [
{
polygonOptions: {
// fillColor: "#87ceeb",
strokeColor: "#rrggbb",
strokeWeight: "int"
},
polylineOptions: {
strokeColor: "#rrggbb",
strokeWeight: "int" }
},
],
map: google_map,
suppressInfoWindows: true
});[![enter image description here][1]][1]
I want to show only Myanmar country in the google map but the output display other countries as well if you have solution please revert thanks in advance.

Angular leaflet directive zoom to marker on the center of the map

Dear fellow programmers,
I try to create a map with leaflet directive. You can see the fiddle here.
fiddle
In the fiddle above, when i drag the map, the marker will always be in the center. But when i zoom in/out (using the scroll), the map is zooming to the area of my mouse, thus changing the coordinate of my marker.
What should i do to make the map zoom to my marker in the center of the map (and not changing the marker coordinate) when I zoom in/out?
Any help is appreciated :)
This is the js code:
var app = angular.module('demoapp', ['leaflet-directive']);
app.controller('DemoController', ['$scope', 'leafletData', function($scope, leafletData) {
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 5
},
markers: {
marker: {
lat: 51.505,
lng: -0.09,
draggable: false
}
},
defaults: {
zoomControl: false
}
})
$scope.$on('leafletDirectiveMap.move', function(event, args) {
var map = args.leafletEvent.target;
var center = map.getCenter();
// Update the marker.
$scope.markers = {
marker: {
draggable: false,
lat: center.lat,
lng: center.lng,
draggable: false
}
};
});
}]);

You can try this as a start fiddle:
var app = angular.module('demoapp', ['leaflet-directive']);
app.controller('DemoController', ['$scope', '$timeout', 'leafletData', function($scope, $timeout, leafletData) {
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 5
},
markers: {
marker: {
lat: 51.505,
lng: -0.09,
draggable: false
}
},
defaults: {
dragging: false,
scrollWheelZoom: false
}
});
}]);
And in your html be sure to pass the defaults:
<body ng-controller="DemoController">
<leaflet defaults="defaults" center="center" markers="markers" defaults="defaults"></leaflet>
</body>
Now users can not zoom and drag with the mouse, only using the zoom controls which makes the map stay centered.
In the leaflet docs here they say, you can set scrollWheelZoom to 'center', that would always zoom to the current center of the map (that should be what you want), but i could not get this to work on plunkr. Not sure why, maybe angular-leaflet is not supporting this feature?!