I'm using some code i got from Codepen for placing some pointers on a Goole map.
It's currently using the default markers but id like to change them to my own ones, but i'm not really sure where to updated the code for this. Any examples would be very much appreciated
Here is the the code - http://jsfiddle.net/MSLRr/
Each pointer is placed by this code:
var data = [ // map data
{
'id':1,
'content':'Hello my name is marker, I\'m from Google',
'position': {
'lat':55.86423,
'lng':-4.251
}
},
{
'id':2,
'content':'I am the content of this infobox. Wow, what a text.<br><br>The good thing is: Tags are also possible',
'position': {
'lat':55.874,
'lng':-4.25
}
},
]
You should use icon property of the marker (google dev reference: https://developers.google.com/maps/documentation/javascript/markers#icons)
var data = [ // map data
{
'id':1,
'content':'Hello my name is marker, I\'m from Google',
'position': {
'lat':55.86423,
'lng':-4.251
},
'icon': 'youricon.png'
},
{
'id':2,
'content':'I am the content of this infobox. Wow, what a text.<br><br>The good thing is: Tags are also possible',
'position': {
'lat':55.874,
'lng':-4.25,
},
'icon': 'youricon.png'
}]
And using the new property icon in your data array to markers
Related
I've built a map and added a layer that highlights a specific neighborhood, I'd like to add a hover effect to the layer. just like in this example https://docs.mapbox.com/mapbox-gl-js/example/hover-styles
I got as far as creating my own layer with the geojson but the example I am trying to follow uses an external data source whereas I am using my own. I tried to reference my data but I don't think I am doing it correctly. Pleases see this link with a working version showing the layer highlighting the neighborhood.
This is the link to what I have so far https://jsfiddle.net/jrax4pvm/1/
Here's my JS
mapboxgl.accessToken =
'pk.eyJ1IjoibGVvc29ubmVrdXM5NSIsImEiOiJjazAxdHcyZWExMHBjM2lwN2psMDhheXQwIn0.KpEYrurG0lE55PLKMuYtKw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/leosonnekus95/ck11gbbaz0neb1cmrunqmijkf',
zoom: 15,
center: [174.7570008, -36.8658221]
});
map.on('load', function () {
'id': 'Uptown',
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates':
[
[ /* Co-ordinates here..*/ ]]
}
}
},
'layout': {},
'paint': {
'fill-color': '#088',
'fill-opacity': 0.8
}
});
});
I'd really like to make this layer hoverable/clickable and suspect I have to create a combined version of these two examples
https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/
https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
and would like some guidance.
You'll want to add map.on('mouseenter') and map.on('mouseleave') functions which target your layer to your code like this:
map.on('mouseenter', 'Uptown', function(e) {
map.setPaintProperty('Uptown', 'fill-color', '#FF0000');
});
map.on('mouseleave', 'Uptown', function() {
map.setPaintProperty('Uptown', 'fill-color', '#1F06F0'));
});
I've updated your code in another JSFiddle (https://jsfiddle.net/pjleonard37/jfd0bsha/) with these changes.
Disclaimer: I work at Mapbox
I have a map that's using mapboxgl-js to hide or show map markers based on some criteria.
Hiding the markers is working as expected, but when I want the markers to show again they flash for some milliseconds then disappear again while the map hides labels (street names etc.) on the underlying layer before they show up again.
See this video: https://streamable.com/debcp
See this codepen: https://codepen.io/jakobfuchs/details/VRRgJO
I came to the conclusion that this is caused by setting 'icon-allow-overlap': true on the marker symbol layer.
Any suggestions how I can keep that setting and avoid the flashing?
The strange thing is that this does not happen 100% of the time but ~95% of the time.
Code samples:
Marker layer:
map.addLayer({
id: 'property-layer',
type: 'symbol',
source: 'properties',
filter: ['!has', 'point_count'],
layout: {
'symbol-placement': 'point',
'icon-image': 'marker',
'icon-size': 1,
'icon-anchor': 'bottom',
'icon-allow-overlap': true,
}
});
Filter code:
const filterToggle = document.getElementById('filterToggle');
filterToggle.addEventListener('change', function(e) {
if (openPopup) {
openPopup.remove();
openPopup = '';
}
let properties;
if (this.checked) {
properties = {
type: "FeatureCollection",
features: features.features.filter((property) => property.properties.availability === 'Available')
}
} else {
properties = features;
}
map.getSource('properties').setData(properties);
});
I have faced with the same issue and my solution is use the icon-ignore-placement instead of icon-allow-overlap, and it's still not have any issues
You can find the document here: https://docs.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-icon-ignore-placement
Hope this will help, thanks!
I am trying to insert a url/path into google map marker. So I tried google map's url: but no effects. when mouse on the marker it changes to pointer but I can't click or the page doesn't open.
By the way I try to make path to detail screen of each id.
var marker = new google.maps.Marker({
map: map,
icon: 'imgs/marker.png',
label: {
text: estates.data[0].price,
color: "#fff",
},
url: "/pages/{{$est->id}}",
position: {
lat: {{$est->lat}},
lng: {{$est->lng}}
}
});
The way I am using it wrong?
Controller:
public function details($id)
{
$estates = allestates::where('id', $id)->first();
// $rsltActualPrice = (int)$estates->extend / (int)$estates->price;
return view('pages.details', compact('estates'));
}
and Route:
Route::get('/pages/{id}', 'PagesController#details');
You may want to create a route like :
Route::get('/pages/{estateId}', 'yourController#index')->name('map');
and change your url address to this :
url: route('map', ['estateId' => $est->id]),
I'm trying to remove marker from my map before I add a different one but the suggested method, although throwing no error, doesn't remove my marker.
$scope.geo.push({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [$scope.gig.lng, $scope.gig.lat]
},
properties: {
title: $scope.gig.venue,
description: $scope.gig.address + ' ' + $scope.gig.postcode,
'marker-size': 'medium',
'marker-color': '#676767'
}
});
/* show on map */
var markerLayer = L.mapbox.markerLayer().setGeoJSON({
type: 'FeatureCollection',
features: $scope.geo
}).addTo(map);
map.setZoom(13);
map.panTo($scope.geo[0].geometry.coordinates.reverse());
markerLayer.eachLayer(function(m) {
});
According to the documentation I should be able to then call the following to clear all markers but it does nothing.
L.mapbox.markerLayer().clearLayers();
Am I doing something wrong? If not is there a nuclear way of resetting the map?
L.mapbox.markerLayer().clearLayers();
L.mapbox.markerLayer() is a function that creates a new marker layer: this call is creating a new marker layer, and clearing the markers in it.
In your code, you have the lines
var markerLayer = L.mapbox.markerLayer().setGeoJSON({
type: 'FeatureCollection',
features: $scope.geo
}).addTo(map);
You are creating a new marker layer with the L.mapbox.markerLayer() and naming it with the variable markerLayer. So, to clear the markers in this layer, you would call:
markerLayer.clearLayers();
Hmmm.. I have a map with several points on it. And I'd like to get the latitude and longitude when a point is clicked. How do I do that?
ps. I'm quite new to javascript, so
an example would really help.. T_T
There is something about it in the docs,
I just have no idea how to use it because of my noobness to javascript..
http://code.google.com/apis/maps/documentation/javascript/reference.html#FusionTablesMouseEvent
function initPoints()
{
points = new google.maps.FusionTablesLayer({
query: {
select: "points",
from: poleid
},
styles: [{
markerOptions: {
iconName: "small_green"
}
}],
suppressInfoWindows: true
});
points.setMap(map);
}
Got it..
google.maps.event.addListener(points, 'click', function(event) {
alert("lat:"+ event.latLng.lat());
});