I am using mapbox custom style as tileLayer through leaflet. If I update the existing custom style from mapbox, then the changes(example: changing colors) are not visible on the map. It is visible only when I zoomed in or zoomed out. I guess it is cached.
My code:
L.tileLayer(
'https://api.mapbox.com/styles/v1/ffaudun/ckoydiulo2f9d17o1puc4c30f/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
tileSize: 512,
zoomOffset: -1
}).addTo(map);
I have also tried below solution without any success:
var genRandom = function() {
return Math.floor( Math.random() * 100000 ) + 1;
};
L.tileLayer(
'https://api.mapbox.com/styles/v1/ffaudun/ckoydiulo2f9d17o1puc4c30f/tiles/{z}/{x}/{y}?{randomNumber}&access_token=' + L.mapbox.accessToken, {
tileSize: 512,
zoomOffset: -1,
randomNumber: genRandom,
}).addTo(map);
first, we must check if it client cache (browser) by disabling cache from network tab in DevTools(F12),
then you can avoid browser cache by adding a new parameter at the end of the map URL for example (url.com?anyparameter=anyvalue) and change the value after any change in mapbox
Related
I am struggling with jsfiddle trying to create a running example which uses leaflet.
because I was not successful I searched for some examples and found the following one working:
http://jsfiddle.net/kedar2a/LnzN2/2/
I then copied the example in a new fiddle
https://jsfiddle.net/aLn3ut5z/1/
but it is still not working...
when inserting the external resources, there was the following error:
jsfiddle.net says:
You're loading resources over HTTP not HTTPS, your fiddle will not
work. Do you wish to continue?
any suggestions what is wrong here?
p.s.: below is the code of the jsfiddle windows:
HTML:
<div id="map"></div>
CSS:
#map {
height: 500px;
width: 80%;
}
JAVASCRIPT:
// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);
// Script for adding marker on map click
function onMapClick(e) {
var marker = L.marker(e.latlng, {
draggable: true,
title: "Resource location",
alt: "Resource Location",
riseOnHover: true
}).addTo(map)
.bindPopup(e.latlng.toString()).openPopup();
// Update marker on changing it's position
marker.on("dragend", function(ev) {
var chagedPos = ev.target.getLatLng();
this.bindPopup(chagedPos.toString()).openPopup();
});
}
map.on('click', onMapClick);
The Leaflet CDN doesn't support SSL yet. You can use something not requiring https, like playground-leaflet which is just a fork of JSBin with leaflet libraries easily selectable.
Alternatively, you could use Leaflet from cdnjs.net, which does support https.
I have the following Leaflet map: JSFiddle link
<div id="mapid" style="height: 300px;"></div>
<script>
var mapboxTiles = L.tileLayer(mapBoxUrl, {
attribution: attributionText
});
var map = L.map('mapid')
.addLayer(mapboxTiles)
.setView([42.888284, -78.877222], 16);
</script>
The font size for the street labels is very small, to the point of being unreadable, and when you zoom in, the font size gets smaller. Is there a way to control the font size?
It looks like you have 512px sized tiles, but mapping the Earth as if they were 256px sized.
Therefore you need a combination of tileSize and zoomOffset options on your Tile Layer to compensate for these settings, and retrieve the correct view with readable sized text on the tiles:
var mapboxTiles = L.tileLayer(mapBoxUrl, {
attribution: '© Mapbox © OpenStreetMap',
tileSize: 512,
zoomOffset: -1
});
Updated JSFiddle: https://jsfiddle.net/zq02pnpg/2/
I had this problem too. On my case, the map was rendering just okay on desktop, but when it came to mobile devices, it)(The font size) gets really small and is not readable.
I tried doubling the tile size as well as the zoom offset and it worked.
var mapboxTiles = L.tileLayer(mapBoxUrl, {
attribution: '© Mapbox © OpenStreetMap',
tileSize: 1024,
zoomOffset: -2
});
I'm not sure if this is a violation of any kind but it worked for me!
I am dynamically adding a leaflet map to a div. The map is only shown partially, see picture. Once I resize the browser window the map is completely shown. Is there a way around this? I tried some initial ideas, see // in code. But none of them worked.incomplete map
function mapThis(lat,long,wikiTitle){
var div_Id= "#wikiExtract"+wikiTitle
var map_Id= "map"+wikiTitle
$(div_Id).append("<div id='"+map_Id+"' style='width: 600px; height:
400px'></div>");
var map = L.map(map_Id).setView([lat, long], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-
SA</a>'
}).addTo(map);
//$("#"+map_Id).css( "height", "500px" );
//map.invalidateSize()
//$("#"+map_Id).hide()
//$("#"+map_Id).show()
//$(window).trigger('resize');
}
you can use this code :
it work find for me.
setInterval(function () {
map.invalidateSize();
}, 100);
If at least you have the map working (except for the incompleteness of tiles loading), you could simply call map.invalidateSize() once your map's div container is revealed / inserted into DOM with final size.
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.
If using JQuery, the following code updates the size once the document is ready:
$(document).ready(function () {
mymap.invalidateSize();
});
I am using mapbox.js to render a mapbox map. I am trying to load geojson from my server that contain either a country polygon or a city coordinates (lon,lat).
I have been able to style the country polygons but not the city points/markers.
I am not able to modify the geojson to use mapbox simplestyle
Here is the code executed when the page loads (I changed the mapbox map ID):
var southWest = L.latLng(-90, -360), northEast = L.latLng(90, 360);
var bounds = L.latLngBounds(southWest, northEast);
var map = L.mapbox.map('map', 'MapboxMapID', { zoomControl: false, infoControl: true, detectRetina: true, maxBounds: bounds, minZoom: 2, legendControl: {position: 'topright'}});
new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
map.fitBounds(bounds);
var locationsGroup = L.featureGroup().addTo(map);
and then when the user selects a country or city with a selectbox:
$("#select2-search-up").on("change", function (e) {
if (e.added) {
var location = L.mapbox.featureLayer().loadURL('/citiesCountriesID/' + e.added.id).on('ready', function(featLayer) {
this.eachLayer(function(polygon) {
polygon.setStyle({
stroke:false, fillColor:'red', fillOpacity:0.2
});
});
});
locationsGroup.addLayer(location);
} else {
locationsGroup.eachLayer(function (layer) {
if (layer._geojson[0]._id == e.removed.id) {
locationsGroup.removeLayer(layer);
}
});
}
});
Ideally I would like to display a different icon that the standard marker, but I could do with a small red square
Thank you for your inputs
In this example I did some circle markers but I'm pretty sure you can do other basic svg shps or your own .png pretty easy. http://bl.ocks.org/mpmckenna8/db2eef40314fe24e9177
This example from Mapbox also shows how to use a icon from their icon Library which has a lot of choices also. https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/
It might also help to see some of your geojson structure to see why it can't use simplestyle
In my bl.ocks example I loaded each of the geojson datasets separately
var begin = L.geoJson(start,{
pointToLayer:function(feature, latlng){
return L.circleMarker(latlng,{
radius:9,
fillColor: "orange",
fillOpacity:.7
})
}
})
Is how I set up my circles and I set a different L.geoJson to the other data which I left as the default markers.
I'm starting with Leaflet and I'm trying make a example with custom projection (EPSG:23030) to show a layer from WMS service. If I do not know the resolutions, how can I make it? I have this code, using the plugin Proj4Leaflet, but it doesn't work:
var crs23030 = new L.Proj.CRS('EPSG:23030','+proj=utm +zone=30 +ellps=intl +units=m +no_defs');
var map = new L.Map('map', {
crs: crs23030
});
L.tileLayer.wms('http://www.juntadeandalucia.es/servicios/mapas/callejero/wms', {
layers: 'CallejeroCompleto',
format: 'image/jpeg',
maxZoom: 13,
minZoom: 0
}).addTo(map);
map.setView(new L.LatLng(37.24344,-4.23522), 7);
If resolutions/scales are left out, it will default to the ones used by Leaflet's spherical Mercator implementation, which most likely will be a very bad fit for other projections.
What resolutions you use depends on the underlying tile server:
If it's a "true" WMS server, like GeoServer or similar, you can make up any resolutions that you like and are useful for your users. The WMS server will handle anything.
If it's a tile cache with a WMS interface, like GeoWebCache, you need to provide the resolutions defined in the tile server's configuration (the gridset in GWC terminology)
Also note that for a tile cache, you must also provide the gridset's origin, or Leaflet's request will not align with the cache's grid.
Ok, I understand you and I have tried this:
var crs23030 = new L.Proj.CRS('EPSG:23030','+proj=utm +zone=30 +ellps=intl +units=m +no_defs',
{
resolutions: [1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5]
}
);
and it works. I have concluded that if I doesn't know the resolutions, I must put it aproximately.
Thanks