I'm new working with mapbox, and recently I want to create a web map. I uploaded a shape into mapbox tilseset cloud, but when I try to add it into a map it doesn't display. This is the code funtion that I'm using:
map.on('load', function() {
map.addLayer({
'id' : 'Resguardos',
'type' : 'fill',
"source" : {
'type' : 'vector',
'url' : 'mapbox://fabiofz1990.9lhgml6c',
},
'layout' : {},
'paint' : {
'fill-color' : '#0044b2',
'fill-opacity' : 1
}
});
});
Thank you
You can add tilesets directly from the Mapbox studio.
Copy tileset URL.
Add URL like this. url: "mapbox://+tilesetid"
map.addSource('tileset_data', {
"url": "mapbox://abcqqq123.cklxcyxew1b9421lpb8shxf4x-2ikvs",
"type": "vector"
});
Add the source name from above source name "tileset_data" in your layer
and get source-layer from above picture.
map.addLayer({
'id': 'circles',
'type': 'circle',
'source': 'tileset_data',
'source-layer': 'children_obesity',
'paint': {
'circle-color': '#7F3121',
'circle-opacity': 0.75,
'circle-radius': 5
}
});
Then you good to go.
I think to display it you would need to add the tileset data to the style that your are using.
There is an option for that in your mapbox account at: https://www.mapbox.com/studio/tilesets/
you can NOT directly add mapbox TileSet into your browser client.
You have to create a new mapbox style, which use your tileSet.
This is working sample
https://transparentgov.net/cleargov1/766/new-2019-world-press-freedom-ranking-map-180-countries
https://transparentgov.net/json2tree/datahub.io/international/press-freedom-2019-mapbox-style.html
Related
I´m currently working on a project where I need to embed a WMS, which doesn´t support CRS:84 but many EPSG Versions. Here is the link to the WMS, which I need to include (the service is not controlled from our side).
I´ve already changed the crs parameter of the WebMapServiceImageryProvider to EPSG:4326, but that doesn´t adjust the bbox parameter to the correct values.
I hope that someone could help me to change the CRS in my cesium project.
I´m happy for any help.
The Answer to my problem was to change the tilingScheme Parameter of the WebMapServiceImageryProvider to the WebMercatorTilingScheme.
new WebMapServiceImageryProvider({
url: new Resource({
url:
'https://haleconnect.com/ows/services/org.868.3ece34f2-a7fc-4135-a1e6-a339add3142c_wms',
}),
parameters: {
TRANSPARENT: true,
STYLES: 'default',
VERSION: '1.3.0',
SERVICE: 'WMS',
FORMAT: 'image/png',
},
tilingScheme: new WebMercatorTilingScheme(),
layers: 'PS.ProtectedSite',
crs: 'EPSG:3857',
}),
I'm working on a choropleth map that shows the share of the population that has confirmed positive case of Covid-19 in each political jurisdiction. Similar to this example in the per capita Mapbox graphic on this page of the The New York Times.
I figured out just about every detail expect how to customize the legend. Currently, the labels display the shareOfPop as a number. Though, I want to prefix each label with "1 in ${shareOfPop}", and to add a suffix to the final label "1 in ${shareOfPop} or more".
enter image description here.
I've created this map in an Observable Notebook.
Things I've tried so far...
Making us of the custom legend encodings
To specify label text:
vl.color()
.fieldQ('shareOfPop')
.scale(
{
scheme: "yelloworangered",
domain: [250, 10],
clamp: true,
}
)
.legend({
title: "Share of Pop.",
encode: {
labels: {text: "1 in ${datum.value}"}
}
})
Register a custom formatter
Which I doubt I've accomplished correctly.
Here's what my configuration looks like (which is based on the config in the Introduction to Vega-Lite notebook).
vl = {
const [vega, vegalite, api, tooltip] = await Promise.all([
'vega#5.13.0',
'vega-lite#4.14.1',
'vega-lite-api#0.11.0',
'vega-tooltip#0.22.1'
].map(module => require(module)));
const options = {
config: {
// allow custom format types
customFormatTypes: true,
config: {
view: {continuousWidth: 400, continuousHeight: 300},
mark: {tooltip: null}
}
},
init: view => {
// initialize tooltip handler
view.tooltip(new tooltip.Handler().call);
// enable horizontal scrolling for large plots
if (view.container()) view.container().style['overflow-x'] = 'auto';
// register a custom expression function...am I doing this right???
vega.expressionFunction('1inX', function(datum) {
return `1 in ${datum}`
})
},
view: {
// view constructor options
loader: vega.loader({baseURL: 'https://cdn.jsdelivr.net/npm/vega-datasets#1/'}),
renderer: 'canvas'
}
};
return api.register(vega, vegalite, options);
}
Then I specify this custom formatType when defining the mark:
vl.color()
.fieldQ('shareOfPop')
.scale(
{
scheme: "yelloworangered",
domain: [250, 10],
clamp: true,
}
)
.legend({
title: "Share of Pop.",
formatType: "1inX",
})
)
Neither of these approaches produced any noticeable change.
Gonna answer my own question here.
Turns out Legend has a general labelExpr property that allows you to specify a Vega expression for customizing the label.
In my case, I wanted to always prepend the string "1 in ", and also append "+" when over may domain limit. Here's how I did it using the join() and if() functions.
...
vl.color()
.legend(
{
labelExpr: "join(['1 in ', datum.value, if(datum.value >= 250, '+', '')], '')"
}
)
This property isn't documented for Legend, though it is for for Axis).
I would like to remove Facilities in the layerlist, but still have it show up in the map.
var manned_facilities_back = new MapImageLayer({
url: "http://dotdevgisiis02:6080/arcgis/rest/services/DOT_MAP_PORTAL/Facilities/MapServer",
sublayers: [
{
id: 1,
popupTemplate: templateFT,
},
{
id: 0,
popupTemplate: templateMF,
},
]
I've attempted to add
listmode: hide
or
display: none
under where i have url, but it didn't work. I figure this should be really simple.
Setting the property Layer.listMode to "hide" should work as expected. In your example, make sure you use the correct casing:
var layer = new MapImageLayer({
url: "http://dotdevgisiis02:6080/arcgis/rest/services/DOT_MAP_PORTAL/Facilities/MapServer",
listMode: "hide"
});
Here's a live demo hiding one of the layers from the loaded WebScene:
https://codepen.io/arnofiva/pen/eb198c9b4050b892759ef433e8664fac
when i search through zip-code, i want to draw boundaries like this http://www.apartments.com/new-york-ny-10128/ or http://streeteasy.com/for-sale/battery-park-city
I am using below code for testing purpose but this isn't working. URL link doesn't exist any more.
var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'with_kml'}}, function(){
var kmls = handler.addKml(
{ url: "http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml" }
);
})
Currently i am using gmaps4rails gem to add markers so is it possible to add region boundaries using gmaps4rails ?
Please Help!
Here is the documentation that show how to display KML using Google-Maps-for-Rails.
<%= gmaps( :kml => {:data => '[{ url: "http://www.searcharoo.net/SearchKml/newyork.kml"},
{ url: "http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml",
options: {clickable: false } }]' } ) %>
For more information about gmaps4rails, check these github:
Gmaps4rails
apneadiving/Google-Maps-for-Rails
It's possible to set url parameter in json to open link in same window?
target: "_parent"
not work, opens link in new tab/window
Thanks
I think this should work:
target: "_self"
its working see this code:
var headerItems= {
items: [
{
actionId:'logout',
href:'Logout.jsp',
label:'Log Out',
target: "_self"
}
]
};
Try the below one instead of target and all
{
name: 'logout',
isLabel: true,
url: 'Logout.jsp',
icon: 'fa fa-exclamation-triangle',
}