I am use leaflet-directive to create map using leaflet.
Is it possible to remove leaflet link and OSM copyright from the map.
I wish to put in leaflet image instead.
When creating the map object, try this:
var map = L.map('map', { attributionControl:false });
It worked for me
A reference to the attribution control instance is being stored in the attributionControl property of your L.Map instance:
var map = new L.Map('map').setView([0, 0], 0);
attribution = map.attributionControl;
When you've got that you can use the setPrefix method to set a new prefix:
attribution.setPrefix('<img src="image.png">');
http://leafletjs.com/reference.html#control-attribution-setprefix
It's probably not legal to remove copy-right information, but if you're familiar with javascript search in the leaflet code for
'leaflet-control-attribution'
Greetings
Related
I added a basic icon instance to my map, but cannot figure out how to give it a custom image. (I closely followed this example . After some digging, I have found examples on Mapbox's own page with code showing how to add custom images but it looks like they are adding markers as layers (with GeoJSON sources). It seems like so much code just to have a custom image. My code just looks like this :
var marker = new mapboxgl.Marker()
.setLngLat([-99, 30])
.addTo(map);
Is there a way to add my own image (PNG) for example? I have searched though the options for marker instances at the Mapbox documentation at this link but I can't find any information there.
Just try this...
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://path_to_your_icon/icon.png)';
el.style.width = '50px';
el.style.height = '50px';
new mapboxgl.Marker(el)
.setLngLat([-99, 30])
.addTo(map);
I want to show a single world map and wrap it around so that each area is shown only once on the screen. Please refer the fiddle http://jsfiddle.net/8m13d6vs/
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl, {
noWrap: false,
attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
});
var map = L.map('map').setView([0, 0], 1).addLayer(osm);
In the above fiddle, wrap is on, but the world map is duplicated. I want a single world map, and on left/right mouse drag, it should wrap around. It should be responsive to the area as well. Is there any way to achieve this? Hope my problem statement is understandable.
There's the Leaflet worldCopyJump option:
var map = L.map('map', {worldCopyJump: true}).setView([0, 0], 1).addLayer(osm);
It defaults to false, but setting this to true will copy the contents of the map over as the user pans beyond the map boundaries.
This sounds like a misunderstanding of the definition of "wrap":
In the context of Leaflet's Tile Layer / Grid Layer option noWrap, it says:
Whether the layer is wrapped around the antimeridian. If true, the GridLayer will only be displayed once at low zoom levels.
So it sounds like simply noWrap: true should achieve your objective.
Updated JSFiddle: http://jsfiddle.net/8m13d6vs/3/
BTW you should consider upgrading Leaflet version to 1+
In my web application, I'm using leaflet and I want to change layer of leaflet to satellite view and other map views using layer switch. How can I perform this.Please help!
You need to be a little more specific with your questioning...that said, something like this might help.
var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"),
mqi = L.tileLayer("http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png", {subdomains: ['otile1','otile2','otile3','otile4']});
var baseMaps = {
"OpenStreetMap": osm,
"MapQuestImagery": mqi
};
var overlays = {//add any overlays here
};
L.control.layers(baseMaps,overlays, {position: 'bottomleft'}).addTo(map);
I want type of map in a map that I create. I use leaflet and mapbob, but I dont know how change the type of map.
var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-zr0njcqy/{z}/{x}/{y}.png', {
attribution: 'Terms & Feedback'
});
How I change the content tileLayer by one create for me?
Thank you!
Like this:
// Provide your access token
L.mapbox.accessToken = 'pk.yyyyyyyyyyyyyyyy';
// Create a map in the div #map
L.mapbox.map('map', 'jonataswalker.kieo57jb'); //put yours here
I am looking for solution to add filter (not checkbox) to my site. I have this code loading blank map from Mapbox and added Markers from JSON file. I was trying to add setFilter function, but probably I am using it wrong. I would like to filter items by category property from my JSON file.
<script>
L.mapbox.accessToken = '*************';
var baseLayer = L.mapbox.tileLayer('test****');
var markers = L.markerClusterGroup();
// CALL THE GEOJSON HERE
jQuery.getJSON("locations.geojson", function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
// USE A CUSTOM MARKER
layer.setIcon(L.mapbox.marker.icon({'marker-symbol': 'circle-stroked', 'marker-color': '004E90'}));
// ADD A POPUP
layer.bindPopup("<h1>" + feature.properties.title + "</h1><p>" + feature.properties.description + "</p><p><a href=' + feature.properties.website + '>" + feature.properties.website + "</a></p>");
layer.on('mouseover', function (e) {
this.openPopup();
});
layer.on('mouseout', function (e) {
this.closePopup();
});
}
});
markers.addLayer(geojson);
// CONSTRUCT THE MAP
var map = L.map('map', {
searchControl: {layer: markers},
zoom: 6,
center: [51.505, -0.09],
maxZoom: 13
})
.setView([62.965, 19.929], 5)
.fitBounds(markers.getBounds());
baseLayer.addTo(map);
markers.addTo(map);
L.control.fullscreen().addTo(map);
});
</script>
Could you please help me add filter buttons (something like here: https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-markers)
PS: I think I tried all examples from Mapbox website, yet seems my skills are very limited here.
Thank you
I was trying to add setFilter function, but probably I am using it wrong. I would like to filter items by category property from my JSON file.
This code example is using L.geoJson to load the markers into your map. Like the Mapbox example, you'll need to use L.mapbox.featureLayer instead, since it includes the setFilter function and L.geoJson does not.
tmcw's answer is correct, L.mapbox.featureLayer is confusing
this tutorial helped me!
https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker-tooltip/