I want to create a cluster with a specific value stored in the marker.
Is this possible?
enter image description here
You can override the image path of the marker cluster like this
let markers = [marker1, marker2, marker3]; // list of markers with the specific value
markerClusterOptions = {
styles: [
{
height: 53,
width: 53,
url: YOUR_ICON_PATH
}
]
};
let markerCluster = new MarkerClusterer(map, markers, markerClusterOptions);
NB: styles is a list and you can have more than one style depending for exemple the height and width.
Related
Very similar to this tutorial, I would like to create a MapBox map that at a zoomed out level shows regions (labelled Pcode in my data), but once zoomed it switched to a district level (labelled Name). Ideally both these layers would be part of a single geojson shapefile though that can be loaded from an external source (https://raw.githubusercontent.com/Laurent-Smeets-GSS-Account/geojsons/main/geojsons_files/Districts_261_simplified.json). my questions are
how can I format the geojson in such a way that is possible (in R)? (Maybe it is necessary to combine the district polygons into new region polygons and save a seperate geojson file with these regions that gets loaded at another zoom level?)
how do I load the data into Mapbox to make it switch at a certain zoom level?
I am using this example on how to load the code
mapboxgl.accessToken = 'MY TOKEN';
// Create a new map.
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12',
center: [-100.04, 38.907],
zoom: 3
});
map.on('load', () => {
// Add a source for the state polygons.
map.addSource('states', {
'type': 'geojson',
'data': 'https://raw.githubusercontent.com/Laurent-Smeets-GSS-Account/geojsons/main/geojsons_files/Districts_261_simplified.json'
});
// Add a layer showing the state polygons.
map.addLayer({
'id': 'states-layer',
'type': 'fill',
'source': 'states',
'paint': {
'fill-color': 'rgba(200, 100, 240, 0.4)',
'fill-outline-color': 'rgba(200, 100, 240, 1)'
}
});
// When a click event occurs on a feature in the states layer,
// open a popup at the location of the click, with description
// HTML from the click event's properties.
map.on('click', 'states-layer', (e) => {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.Name)
.addTo(map);
});
// Change the cursor to a pointer when
// the mouse is over the states layer.
map.on('mouseenter', 'states-layer', () => {
map.getCanvas().style.cursor = 'pointer';
});
// Change the cursor back to a pointer
// when it leaves the states layer.
map.on('mouseleave', 'states-layer', () => {
map.getCanvas().style.cursor = '';
});
});
You can combine both sets of features into one GeoJSON FeatureCollection, just be sure to add some property that you can filter on, like:
...
{
type: 'Feature',
geometry: {...},
properties: {
type: 'district'
}
}
...
When you load the data, add one source, and two layers. Each layer should have a filter attribute so that only the features of a certain type show in that layer. Make sure one has its visibility set to none when the map first loads.
map.addLayer({
...,
layout: {
visibility: 'none'
},
filter: ['==', 'type', 'district']
});
map.addLayer({
...,
filter: ['==', 'type', 'pcode']
});
Then you can follow the same example you posted, and toggle the visibility on zoom.
I'm changing from markers to vector layer and I can't make my site to use any sort of non-default icon, whatever I put in externalGraphic style attribute doesnt have effect on map. I just see orange circles. To be exact, no matter what I put in Openlayers.Style to style my point features, I get default look of icons.
It should be easy, but I try for days and can't make it work, so I came here for help. When warstwa_ikon was markers layer everything was fine, but I need extra functionality.
Thats my styling code:
var StylIkony = new OpenLayers.Style({
externalGraphic : '${symbol}',
graphicWidth : 15,
graphicHeight : 15,
cursor : 'pointer'
});
var StylWarstwyIkon = new OpenLayers.StyleMap ({
default: StylIkony,
delete: StylIkony,
select: StylIkony,
temporary: StylIkony
});
warstwa_ikon = new OpenLayers.Layer.Vector("Ikony Lokali",{ eventListeners: { "featureselected": WywolajRamke }});
warstwa_ikon.StyleMap = StylWarstwyIkon;
map.addLayer(warstwa_ikon);
Thats already executed code from generating Features:
WspolrzedneIkony = new OpenLayers.Geometry.Point(2279231, 7127620);
Ikona = new OpenLayers.Feature.Vector(WspolrzedneIkony,
{ "symbol": "../GRAFIKI/IkonyLokali/10.png", "idLokalu": 1 });
warstwa_ikon.addFeatures([Ikona]);
WspolrzedneIkony = new OpenLayers.Geometry.Point(2279245, 7127630);
Ikona = newOpenLayers.Feature.Vector(WspolrzedneIkony,
{ "symbol": "../GRAFIKI/IkonyLokali/6.png", "idLokalu": 2 });
warstwa_ikon.addFeatures([Ikona]);
Thats DOM of my vector layers (warstwa_ikon) StyleMap:
http://s24.postimg.org/hwfjakg0l/stylemap.png
Thats DOM of my vector layer first Feature, which should be styled:
http://s9.postimg.org/oxlocyku7/feature.png
Sorry, I can't include normal images yet. I should add that this is not a problem with accessing icon image file, I can't get layer to use any sort of images, even from internet links.
Declares StyleMap on layer creation as:
warstwa_ikon = new OpenLayers.Layer.Vector("Ikony Lokali", {
styleMap: StylWarstwyIkon,
eventListeners: ...
});
and removes:
warstwa_ikon.StyleMap = StylWarstwyIkon;
function highlightmarker(marker_id) {
//console.log("Highlight marker id: "+marker_id);
for (var i=0; i<markers.length; i++) {
if (markers[i].id == marker_id) {
map_markers[i].setAnimation(google.maps.Animation.BOUNCE);
}
}
}
This makes my map markers bounce up and down but I want them to grow instead.
I tried replacing the last line with this but it didn't work:
var img_height = 40;
var img_width = 40;
How do I make highlighted Google Map markers grow?
You could use a Icon (or a MarkerImage that's still supported but deprecated in favor of Icon) and use a the common marker image in it and set the appropriate size/scale you desire, for instance, assuming markers[i] points to a valid marker
var image = {
url: " http://www.google.com/mapfiles/marker.png",
size: new google.maps.Size(50, 50),
origin: null,
anchor: null,
scaledSize: new google.maps.Size(50, 50)
};
marker[i].setIcon(image);
for a more complete example I created a jsFiddle that sets the icon upon marker creation, http://jsfiddle.net/68gx9/
instead of
map_markers[i].setAnimation(google.maps.Animation.BOUNCE);
replace marker image with a new bigger one..
map_markers[i].setIcon(yourImageUrl);
I have two kinds of geolocation informations: one is the exact location, the other is an aproximated, region level geolocation. As I show these informations on a map, I would like to be able to use a different marker type for each kind of location, the exact location would be green and the approximated location would be blue.
I'm using the MarkerClusterer to group Markers into one bubble, but, I need two MarkerClusterers, one for approximated locations, another for exact locations. Doing so, my MarkerCluster is one for each kind of geolocation.
My problem is: sometimes, the two Clusters overlaps, wich may lead into confusion:
As you can see, it shows that I have 7 markers there (here's it blue, but it's really a green Marker, as these geolocations are the exact kind).
But, zooming in, I have 9, because the second Cluster was underneath the first one (note that for now booth Clusters has the same color, it was supposed to be green (7) and blue (2) - so the user can be sure that the (2) locations are approximated)
Any ideas on how can I make a Cluster of Clusters? Or another approach to let the user know that there are two kinds of information?
If you have only two (or a few) classes of marker, then one approach is to create a second MarkerClusterer instance. So lets have two sets of options where the styles (not shown) are different:
var mcOptions1 = {gridSize: 40, styles: clusterStyles1, maxZoom: 19};
var mcOptions2 = {gridSize: 40, styles: clusterStyles2, maxZoom: 19 };
Then you can build two separate arrays of markers, say markers1 and markers2, which in my case depend on a status attribute of the marker:
(note that every marker is added to the map also as normal, not shown)
// push to the array, markers[]
switch(status)
{
case 'Include':
markers1.push(marker);
break;
case 'Exclude':
markers2.push(marker);
break;
default:
markers1.push(marker);
};
Finally, then create the two MarkerClusterer instances each with separate arrays and options
var markerClust1 = new MarkerClusterer(map, markers1, mcOptions1);
var markerClust2 = new MarkerClusterer(map, markers2, mcOptions2);
The result on the map shows two styles of marker icons and two styles of Clusters. As you zoom out the two separate markers never get clustered together - I think this is just what you need, and it looks good on the map!
(I'd like to post some map pics, but cannot post images until my reputation increases!!)
I did use the later MasterClusterPlus rather than the earlierr MasterClusterer, but I cannot see any reason that the approach will not work with the earlier version.
I am dealing with this problem right now.
You can use what qurn said, and change clustermarker style, so the icons won't overlap.
var clusterStyles = [
{
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#11ffbb',
textSize: 10,
offsetX: 20,
offsetY: 20
}, {
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11,
offsetX: 20,
offsetY: 20
}, {
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12,
offsetX: 20,
offsetY: 20
}
];
var mcOptions = {
styles: clusterStyles
};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
Then set "offsetX" and "offsetY" properties.
Ex: If you have 4 categories / groups you can use offset: -20,-20 | -20,20 | 20, -20 | 20,20
The goal is to get the icons around your point.
In case this won't help you, take a look at Google Maps Spiderfier.
Hope it helped.
I draw a polyline to a google maps, and put markers to every point of it. I want to hide these markers higher zoom levels, therefore I use the Marker Manager. It's works well.
After draw everything, the map zoom to the bound of the polyline with the google.map.fitBound command. But if it zoom to far, where the markers would be hided, they don't. They still visible. If I drag or zoom again, they are hiding.
I use the markermanager in the simple way:
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarkers(aMarkers[0], 15, 0);
markerMgr.addMarkers(aMarkers[1], 12, 0);
markerMgr.addMarkers(aMarkers[2], 10, 0);
markerMgr.refresh();
});
Is anybody met this problem before? Thank is advance!
I had this same problem. When creating your markers, don't set the "map" parameter in the marker options. The MarkerManager will add the markers to your map as you zoom in and out.
For example:
var newMarker = new google.maps.Marker({
//map: map
position: markerPosition,
icon: icon
});
mgr.addMarker( newMarker, 9 );
Why do you have the maximum zoom for the markers set to 0?
MarkerManager.addMarkers(aMarkers[0], minZoom, maxZoom(optional))
Try (that parameter is optional per the documentation):
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarker(aMarkers[0], 15);
markerMgr.addMarker(aMarkers[1], 12);
markerMgr.addMarker(aMarkers[2], 10);
markerMgr.refresh();
});
Working Example