I'm curious if anybody knows how to colour a specific country that no longer exists (i.e., Soviet Union) using MapBox's built-in function?
map.on('load', function () {
// Add source for country polygons using the Mapbox Countries tileset
// The polygons contain an ISO 3166 alpha-3 code which can be used to for joining the data
// https://docs.mapbox.com/vector-tiles/reference/mapbox-countries-v1
map.addSource('countries', {
type: 'vector',
url: 'mapbox://mapbox.country-boundaries-v1'
});
// Add filled county polygons for highlighted display.
map.addLayer(
{
'id': 'countries-highlighted',
'type': 'fill',
'source': 'countries',
'source-layer': 'country_boundaries',
'paint': {
'fill-outline-color': '#484896',
'fill-color': '#6e599f',
'fill-opacity': 0.75
},
// Display a single country
'filter': ['in', 'iso_3166_1', 'SU']
},
'admin-1-boundary-bg'
);
This works fine for a country like USA (ISO 3166-1: 'US'). However, nothing is displayed for former countries like the Soviet Union (ISO 3166-1: 'SU')
I would appreciate if anyone has accomplished this before or can recommend the optimal procedure.
For example, group all of the current countries that made up the former U.S.S.R. (although the border boundaries may not match perfectly)
Or, if there is a downloadable tileset that includes all former countries.
SU
Removed from ISO 3166-1 in 1992 when former USSR was divided into:
Armenia (AM, ARM, 051), Azerbaijan (AZ, AZE, 031), Estonia (EE, EST,
233), Georgia (GE, GEO, 268), Kazakstan (KZ, KAZ, 398), Kyrgyzstan
(KG, KGZ, 417), Latvia (LV, LVA, 428), Lithuania (LT, LTU, 440),
Republic of Moldova (MD, MDA, 498), Russian Federation (RU, RUS, 643),
Tajikistan (TJ, TJK, 762), Turkmenistan (TM, TKM, 795), Uzbekistan
(UZ, UZB, 860). NOTE: Belarus (BY, BLR, 112) and Ukraine (UA, UKR,
804) are not listed because they were separately coded in ISO 3166
already before the USSR was split.
Related
map.addSource('testLayer', {
'type': 'vector',
'source-layer': 'testLayer',
'tiles': [
'http://localhost:3004/{z}/{x}/{y}.pbf'
],
'minzoom': 0,
'maxzoom': 24,
});
map.addLayer({
'id': 'urban-areas-fill',
'source': 'testLayer',
// Custom styling based on filtering. Help needed here
});
Above pbf tile contains point data, along with height attribute. I want to collect height attribute of all the points within each tile, take an average of it per tile, use it for each individual point's height value (respective to that tile) to perform certain filtering (if else) and assign colours accordingly to display. Also, I want to convert the final rendering of each point as pixel (ie rectangle), and not as a circle. Thanks :)
I have custom sales territories that is build on group of zip codes.
How can I show this territories with different colors?
If the data for your custom sales territories is in a GeoJSON format, you can follow this example from the Mapbox GL JS documentation, which shows how to add a GeoJSON polygon to the map with a custom color. As shown in the linked example, you could add a source and layer for each of your sales territories, and then specify a color for each territory via the paint property of the layer object being added. So, for each of your territories, you would use the following code:
map.addSource('territory_name', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [ list_of_coordinates_defining_territory_boundaries ]
}
}
});
map.addLayer({
'id': 'territory_name',
'type': 'fill',
'source': 'territory_name',
'layout': {},
'paint': {
'fill-color': 'hex code of color to be used for this territory',
'fill-opacity': 0.8
}
});
Alternatively, you could upload your data as a tileset in Mapbox Studio and add said tileset as a layer to a custom map style, as described in this tutorial. The exact steps for this option are a bit more dependent on your underlying data format, but the Mapbox Studio Manual is an excellent resource for guidance on using Studio to create highly customized maps based on your own data.
I am using mapbox to try and query all features of the mapbox tileset and return them as geojson. From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures. My tileset only shows up at zoom 14 so I am having trouble querying all the features in the dataset at once and then applying a filter. Is this possible? It stills like querySourceFeatures returns an empty array.
function addLayers() {
map.addSource('plutonew-c03oxi', {
'type': 'vector',
'url': 'mapbox://samtpr.4ehwzn0r'
});
map.addLayer({
"id": "parcels_fill",
"type": "fill",
"source": "plutonew-c03oxi",
"source-layer": "plutonew-c03oxi",
'layout': {
'visibility': 'visible'
},
paint: {
'fill-color': 'blue',
'fill-outline-color': 'gray',
"fill-opacity": ["case",
["boolean", ["feature-state", "hover"], false],
0.5,
0
]
}
});
var features = map.querySourceFeatures('plutonew-c03oxi', {filter: ["==", ['get','ZIPCODE'], zipcode_val]});
From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures
You may have misunderstood. querySourceFeatures allows you to query features that are present within the vector tiles currently loaded and displayable within the current viewport and zoom level. Unlike queryRenderedFeatures they don't have to actually be rendered through a visible layer, however.
In this case it sounds like you're hoping to gain access to features that are not available at the current zoom level, which is not possible.
I am using the following code and it just doesn't work!!! Working with a point geoJson.
This same type of code DOES work for a polygon geoJson a few steps after.
js:
var points2 = L.geoJson(points2,{onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.popup);}}).addTo(map);
the relevant geojson:
var points2 = {"type": "FeatureCollection", "features":
[
{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.997208,40.743771]},"properties":{"cartodb_id":2,"description":"Private home","popup":"Casa Señora Arnao (Bernardo's 1st abode in NYC)","address":"228 West 22nd Street"}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.926637,40.858235]},"properties":{"cartodb_id":5,"description":"Urban scene","popup":"Couples kissing openly - \"I quickly realized that our presence didn’t matter to them….what a difference between our customs back home and the behavior of Puerto Rican men and women in New York!”","address":"Park at 191st Street and St-Nicholas Avenue"}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.95678,40.805015]},"properties":{"cartodb_id":4,"description":"Private home","popup":"Casa Familia León","address":"116th Street and Manhattan Avenue"}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.949677,40.797255]},"properties":{"cartodb_id":7,"description":"Political/Cultural meeting place","popup":"Park Palace","address":"3-5 West 110th Street"}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.9467,40.790554]},"properties":{"cartodb_id":8,"description":"Political/Cultural meeting place","popup":"Harlem Terrace","address":"210 East 104th Street"}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.948755,40.793271]},"properties":{"cartodb_id":9,"description":"Political/Cultural meeting place","popup":"Harlem Educational Center","address":"106th Street (between Park and Madison Aves)"}}
]}
What could be possible cause of the error and How can I fix it?
Thanks.
Newb alert: I'm completely new to OpenLayers 3 and mapping in general. My background is in SQL Server, and back end systems design. I have no experience in HTML, JavaScript, web development etc. I'm sure this is a very simple issue but I can't seem to figure out the details.
I've modified one of the samples for OpenLayers.org and it doesn't behave as expected. It uses a GeoJSON object and draws points on the map, but they don't end up where expected. Apparently there is some conversion or something that happens.
The sample I used is here: GeoJSON example
My test map is here: Test Map
The GeoJSON object is defined as
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-8.575653e6, 4.70681e6]
//White House, Washington DC Lon -77.03648269999997 Lat 38.89767579999999
}
}
]
};
Through a little trial and error, I was able to get my point to display on the White House Lawn (NSA has no doubt flagged this conversation) and there is no resemblance to the latitude and longitude I pulled from a different source. I understand that the order of coordinates is [lon, lat] but I can see no rhyme or reason that -77.036 = -8.575e6. The other point [0,0] displays right where I would expect it.
I have tried to figure this out myself and searched quite a few places, but I can't seem to find the answer.
Also, if you could direct me to any good tutorials, it would be most appreciated. Thanks!
Your GeoJSON data is in EPSG:3857, a different coordinate system than latitude/longitude. The coordinates are not equal, but represent the same geographical location.
See http://spatialreference.org/ref/sr-org/6864/ for information about EPSG:3857. The map there clearly shows the difference between a given points coordinates in the coordinate reference systems.
Openlayers actually allows you to convert these using the ol.proj functions.
For instance, to convert from lat/lon (EPSG:4326) to Spherical mercator ( EPSG:3857 - the one most online web maps use, in metres) you could do:-
var newCoordinates = ol.proj.transform(latLonCoordinate, "EPSG:4326", "EPSG:3857");
newCoordinates would then contain the converted values in a coordinates array. Same can be done for 'extents' (the box coordinates for top left/bottom right of a map view) using ol.proj.transformExtent(extent, fromProj, toProj).