I am using the Mapbox template: DC Properties
I am calling 3 tiles, including the base tile.
I have another tile of markers, but I would like to change this to Leaflet dataset and clustering.
Having trouble integrating the Leaflet map and marker call into my Mapbox code below:
<script type="text/javascript">
var main = Map('map', {
api: 'http://a.tiles.mapbox.com/v3/test.map-j9pcd8xs.jsonp',
center: {
lat: 40.593000,
lon: -73.743126406355,
zoom: 10
},
zoomRange: [8, 15],
features: [
'zoomwheel',
'tooltips',
'movetips',
'zoombox',
'zoompan',
'share'
]
});
main.layers({
income: {api: 'http://a.tiles.mapbox.com/v3/test.incomedec3.jsonp',
center: {
ease: 500
}
},
Please help!
I have another tile of markers, but I would like to change this to Leaflet dataset and clustering.
That example is built using Modest Maps, you'll need to rewrite it to use Leaflet.
Related
I'm trying to plot a supplied vector tile layer onto a map using MapBox GL JS. I've followed the documentation here but nothing apart from the basic map is being output and there are no console errors. In the browser's Network tab I can see lots of .pbf requests being returned with data so it would seem that the endpoint is passing data back, but I don't know how to determine what the problem is in plotting that data onto the map.
The code is as follows:
mapboxgl.accessToken = '[my access token]';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 6,
center: [-0.118092, 51.509865]
});
map.once("load", () => {
map.addSource("ncn", {
type: "vector",
tiles: [
"https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id: "ncn-lines",
type: "line",
source: "ncn",
"source-layer": "NCN_Vector_Tile_Package",
"layout": {
"visibility": "visible"
},
'paint': {
'line-color': 'rgb(255, 0, 0)'
}
});
});
I am fairly sure that the type should be line (rather than fill) as the data is supposed to contain route lines rather than vector shapes.
I don't have access to the Arcgis server so can't see how anything is configured at that side. Can anyone suggest what might be wrong here and/or how to debug?
It looks like the value for source-layer is not correct - it should be NCN_2020. Here's a demo showing it working: https://jsbin.com/xunuhibuki/1/edit?html,output
How do you get that value? I'm not quite sure the best way, but the way I found: add ?f=html to your vector tile layer like this: https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/?f=html then click "Styles" link at the bottom which gives you an example of how to construct your map.addLayer() commands in your mapboxgl code.
I have published a shapefile as a vector tile on GeoServer according to this. Now, how can I add this layer to Mapbox?
I would be very pleased if you can help me.
I have been trying to get that to work and for a vector layer you must specify 'source-layer' attribute which is the name of a layer on your GeoServer (ie. 'states' if using topp workspace) here is a code example that eventually worked for me:
<script>
mapboxgl.accessToken =
'<YOUR MAPBOX TOKEN HERE>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-100, 40],
zoom: 12,
});
map.on('load', function () {
map.addSource('wms-test-source', {
type: 'vector',
// use the tiles option to specify a WMS tile source URL
// https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
tiles: [
'http://<YOUR GEOSERVER ADDRESS>:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=topp:states&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}',
],
'minZoom': 0,
'maxZoom': 14,
});
map.addLayer(
{
'id': 'wms-test-layer',
'type': 'fill',
'source': 'wms-test-source',
'source-layer': 'states',
'paint': { 'fill-color': '#00ffff' },
}
//'aeroway-line'
);
});
</script>
For more info go to GeoServer documentation at GeoServer - Mapbox Style Specification
The code provided at the link actually shows how to add the GeoServer layer to your Mapbox map. Assuming that you want to add the layer to your map with Mapbox GL JS (since your post is tagged with mapbox-gl-js, your code would look something like this:
mapboxgl.accessToken = /* YOUR MAPBOX ACCESS TOKEN HERE */;;
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
// Add the GeoServer layers as a source to your map.
map.addSource(
"<source-name>": {
"type": "vector",
"tiles": [
"http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS
&VERSION=1.0.0&LAYER=<workspace>:<layer>&STYLE=&TILEMATRIX=EPSG:900913:{z}
&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile
&TILECOL={x}&TILEROW={y}"
],
"minZoom": 0,
"maxZoom": 14
}
);
// Style the GeoServer source in order to display it visually on your map
map.addLayer({
'id': 'geoserver-layer',
'type': /* fill in based on options here: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#type */,
'source': '<source-name>'
/* Add any additional properties, full details here: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#type */
});
In short, the GeoServer documentation link provides the code for adding a source to your map, and then you should add a layer to style the source visually on your map.
I'd recommend taking a look at the many Mapbox GL JS examples to get a sense of how sources and layers can be added, styled, modified, etc.
I have an application in which I use mapbox.js to load basemap tiles for a location. Then user can load WMS tiles from a WMS server, of size 256X256 which get loaded on top of the basemap.
I am using mapbox and leaflet to display map as follow:
window.map = L.map('map', { 'minZoom': minZoomLevel(), 'maxZoom': maxZoomLevel(), reuseTiles: true, unloadInvisibleTiles: true }).setView(["35.7804", "-78.6391"], 17)
Then I am using Leaflet, to send requests to my server, and from there send request to WMS server to load tiles using this:
wms = L.tileLayer.wms('/viewers/wms', {
minZoom: 12,
maxZoom: 25,
layers: 'some layer name',
format: 'image/png',
updateWhenIdle: false,
transparent: true,
reuseTiles: true,
showTheRasterReturned: true,
COVERAGE_CQL_FILTER: 'featureId=\'' + featureId + '\''
});
By the time the request reaches my server, a BBOX attribute is added automatically by leaflet which has different co-ordinates (I think it is taking full viewport) i.e.
Started GET
"/viewers/wms?SERVICE=WMS&REQUEST=GetMap&VERSION=1.1.1&LAYERS=some
layer
name&STYLES=&FORMAT=image%2Fpng&TRANSPARENT=true&HEIGHT=256&WIDTH=256&REUSETILES=true&SHOWTHERASTERRETURNED=true&COVERAGE_CQL_FILTER=featureId%3D%279d3a23cba90680cecda337a926f563a6%27&SRS=EPSG%3A3857&**BBOX=-8755402.967897227,4285977.050006404,-8755097.219784087,4286282.798119542**" for 127.0.0.1 at 2018-06-27 16:51:01 -0400
A BBOX attribute is added by leaflet on the fly which are as follows
BBOX=-8755402.967897227,4285977.050006404,-8755097.219784087,4286282.798119542"
although, I want to get tiles only for these co-ordinates:
southWest ={lat: 35.77712238348847, lng: -78.64827990531921}
northEast {lat: 35.783693840245284, lng: -78.62991213798523}
setting up a BBOX option inside L.tileLayer.wms does not help either, as BBOX co-ordinates are added by leaflet.
Leaflet is working as expected.
You just have to remember that while Leaflet uses different Coordinate Reference Systems (CRSs) for the display projection and for L.LatLngs. You specify L.LatLngs (and bounds, etc) in EPSG:4326 (AKA equirectangular), and Leaflet will translate everything into EPSG:3857 (AKA Spherical Mercator).
Note how the URL for the WMS request includes a SRS=EPSG%3A3857 parameter (which means SRS=EPSG:3857 once URI-decoded). This means that Leaflet is providing coordinates in EPSG:3857, and expecting an image projected in EPSG:3857.
If you see no images, that likely means that your WMS server does not support EPSG:3857. Also, I encourage you to read through the Leaflet WMS/TMS tutorial, which highlights how to use different CRSs with WMS raster sources.
although, I want to get tiles only for these co-ordinates
Then use the bounds option of L.TileLayer.WMS. (If you don't see this option in the documentation, remember that L.TileLayer.WMS inherits options from L.TileLayer, which in turn inherits options from L.GridLayer)
Like so:
wms = L.tileLayer.wms('/viewers/wms', {
minZoom: 12,
maxZoom: 25,
layers: 'some layer name',
format: 'image/png',
updateWhenIdle: false,
transparent: true,
reuseTiles: true,
showTheRasterReturned: true,
COVERAGE_CQL_FILTER: 'featureId=\'' + featureId + '\''
bounds: L.latLngBounds([[35.77, -78.65],[35.78, -78.63]])
});
I need to create a circle around a point where a user clicks. How would I do this? Every tutorial shows extracting a circle from a geojson source and not creating one. Need to be able to edit the radius as well.
Did you try something yourself? Following the mapbox examples you should be able to get an idea of how to build something like that.
You would need to do 3 things:
Create a source that holds the data
Create a layer of type "circle" for displaying the data as circles
On every click of the user, extract the "latitude, longitude" and add a point to your data list. Then display all of those points as a circle on the map.
This is an example of how I would have coded that: https://jsfiddle.net/andi_lo/495t0dx2/
Hope that helps you out
mapboxgl.accessToken = '####';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
map.on('load', () => {
const points = turf.featureCollection([]);
// add data source to hold our data we want to display
map.addSource('circleData', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [],
},
});
// add a layer that displays the data
map.addLayer({
id: 'data',
type: 'circle',
source: 'circleData',
paint: {
'circle-color': '#00b7bf',
'circle-radius': 8,
'circle-stroke-width': 1,
'circle-stroke-color': '#333',
},
});
// on user click, extract the latitude / longitude, update our data source and display it on our map
map.on('click', (clickEvent) => {
const lngLat = new Array(clickEvent.lngLat.lng, clickEvent.lngLat.lat);
points.features.push(turf.point(lngLat));
map.getSource('circleData').setData(points);
});
});
#map {
height: 500px;
}
<div id="map"></div>
As of openlayers 3.11, raster reprojection is introduced. I used OSM as a background layer and it works perfectly on some projection, such as EPSG:25832. Now I need to work on another projection EPSG:2326 but it shows some white gaps between map tiles when zoomed into the map.
I created a jsfiddle for reference, can someone help? Thanks!
var myMap = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [837814, 818872],
projection: 'EPSG:2326',
zoom: 19
})
});
https://jsfiddle.net/86Lu9nd7/
This is a bug in OpenLayers. See https://github.com/openlayers/ol3/issues/4681 for its status.