I successfully create a clustermarkergroup with custom style. But I can't change the color of the black marker when there is only one marker in the cluster, please see image Black marker when alone in the cluster
How to change that default marker color?
Here is how I create the clustergroup
var clusterGroup = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
var childCount = cluster.getChildCount();
return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-mycluster', iconSize: new L.Point(40, 40) });
}
})
Some CSS
.marker-mycluster {
background-color: rgba(255,191,84, 0.6);
}
.marker-mycluster div {
background-color: rgba(255,191,84, 1);
}
Your single black marker is just your normal marker, outside any cluster since it is far away from other markers.
If you want to replace the visual appearance of ALL your markers, including when they do not cluster (i.e. when they are shown as single markers), you can conveniently use the singleMarkerMode option of MarkerCluster plugin:
var clusterGroup = L.markerClusterGroup({
singleMarkerMode: true,
iconCreateFunction: function(cluster) {
// your code
});
}
})
This will override the icon of all your markers, so that they look like clusters of size 1.
Related
I'm using the Leaflet.markercluster plugin (https://github.com/Leaflet/Leaflet.markercluster) and
I'm struggling to update the markerClusterGroup Icon when the event spiderfied is fired.
Code:
// Initiate markers w/ a markerClusterGroup and the default icon
var markers = L.markerClusterGroup({
showCoverageOnHover: false,
});
// Set marker, bind it to Popup and add the markers as an layer to the map
markers.addLayer(L.marker(...))
.bindPopup(
L.popup({offset: L.point(0,0)}).setContent(
`...`
).openPopup()));
map.addLayer(markers);
// Try to update the default markerClusterGroup icon when a markerClusterGroup is spiderfied
markers.on('spiderfied', function (a) {
console.log('spiderfied');
markers.options = {
showCoverageOnHover: false,
iconCreateFunction: function() {
return L.divIcon({ html: '<b>' + 'Test' + '</b>' });
}
};
markers.refreshClusters();
});
What am I doing wrong here? Any advices?
Thanks in advance!
I've tried to get: https://github.com/Leaflet/Leaflet.markercluster#refreshing-the-clusters-icon implemented
I've done research on internet
I generated a list of Maki Icons I want to use via the original icon editor.
drawMarkers() {
let self = this;
const mapboxgl = require("mapbox-gl");
let data = this.draw.getAll();
data.features.forEach((feature) => {
if (feature.geometry.type == "Point") {
var icon = feature.properties.icon;
var title = feature.properties.title;
if (typeof title === "undefined") {
title = "Info";
} else {
var popup = new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(`<h3>${title}</h3>`);
var marker = new mapboxgl.Marker({
color: '#333',
draggable: false,
scale: 1,
})
.setLngLat(feature.geometry.coordinates)
.setPopup(popup)
.addTo(self.map);
}
});
The Markers are showed correctly on the Mapbox.
The GeoJSON is like this:
"type":"FeatureCollection",
"features":[
{
"id":"c749de6a6eac6b1cfdda890e7c665e0d",
"type":"Feature",
"properties":{
"icon":"ferry",
"title":"This should show a Ferry icon",
"portColor":"#d9eb37"
},
"geometry":{
"coordinates":[
6.12,
22.44
],
"type":"Point"
}
},
I want the Maki Icons also added in the Marker, but I cannot find any documentation of how icons can be used inside the Mapbox Marker.
Who can help me out? I'm using the Mapbox GL JS for Web.
It depends on how you've created your map. You can either:
Create your own map style using the Maki icons you've generated. This is done using the Mapbox studio to create your custom map style, then adding it to your application.
Create custom markers that use the maki .svg files you've created. This can be done by passing a custom element to the new mapboxgl.Marker() function. So, instead of:
var marker = new mapboxgl.Marker({
color: '#333',
draggable: false,
scale: 1,
})
you would pass:
var marker = new mapboxgl.Marker(customElement)
where customElement uses the data from your icons variable.
I'm not sure if you're using plain JS here, but there's some examples on the mapbox docs of ways you can do this.
Because you've generated your own list of Maki icons, I'd suggest downloading them and maybe host them somewhere so that you can get away with creating your markers with <img src="link to hosted maki marker"/> or something of the sort
Is it possible to add text to a custom icon marker? I want to avoid having to edit the icon in an image editor just to add the text.
I've created my custom icon marker like so:
var airfieldIcon = L.icon({
iconUrl: 'images/airfield.png',
iconSize: [48,48]
});
var airfield = L.geoJson (airfield, {
pointToLayer: function(feature,latlng){
return L.marker(latlng, {
icon: airfieldIcon
})
}
}).addTo(map);
How would I add the text "Banff Airfield" as a label to this icon? Is the easiest and most efficient way through using an image editor? if so, I will do that method, but wondering if there was a better way. Thanks!
You could use a L.DivIcon:
Represents a lightweight icon for markers that uses a simple div element instead of an image.
http://leafletjs.com/reference.html#divicon
Put your image and text in it's HTML, sprinkle some CSS to make it appear the way you want and you're good to go
new L.Marker([57.666667, -2.64], {
icon: new L.DivIcon({
className: 'my-div-icon',
html: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+
'<span class="my-div-span">RAF Banff Airfield</span>'
})
});
Another option is to use the Leaflet.Label plugin:
Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps.
Repository: https://github.com/Leaflet/Leaflet.label
Example: http://leaflet.github.io/Leaflet.label/
As of leaflet version 1.0.0, you can add a label without using a plugin (the plugin has been rolled into the core functionality).
Example:
var marker = L.marker(latlng)
.bindTooltip("Test Label",
{
permanent: true,
direction: 'right'
}
);
This yields a marker on the map with a label of "Test Label" which is always displayed to the right of the marker's icon.
To further explore Mark's answer, if you want to know an easy way to add text (number) over a marker like this:
You just have to proceed as follows:
1. Instantiate an icon (map.js)
var stepIcon = L.icon({
iconUrl: 'graphic/yellow-circle.png', // the background image you want
iconSize: [40, 40], // size of the icon
});
2.1 Setting the icon (map.js)
var marker = new L.marker([39.5, 77.3], { icon:stepIcon});
marker.bindTooltip("12" //specific number, {
permanent: true,
direction: 'center',
className: "my-labels"
});
marker.addTo(map);
2.2 Setting the icon (map.css)
.leaflet-tooltip.my-labels {
background-color: transparent;
border: transparent;
box-shadow: none;
font-weight: bold;
font-size: 30px;
}
Make sure you have imported your .css file into your .html page.
this is out of box solution it may not suitable for everyone but it works for me
simply you can add marker of icon then marker of text Like this :
var MarkerIcon = L.icon(feature.geometry.properties.icon);
var MarkerText = L.divIcon(
{className: TextPositionClass,
html:'<div>'+ displayText+'</div>',
iconSize: null
});
let marker = L.marker(latlng, {icon: MarkerIcon}).addTo(this.map); // add marker
let label = L.marker(latlng, {icon: MarkerText}).addTo(this.map); // add text on marker
I am working with the application which uses leaflet api.
Introduction
I needed to draw different types of fences, using decorators i can somewhat apply good visuals to the polylines but not much.
Problem
I was willing to show twisted wires instead of dashes, dots or plain lines and I know the twisted wire line will be an image but can't find help about applying custom css to polylines.
Script Example
var fence2Icon = L.icon({
iconUrl: 'xxxx.png',
iconSize: [5, 20]
iconAnchor: [5, 18]
});
// Add coordinate to the polyline
var polylineFence2 = new L.Polyline([], { color: 'red' });
function fencePlace2(e) {
// New marker on coordinate, add it to the map
new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr);
// Add coordinate to the polyline
polylineFence2.addLatLng(e.latlng).addTo(curr);
var decorator = L.polylineDecorator(polylineFence2, {
patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5})
}]
}).addTo(curr);
}
L.easyButton('fa-flash', function () {
$('.leaflet-container').css('cursor', 'crosshair');
map.on('click', fencePlace2);
polylineFence2 = new L.Polyline([], { color: 'red' });
}).addTo(map);
If someone know anything about polyline or another way please do help.
Thanks for your time:-)
You can add a class in the options of your polyline ...
var polyline = L.polyline(latlngs, { className: 'my_polyline' }).addTo(map);
and add your own settings in the CSS ...
.my_polyline {
stroke: green;
fill: none;
stroke-dasharray: 10,10;
stroke-width: 5;
}
Here is an example: http://jsfiddle.net/FranceImage/9dggfhnc/
You can also access some options directly ...
var polyline = L.polyline(latlngs, { dashArray: '10,10' }).addTo(map);
See Path Options
If you create a polyline you're in fact adding an element to the SVG element which Leaflet uses to draw it's overlays. Styling SVG path elements is different from styling regular HTML elements. There's no such thing as border and background-color etc. It has different properties, if you're interested here's a nice read on the matter:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
You can style Leaflet's path elements when you instanciate them via options or via CSS using the properties (related to styling) described in the documentation here:
http://leafletjs.com/reference.html#path
Via options:
new L.Polyline([...], {
weight: 3,
color: 'red',
opacity: 0.5
}).addTo(map);
Via CSS:
new L.Polyline([...], {
className: 'polyline'
}).addTo(map);
.polyline {
weight: 3,
color: red,
opacity: 0.5
}
However, what you want, using an image simply isn't possible. You can use images as fill for SVG paths, but it would be impossible for your usecase. You'de need to add a pattern definition to the SVG Leaflet is using and then you could use that id as the fill property as outlined in this answer:
https://stackoverflow.com/a/3798797/2019281 but will always fill/tile the image horizontally which won't work if your polyline is vertical.
I'm using Mapbox for a Phonegap app and making use of the Marker Cluster plugin to cluster our pins. Customizing the icon for a marker is easy enough, but I'd also like to be able to customize the cluster icon. I'm not seeing a way to customize the cluster icon. Suggestions?
Here's a snippet of what I have so far:
var map = L.mapbox.map('mapView', 'myMap.mapCode', { zoomControl: false }).setView([geoData.lat, geoData.lon], 5),
markers = new L.MarkerClusterGroup();
var propertyCount = properties.length;
for (var i = 0; i < propertyCount; i++) {
var property = properties[i];
var marker = L.marker(new L.LatLng(property.lat, property.lon), {
icon: markerIcon,
title: property.heading
});
marker.bindPopup(property.heading);
markers.addLayer(marker);
}
map.addLayer(markers);
You can define the marker like so:
var cluster = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
}
});
which will allow you to style it however you wish.