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.
Related
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);
Using OL 6.5.0, the following snippet produces a map where the feature goes outside of the bounds of the map, rather than being completely contained (with a 20px margin) within the bounds of the map.
const extent = layer.getSource().getExtent();
view.fit(extent, {
size: map.getSize(),
padding: [20, 20, 20, 20],
});
I tried setting nearest to true / false but the result is the same.
Result (ignore the fuzz):
I expect the entire feature to be within the border of the map, but it is not. Am I missing something?
Expected (or close to it -- again, ignore the fuzz):
Here's how I'm instantiating the map:
const map = this.map = maps[mapTargetId] = new ol.Map({
target: mapTargetId,
overlays: [overlay],
layers: await this.getBaseLayers(),
view: new ol.View({
projection,
center: [0, 0],
zoomFactor: 2,
zoom: defaultZoom,
minZoom: 1,
maxZoom: 12,
})
});
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);
});
I created a crs leaflet map and I'm trying to set its maxbounds to the bounds of the crs image.
When I add the maxbounds attr there are three leaflet events that keep firing infinitely which cause the map to move infinitely.
These are the events:
leafletDirectiveMap.move
leafletDirectiveMap.movestart
leafletDirectiveMap.moveend
This is my code. I'm using leaflet angular directive
angular.module('pyvMap').controller('mainCtrl', [ '$scope', 'leafletData', 'leafletBoundsHelpers', function($scope, leafletData, leafletBoundsHelpers) {
var mapMinZoom = 2;
var mapMaxZoom = 6;
var maxBounds = leafletBoundsHelpers.createBoundsFromArray([[0,241.59375], [-132.65625, 0]]);
angular.extend($scope, {
defaults: {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: 'Simple',
attributionControl: false,
detectRetina: true,
tileLayer: "http://d30jy4vw1d2n56.cloudfront.net/tiles/{z}/{x}/{y}.png",
tileLayerOptions: {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
// bounds: maxBounds,
opacity: 0.9,
// reuseTiles: true,
continuousWorld: true,
noWrap: true,
tileSize:256,
crs: 'Simple',
detectRetina: true,
},
},
center: {
zoom: 2
},
maxBounds: maxBounds
});}]);
HTML:
<leaflet center="center" maxBounds="maxBounds" defaults="defaults"></leaflet>
Thanks!
Once width and height attributes are added to the <leaflet> tag as required, your issue does not look reproducible, whether using Leaflet version 0.7.7 or 1.2.0:
https://plnkr.co/edit/iqiz29Jmz2WOgaNeNZIv?p=preview
I couldn't figure out how to change/hide Street View controls in scenario where there's a map by default and you drag "little guy" to road.
This is the piece of code about my options:
function initMap() {
var mapOptions = {
center: new google.maps.LatLng( <?php echo $latitude . ',' . $longitude; ?>),
zoom: 12,
disableDefaultUI: true,
backgroundColor: 'white',
streetViewControl: true
};
// I have markers & other stuff in here, it's properly closed function!
I found reference for Street View controls only when it's Street View by default, here's a code example from Google Developers:
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
position: {lat: 42.345573, lng: -71.098326},
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: false
});
}
How to add Street View UI options if default view is map and you can drag Street View "guy" to map?
Have a look at this answer to see if it helps. I think you need to listen for the streetview becoming visible and then hide the controls using streetViewControl = false etc.
Detecting Google Maps streetview mode