I have made a map with a custom marker, following this Mapbox tutorial. https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/
Somewhere in this code, I should be able to adjust the offset of the marker, because the marker simply isn't placed on the coordinates.
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [31.442553,31.656087]
},
properties: {
title: 'Diametta, Egypt',
description: 'Horus Academy'
}
}]
};
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/torkjellt/ckdpx4l7r0n5c1inwgw0pl1pq',
location
center: ([30.71, 30.41]), // starting position [lng, lat]
zoom: 5 // starting zoom
});
geojson.features.forEach(function(marker) {
var el = document.createElement('div');
el.className = 'marker';
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 5 }) // add popups
.setHTML('<strong>My spot</strong><br>Egypt'))
.addTo(map);
});
Any ideas on where to adjust the offset?
The value offset should be a PointLike, so an array:
.setPopup(new mapboxgl.Popup({ offset: [0, -5] }) // 5 pixels upwards
Related
Currently I am getting streets from the geocoding api then displying houses in that street in satelite view. Is there a way to automatically detect house roofs and automatically draw polygons over them?
mapboxgl.accessToken = accessToken;
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/satellite-v9', // style URL
center: [lng, lat], // starting position [lng, lat]
zoom: 17, // starting zoom
});
const draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
},
// Set mapbox-gl-draw to draw by default.
// The user does not have to click the polygon control button first.
defaultMode: 'draw_polygon'
});
map.addControl(draw)
map.addControl(new mapboxgl.NavigationControl())
map.on('draw.create', updateArea)
map.on('draw.delete', updateArea)
map.on('draw.update', updateArea)
function updateArea(e) {
const data = draw.getAll()
const answer = document.getElementById('calculated-area')
if (data.features.length > 0) {
const area = turf.area(data)
// Restrict the area to 2 decimal points.
const rounded_area = Math.round(area * 100) / 100
const areaInCM = rounded_area * 10000
answer.innerHTML =
`<p><strong>${areaInCM.toLocaleString('en-US')}</strong> square centimeters</p>`;
} else {
answer.innerHTML = ''
if (e.type !== 'draw.delete')
alert('Click the map to draw a polygon.')
}
}
var map = L.map('map').setView([27.7172, 85.3240], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 160,
attribution: '© OpenStreetMap'
}).addTo(map);
var circle = L.circle([27.7172, 85.3240], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
var marker = L.marker([27.7172, 85.3240],
{ alt: 'Kathmandu' }).addTo(map) // "Kyiv" is the accessible name of this marker
.bindPopup('Kathmandu Nepal');
I am trying to create a pop when the user clicks the country label. My code accomplishes this but if the user accidentally clicks anywhere else I get the error "TypeError: Cannot read property 'properties' of undefined". Any help would be appreciated. Thanks.
export default class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
lng: -32.87393,
lat: 43.6439,
zoom: 3,
mxZoom: 7,
};
this.mapContainer = React.createRef();
}
componentDidMount() {
const { lng, lat, zoom , mxZoom} = this.state;
const map = new mapboxgl.Map({
container: this.mapContainer.current,
style: 'mapbox://styles/chriswade112358/ckpipp5el0jky18qwzep8ppyl',
center: [lng, lat],
zoom: zoom,
minZoom: zoom,
maxZoom: mxZoom,
});
map.on('style.load', function() {
map.on('click', function(e) {
const features = map.queryRenderedFeatures(e.point, { layers: ['country-label'] });
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML('you clicked here: <br/>' + features[0].properties.name)
.addTo(map);
});
});
}
I need to open all the markers that are visible on the map at Zoom,
10. I also use leaflet.markercluster.
Init map:
initMap() {
this.map = L.map('map', {
center: [55.55, 37.61],
zoom: 9,
layers: this.layer
})
this.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution:
'© OpenStreetMap, ©'
})
this.tileLayer.addTo(this.map)
this.map.on('zoom', function(ev) {
???
})
Add marker layer:
this.markerLayer = new L.LayerGroup() // layer contain searched elements
// this.map.addLayer(this.markerLayer)
for (const i in data) {
...
const marker = new L.Marker(new L.latLng(loc), { title: title, icon: icon })// se property searched
marker.bindPopup(title)
this.markerLayer.addLayer(marker)
}
Use leaflet marker cluster:
this.markersLayer = L.markerClusterGroup({
iconCreateFunction: function(cluster) { ... },
singleMarkerMode: false
})
this.markersLayer.addLayer(this.markerLayer)
this.map.addLayer(this.markersLayer)
You should add your markers to an array before / after adding them to the map to access them easily.
var markers = [];
for (const i in data) {
const marker = new L.Marker(new L.latLng(loc), { title: title, icon: icon })
marker.bindPopup(title)
this.markerLayer.addLayer(marker)
markers.push(marker);
}
after that you can just loop through your markers array and use openPopUp function of marker to open popups of your markers programmatically.
for(i = 0; i< markers.length;i++){
markers[i].openPopup();
}
I'm trying to add markers to a map using the
L.mapbox.featureLayer({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [ll[0], ll[1]]
},
properties: {
title: d[i].screen_name,
media: d[i].media_url,
id: d[i].source_id,
text: d[i].text,
userId: d[i].user_id,
'marker-color': '#000',
'marker-symbol': 'star-stroked'
}
}).addTo(map);
method but how do I from there access that marker? map.getLayerAt(0) or something?
It doesn't; display on the map for some reason..
Mocked this up quickly based on an example on the Mapbox site:
var map = L.mapbox.map('map', 'examples.map-zr0njcqy');
map.featureLayer.on('ready', function(e) {
var markers = [];
this.eachLayer(function(marker) { markers.push(marker); });
cycle(markers);
});
function cycle(markers) {
var i = 0;
function run() {
if (++i > markers.length - 1) i = 0;
var marker = markers[i];
console.log(marker.getLatLng());
}
run();
}
You can use the cycle() function to do stuff with each individual marker - if you look in the console you'll see that you can know access the marker's internal properties like latLng etc. I don't know what you want to do with each marker, so if you provide more information I'll be able to assist you more!