I have a Vue application using Leaflet as a map library. On the map, I've added a toolbar using Leaflet Draw and a button with Leaflet EasyButton. I give an image in order to illustrate below:
Development
The problem has started to appear when I created a build version of my Vue application to save on my server. The Leaflet Draw icons do not appear anymore. Just the Leaflet EasyButton icon is showing.
Production
My code is as follows:
this.llmap = L.map('map-id', {...})
let vectorLayerDraw = L.featureGroup([])
this.llmap.addControl(new L.Control.Draw({
position: 'topright',
draw: {
...
rectangle: {
shapeOptions: {
color: '#000000',
opacity: 0.2,
fillOpacity: 0.1
}
}
},
edit: {
featureGroup: vectorLayerDraw,
poly: {
allowIntersection: false
}
}
}))
Would anyone know what can be happening?
Thank you in advance.
I was looking for the question on the internet and I've found the following solution:
.leaflet-draw-toolbar a {
background-image: url('../assets/spritesheet.png');
background-repeat: no-repeat;
color: transparent !important;
}
Where I add the image manually on my static folder and I overwrite the background-image.
Sources: 1 and 2
Thank you so much.
Related
I'm creating labels for polygons with the following code:
L.marker(polygon.getBounds().getCenter())
.bindTooltip('County Name', {permanent: true, direction: 'center'})
.addTo(mymap);
However, the result isn't exactly what I'd call centered. Like the majority of the tooltip is on the right side of the marker whereas I'd expect the marker to be smack dab in the middle of the tooltip.
Any ideas as to what I can do to improve the situation?
If I can get this working I'll hide the marker by doing {opacity: 0} but if I do that now it'll look off center without a frame of reference.
If you want to add labels to the polygon you can use instead customised Tooltip.
In your Javascript code :
let custom_popup = L.popup()
.setLatLng(polygon.getBounds().getCenter())
.setContent('County name')
.addTo(map);
Then you can customise to make it look like a Marker using CSS :
.leaflet-popup-close-button // we remove the X to close the popup
{
display: none;
}
.leaflet-popup-tip // We remove the arrow pointing at the coordinates
{
display: none;
}
.leaflet-popup-content // We center the text inside the Tooltip
{
text-align: center;
}
Here's the result :
In my Ionic app, I have a modal view. I want its background to be a CameraPreview block but it's not working when I set the toBack property to true.
Here are my cameraOptions:
public cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: 300,
camera: 'rear',
tapPhoto: true,
previewDrag: false,
toBack: true,
alpha: 1
};
When I set toBack to false, the cameraPreview works fine but I want to access my navbar and some buttons above the preview, so I need to find what doesn't work here.
I'll be happy to provide you with more info if needed.
Thanks!
Are you sure it is not hidden behind another HTML element?
have you tried setting the background-color?
html, body, .ion-app, .ion-content {
background-color: transparent;
}
Add this to page's constructor where you're using the camera.
document.body.style.backgroundColor = "transparent !important"
I was using a dark/light theme mode in my variables.scss and everywhere I tried to applying the
html, body, .ion-app, .ion-content {
background-color: transparent;
}
or
<ion-content [fullscreen]="true" [ngClass]="{'custom-ion-content': true}">
.custom-ion-content {
--background-color: transparent !important;
}
simply didn't work. This solved it for me.
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.
My JQPlot chart is currently rendering everything correctly, but the only issue is that the tick labels are being overlapped by the chart. Is there anyway I can offset the labels to prevent this from happening or a simple option change? I haven't found anything on the JQPlot website about this, so any help would be appreciated. Here's some sample code:
var moduleTypesChart = $.jqplot("moduleTypesChart",[moduleTypesCount], {
title:'<h2>Module Types Distribution</h2>',
seriesColors:["darkred"],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true, varyBarColor: false}
},
axesDefaults:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
angle: -15,
textColor:'black',
labelPosition:'middle',
fontFamily:"Arial",
fontWeight:"bold"
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: moduleTypes
}
},
grid: {
background:'Gainsboro',
gridLineColor:'LightSteelBlue'
}
You can do this by modifying the CSS.
In your jqPlot directory are two files: jquery.jqplot.css and jquery.jqplot.min.css
Inside is a CSS class for y-axis labels:
.jqplot-yaxis-label {
margin-right: 20px;
font-size: 11pt;
position: absolute;
}
You can increase the right margin to avoid overlapping with the ticks.
Remember to make sure to link to one of these files in the head of your HTML document, for example:
<link rel='stylesheet' type='text/css' href='/DHTML/jqplot/jquery.jqplot.css'>