24
Simplest way is to style the line. Add a new symbol layer to your line and change the 'Symbol Layer Type' to marker line. Select 'Marker' in the style tree and select a triangle as your default marker symbol. I believe 'triangle 2' is your best bet. Accept these changes and all your lines will now have arrow showing the direction of the line. You can mess ...
18
I use this simple approach:
var svg = ''; /* insert your own svg */
var iconUrl = 'data:image/svg+xml;base64,' + btoa(svg);
var icon = L.icon( {
iconUrl: iconUrl,
} );
18
All right. I came up with a solution using a layer:
var shelter1 = L.marker([55.08, 11.62], {icon: shelterIcon});
var shelterMarkers = new L.FeatureGroup();
shelterMarkers.addLayer(shelter1);
map.on('zoomend', function() {
if (map.getZoom() <7){
map.removeLayer(shelterMarkers);
}
else {
map.addLayer(shelterMarkers);
...
16
I have written down a small piece of code might be helpful for you.
You can try working example on jsFiddle
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - Marker Click Event</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://...
16
On one hand: whenever Leaflet handles a mouse (or touch) event, you can access the original DOM event in the originalEvent property of the event.
On the other hand: Given a mouse (or touch) DOM event, Leaflet can magically translate its clientX and clientY properties into an instance of L.LatLng by using map.mouseEventToLatLng().
Combine these two things ...
15
You just have to add 'mouseover' and 'mouseout' event listeners to your newly created layer.
You will also want to change the offset of the popup to make it higher. If not, you will have annoying mouseout when the mouse comes near the arrow of the popup, causing the disappearance of the popup.
gpsMarker = new L.geoJson(gjsonMarker, {
onEachFeature: ...
15
Since your symbol are quiet simple, you can use a simple marker and set the blending mode to lighten
14
To create a custom marker you can create a L.Icon object and for the popup you can use the onEachFeature option.
Here is an example code snippet for these functions:
var myIcon = L.icon({
iconUrl: 'my-icon-url',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
function onEachFeature(feature, layer) {
layer.bindPopup(feature....
12
You can simply do it directly in QGIS (works both 2.18 and 3.0.3)
Layer Properties > Draw Effects > Effect Properties
Open your SVG "Layer Properties" and click "Draw Effects" and then open the Star symbol "Customize effects" .
Then use "Colorise" as an "Effect type"
References:
Documentation QGIS Testing | Draw effects
Introducing QGIS live layer ...
11
It seems like there's no way to just symbolise the line as a zigzag: unfortunately, you'll have to alter the underlying data.
You can get a reasonably good zigzag line by first splitting the original line into many equidistant line segments, and then offsetting every other point by a fixed amount.
Here's a Python script that does this, taking NathanW's ...
11
You can add an Arrow in Arcmap. This is what you need to do:
Using the Draw toolbar insert a straight line. Double click on the line and change its properties as illustrated in the below
11
Use Data defined override. Go to Layer Properties and in Simple marker style open the Data defined override menu with icon next to the Angle value. Choose Field Type -> "your column".
Data defined override button:
Select column:
Result:
If you select Edit... in Data defined override you can also insert a custom expression.
10
Probably:
markers.on("click", function (event) {
// Assuming the clicked feature is a shape, not a point marker.
map.fitBounds(event.layer.getBounds());
});
You may want to detect if the clicked feature is a marker (point feature), and act accordingly, as it will not have the getBounds() method.
References:
Event object
event.layer
Note: in the ...
9
Figured it out thanks to some documentation reading.
The polygon in leaflet responds to setStyle but the marker can be changed using setIcon
Documentation for setIcon
9
Starting from the custom example from the github repo, modify the iconCreateFunction to add a different css class based on the size of the cluster:
iconCreateFunction: function (cluster) {
var markers = cluster.getAllChildMarkers();
var n = 0;
for (var i = 0; i < markers.length; i++) {
n += markers[i].number;
}
var small = n < 200;
var ...
9
You always can retrieve the coordinates from the Leaflet object map. You can use something like this:
map.on('click', function(e){
var coord = e.latlng;
var lat = coord.lat;
var lng = coord.lng;
console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);
});
Here you have a working example.
8
See Leaflet doc about iconAnchor option:
The coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
If you specify iconAnchor with the same value as iconSize (i.e. [...
8
The issue is that the createMarker function is called for every waypoint, so obviously the resulting markers will look the same.
To work around it, you simply use the arguments that you already have. Someone had a similar issue just a month ago:
https://github.com/perliedman/leaflet-routing-machine/issues/13
I'm quoting perliedman, the creater of the routing ...
8
Just leave out call of .openPopup() method:
mymarker.bindPopup('<p>You are here ' + username + '</p>');
8
You need to edit the SVG file and replace the
fill="#000000" stroke="none"
by something like
fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"
the "param(xxx)" part allow you to set the xxx parameter from the qgis interface, the #XXX part is the default color.
For a more detailled explanation see this answer ...
7
Seems like you can't do that because a marker uses an image to render.
I think you'd need to grab the icon class of your marker and change the "iconUrl" attribute to whatever new image you want.
Source: Leaflet API Reference
Hope that helps,
DR
7
I think there is no better way than to handle zoomend event. To group markers by zoom levels, use L.LayerGroup: turning them on and off will be easier.
Calling map.removeLayer() or map.addLayer() twice won't produce any errors or add a layer twice: there is an internal hash that prevents such things. So you can just have a bunch of if (zoom > 6 &&...
7
It looks strange that you add both a GeoJSON layer from result.geojson and a marker created from [result.lat, result.lon].
If result.geojson contains the same point information as [result.lat, result.lon], you are adding both markers to your map.
7
I see the same issue. Took a look at this file in InkScape, and used Shift-Ctrl-F to bring up the Fill and Stroke properties.
I noticed that the fill on your green and blue areas were set to 'pattern fill', stripes 1:1.
Make a note of your blue and green colours first. Next, change to use 'Flat Color' on both the coloured areas, then reselect your colours ...
7
The issue arises because the symbol is asked to be located 8 mm away from its supposed location.
To overcome this, you will want not to offset the symbol but rather the marker location along - but on - its line. You will need a style with 1 line and 2 marker lines, one of which having an offset along the line of 8mm. This ensures it will not go outside of ...
6
none of the above worked for me, but simply doing this whenever I add a new layer worked a treat to keep my marker layer on top:
myMarkerLayer.setZIndex( 1001 );
6
Can drop marker like google maps using this Third party plugin
bouncemarker
And here is a demo Demo
6
You can add another symbol layer:
Select the new symbol layer, add your letter/symbol and alter the Offset X,Y, so in your case it would just be the X.
6
here is a rough, general approach, with a few code examples (using jQuery/javascript):
Set up a couple of color styles for the markers (using circle markers here)
var blueMarker = {
radius: 8,
fillColor: "#0000ff"
};
var redMarker = {
radius: 8,
fillColor: "#ff0000"
}
Add the geojson features as L.circleMarkers, keeping track of each as a ...
6
For the sake of completion, as per https://github.com/Leaflet/Leaflet/issues/3199#event-230611315:
Simply add the layer directly to the map.
map.addLayer(layer)
The control layer function will pick this up and set the control buttons accordingly, regardless if the layer is included into the control. For example:
map.addLayer(layer1)
map.addLayer(layer2)
...
Only top voted, non community-wiki answers of a minimum length are eligible