my code:-
jQuery.sap.require( "sap.ui.vbm.AnalyticMap");
var oMap = new sap.ui.vbm.AnalyticMap({
width:"100%",
height: '100%',
plugin: false,
regions: {
template: new sap.ui.vbm.Region({
code: 'NA',
color: '#fff',
})
}
});
return new sap.m.Page({
title: "Maps",
content: [oMap]
});
I am trying to highlight a region on the map, but may be I am not following the API properly, any help is appreciated
You need to have the GeoJSON files for your region for them to be shown on the Map. The GeoJSON files are searched in the below places, in the given sequence as mentioned here.
server:port/sap/bc/vbi/geojson/L0.json
./media/analyticmap/L0.json
You will have to upload a GeoJSON file in the MIME repository on your gateway system. You can find many sources for GeoJSON on the Internet.
http://www.naturalearthdata.com/downloads/
http://www.gadm.org/country
However many of these sources will provide you with ShapeFiles. These contain geospatial vector data for defining regions on a map.
You will have to convert your shapefiles to geojson with GDAL or if you use QGIS(like me), GDAL will also installed alongside.
GDAL: http://www.gdal.org/
QGIS: http://www.qgis.org/en/site/forusers/download.html
You can run the below commands to converting a Shape File to GeoJSON
ogr2ogr -f "GeoJSON" target.json source.shp
Or if you would also like to define CRS
ogr2ogr -f "GeoJSON" -s_srs EPSG:3857 -t_srs EPSG:4326 target.json source.shp
You can create your own regions, using this geojson.io
Once you have your GeoJSON file, you can add them to the MIME repository or you can provide a path in your application to the target GeoJSON
sap.ui.vbm.AnalyticMap.GeoJSONURL = "/model/GeoJSON.json";
var oMap = new sap.ui.vbm.AnalyticMap({
width:"100%",
height: '100%',
plugin: false,
regions: {
template: new Region({
code: 'NA',
color: 'rgba(184,225,245,1.0)',
})
}
});
You can also refer to this article.
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 am trying to include a map in my application. I load data from a postgis database, where it is stored as wgs84. The data is loaded as geojson and displayed by open layers.
The problem is that the data is currently being projected somewhere in the ocean, I therefore suspect the data needs to be translated into a different coordinate system.
This is the code to create the map object:
var map = new ol.Map({
projection: 'EPSG:4326',
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
})
],
view: new ol.View({
center: ol.proj.fromLonLat([5, 52]),
zoom: 4
})
});
And this is the code I use to load the data:
function addObjectsToMap()
{
var vectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures( <?php print_r($object->getLocationsAsGeoJson()); ?> )
});
var vectorLayer = new ol.layer.Vector(
{
source: vectorSource
});
map.addLayer(vectorLayer);
}
I have already tried setting the coordinate system of the map to epsg:900913,
I tried adding this in the vectorLayer:
preFeatureInsert: function(feature)
{
feature.geometry.transform(new ol.proj.Projection("EPSG:4326"),new ol.proj.Projection("EPSG:900913"));
},
I tried adding: .transform('EPSG:4326','EPSG:900913') to the dataimport (where the vector source is created)
And I tried looping over the the data in my vectorsource like this:
vectorSource.getFeatures()[i].setGeometry(vectorSource.getFeatures()[i].getGeometry().transform(new ol.proj.Projection("EPSG:4326"),new ol.proj.Projection("EPSG:900913")));
I would really appreciate it if someone could point me in the right direction. Surely this is something common and should be very easy to deal with. But I cannot find anything about it in the documentation or examples of open layers.
The features can be transformed to the view projection using dataProjection and featureProjectiion options when reading the features
features: new ol.format.GeoJSON().readFeatures( <?php print_r($object->getLocationsAsGeoJson()); ?> , {
dataProjection: 'EPSG:4326',
featureProjection: map.getView().getProjection()
})
I followed
https://medium.com/#mrgrantanderson/https-medium-com-serving-vector-tiles-from-django-38c705f6
to serve the mvt tiles to the mapbox from geoDjango.
With running query
cursor.execute("SELECT ST_AsMVT(tile) FROM (SELECT osm_id, building, ST_AsMVTGeom(geom, TileBBox(%s, %s, %s, 3857)) FROM nepal_khokanabuildings ) AS tile", [zoom, x, y])
as my model project is ESPG:3857
The Vectors don't seem to load up on the map, the api request is working fine.
I also tried serving vector files from Geoserver no luck either.
Here is my JS File
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 12,
center: [85.294688,27.634106],
});
var mapillarySource = {
type: 'vector',
tiles: [
'http://0.0.0.0:8000/nepal/api/v1/data/nepal/{z}/{x}/{y}.mvt'
],
minzoom: 0,
maxzoom: 14
};
map.on('load', function() {
map.addSource('mapillary', mapillarySource);
map.addLayer({
'id': 'mapillary',
'type': 'fill',
'source': 'mapillary',
'source-layer': 'water',
'paint': {
"fill-color": "#00ffff"
}
});
});
map.addControl(new mapboxgl.NavigationControl());
</script>
There are lots of problems that can manifest themselves as "my layers don't show".
You can check each of these things:
is the layer being created before the map is ready? (wait for "load" event)
are the correct tile requests being generated?
are those requests succeeding?
are they returning actual .pbf files?
do they contain data in the right location, and in the right projection?
do they contain a layer with the name you expect? ('water' in this case)
do they contain data of the type you expect? (polygons in this case)
I am curious about the 0.0.0.0 host, but also suspect that the layer name may not be right.
If your tile requests are succeeding, you can try using https://stevage.github.io/vector-inspector/ to inspect them, although you may have issues with that page being served on HTTPS and your local tiles being on HTTP.
Use Following ,
"id": "postgis-tiles-layer",
"source-layer": "default",
I am using leaflet and geoserver. I want to fetch only required region using Web Map Service (WMS). I am able to fetch all of the region from geoserver. But what if I need only one region. I write the following code for show all the data;
//load data form geoserver
var mywms = L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", {
layers: 'tajikistan:country1',
format: 'image/png',
transparent: true,
version: '1.1.0',
attribution: "country layer"
});
mywms.addTo(map);
I want to add only one region (named as centre) from this server. I think I have to add the query in this dataset. But I don't know how can I query. Any help?
The WMS layer can be filtered by CQL_FILTER. Put option CQL_FILTER in code to filter required data;
L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", {
layers: 'tajikistan:country1',
format: 'image/png',
transparent: true,
version: '1.1.0',
attribution: "country layer",
CQL_FILTER: "name_rg='centre'",
});
I built a mapbox-gl js (v0.52) map where points are getting aggregated into clusters; much like in the clusters example from mapbox page.
The cluster color needs to be a function of an aggregation of individual points properties: For simplicity, say each point has a status property, which determine its color, and the color of a cluster should just be the color corresponding to the max of each of its points' status values.
Example geojson data would look like:
const geoData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
id: 'fakeid11',
status: 20,
},
geometry: {
type: 'Point',
coordinates: [-151.5129, 63.1016, 0]
}
},
{
type: 'Feature',
properties: {
id: 'fakeid22',
status: 10,
},
geometry: {
type: 'Point',
coordinates: [-150.4048, 63.1224, 105.5]
}
}
]
};
I am trying to use clusterProperties to compute the aggregation as described in the api docs, similar to this example from the source code, to create this layer:
map.addSource('earthquakes', {
type: 'geojson',
data: geoData,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50, // Radius of each cluster when clustering points (defaults to 50)
clusterProperties: {
status: ['max', ['get', 'status']]
}
});
This snippet is exactly like the clusters example from mapbox page, just replacing the data by my static 2-elements copy, and adding clusterProperties.
However this throws a validation error (a bit mangled from the minified mapbox-gl version):
Error: sources.earthquakes: unknown property "clusterProperties"
at Object.Jr [as emitValidationErrors] (modules.js?hash=34588b9e7240c1a9b3fd2f8685e299d9dbbb40d9:504146)
at De (modules.js?hash=34588b9e7240c1a9b3fd2f8685e299d9dbbb40d9:504150)
at i._validate (modules.js?hash=34588b9e7240c1a9b3fd2f8685e299d9dbbb40d9:504150)
What is wrong with this clusterProperties usage? It would seem it is simply refusing to validate this property. Note that the map works ok (without the status aggregated property of course) if I comment the last 3 lines that set it.
I found the answer days later: The version of react-map-gl we were using had dependency on mapbox-gl ~0.52.0, which did not yet support clusterProperties. Support for these aggregated properties comes in mapbox-gl 0.53. (And since the react wrapper uses undocumented features of mapbox-gl, they depend on exact versions at patch level). This was confirmed by the react library developers.
Now react-map-gl 4.0.14 is released and it works ok with clusterProperties, using internally mapbox-gl 0.53.0.