I am currently using leaflet to show data, in general, it worked very well, but our PM wants the map background to be white instead of gray. Right now, the whole map is having gray background, I checked the document and can not find out solution at all about how to make the background white.
Thank you very much for your suggestions.
I saw this is caused by the tileLayer,
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + this.props.mapBoxToken, {
//attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.light'
})
.addTo(this.map);
here, if I remove the tileLayer, then background color can be seen. I googled a lot how to change the tilelayer color, but can not find out solution, hope to hear your advice.
If you look at Leaflet's CSS file carefully, you'll find these rules:
.leaflet-container {
background: #ddd;
outline: 0;
}
That's what makes the map's container background gray. Simply create another CSS rule overriding that.
e.g. if you're using <div id='my-leaflet-map'></div> as the map container, then something like
#my-leaflet-map {
background: pink;
}
controlled by map.id of the mapbox, https://www.mapbox.com/api-documentation/#maps
Related
I would need some information on list markers:
how can I change the opacity of the list and also the background color
how can I set the overflow so that if the markers in the list increase, they scroll through the
scrollbar?
Thanks
This is clearly not a leaflet element, to change the transparency of the object that you specified, you most likely need to change these properties in the css, try using DeveloperTools in the browser to find where this object takes the properties (transparency) from and you will know how to change it correctly.
Example
If I understand your question correctly, here is an approximate way to do what you ask in the first part of the question. Show your code what it looks like now.
.className {
background: white;
}
let marker = L.circle([50.0], [40.0]], {opacity: 1}).addTo(map),
marker.className = "className";
no I don't mean the transparency of the single marker but of the list, I send a photo in which the list is circled.
I don't know in which part of the library to act to give properties to this list element.
I have an openlayers map and a pin on the map.
I would like to get rid of this blue dot, which shows up when you hover over the pin.
There are many similar topics, but found guidelines did not bring me results.
I would also like to be able to move the image by mouse clicking on it anywhere
I try do that:
var selectedStyleFunction = function(feature, resolution) {
return [new ol.style.Style({
stroke: new ol.style.Stroke({
color: "white",
lineCap: "butt",
lineJoin: "bevel",
width:3
}),
fill : new ol.style.Fill({
color: "black"
}),
})];
};
//drag and drop
const dragInteraction = new ol.interaction.Modify({
features: new ol.Collection([marker]),
style: selectedStyleFunction,
});
This makes the dot is not visible at all, but then it is difficult to find it in the image.
My example is here: https://jsfiddle.net/anetka31/eo4prjgx/51/
Giving the interaction the same style as the marker will remove the blue dot. The pin icon should be anchored near the bottom left and the modify interactions only works on that position (unless pixelTolerance is set high, when it will also work outside the icon which would be confusing). Unlike modify a select interaction will work on any visible part of the icon. By adding a hover (pointermove) select interaction and a custom condition on the drag to check if any features have been picked by a hover the high pixelTolerance can be limited to just the icon. If you want the hover can also change the mouse pointer style to let you know it's over the icon (removing the need for the blue dot). Revised fiddle https://jsfiddle.net/vynk7Ld8/4/ (also updated from a very old version of OpenLayers 3 to OpenLayers 4)
In leaflet we have api calls and plugins to put placemarks, icons, images and geometric shapes. Yet I have no idea how to put just a piece of text. What do I do?
How about a L.Marker with a L.DivIcon?
Represents a lightweight icon for markers that uses a simple element instead of an image. Inherits from Icon but ignores the iconUrl and shadow options.
Reference: http://leafletjs.com/reference-1.2.0.html#divicon
new L.marker([0, 0], {
icon: new L.DivIcon({
html: '<h1>Some text...</h1>'
})
});
I have a application that shows a highlighted list of countries on a map and their names in a side panel
I would like to make the following happen: When you click on the name of a country in the side panel. you zoom to the country on the map.
I am not sure how to make this happen and would appreciate it if someone point me to an example or suggest the best way to make this happen
Really depends upon your set-up and I'am assuming you are using geoJSON. In a project I worked on, I created a function that is ran once you click from a list that zooms to the corresponding geoJSON ... or you could attach the leaflet ID for each geoJSON layer to the corresponding elements of the list if the list populated from the geoJSON.
markers - collected geoJSON
layer.feature.properties.pin - the corresponding key that matches the listed record with the geoJSON (this needs to match your data)
pin - the corresponding element from the list (this needs to match your data)
The 1st setStyle - highlights the geoJSON
map.fitbounds - zooms to highlighted info
The 2nd setStyle - changes all of the other geoJSON layers back to the original style.
function selectedparcel(pin){
markers.eachLayer(function (layer){
if (layer.feature.properties.pin === pin){
layer.setStyle({
fillColor: '#2262CC',
fillOpacity: 1,
weight: 3
});
//this is where the zoom happens
map.fitBounds(layer.getBounds());
} else {
layer.setStyle({
color: '#ff7800',
weight: 1,
opacity: 1,
fillOpacity: 0
});
}
});
I hope this is what you were looking for. If you want to use the leaflet id method Bryan McBride has an example within his js code here:
https://github.com/bmcbride/building-damage-reporter
I want to set markers on a Leaflet map. To achieve this I tried jquery-mobile-events with minor success. This is how I integrated it:
$(map).off('taphold');
$(map).bind('taphold', function(e, options){
... do something ...
});
It works on the desktop but not on mobile. 'map' is a L.map object. An other problem which is associated with it is that I can not get options.startPosition and options.endPosition. I need this to create a distinction between a long tap for panning the map and one to place a marker. Does anyone know a solution to this?
There is actualle a really neat implementation in Leaflet for this:
map.on('contextmenu', function(e){
.. do something ...
});
The problem is that it is also triggerd by clicking rightclick on desktop.
Edit: You can prevent it by checking if (event.button == 2) {...}