I am creating one application in which i am using CartoDB library for creating layer on map as like creating multi polygon on map.
I created the polygon as well and working fine but its all are in red color.
But i want to apply css file for that CartoDB Map layer for multiple color theme. So any body having any idea for applying this css in map layer?
I am drawing polygon by calling CartoDB API and its SQLQuery.
I am calling below api by using NSURLSession.
NSString *fullUrl = [NSString stringWithFormat:#"https://test.carto.com/api/v2/sql?q=%#&format=GeoJSON&api_key=60a3b14b8d005c59016a3fc25f11",encodeQuery];
So any idea for passing CSS with url or any else way to access CSS file?
Thank you.
About the same dataset you can create two layers with different style from a given parameter structure_count.
sublayers: [{
sql: "SELECT * FROM base_polygon",
cartocss: '#base_polygon{polygon-opacity: 1;line-color: #FFF;line-width: 1;line-opacity: 1;}#base_polygon[structure_count <= 8000] {polygon-fill: #a50f15;}#base_polygon[structure_count <= 5000] ...'
},
sql: "SELECT * FROM base_polygon",
cartocss: // other style
}]
Related
The Angular Material CDK library provides various features including overlays. All the examples I can find show how to display a new component on top of the overlay. My goal is a little different. I want to display an existing component (one of several on the screen) on top of the overlay.
The behavior I have in mind is that when the user goes into a kind of editing mode on a particular object, the component representing that object would sort of "float" on top of an overlay, until editing is done or cancelled.
Is there any straightforward way to do that? It seems that the cdkConnectedOverlay directive might be useful, but I can't figure out how to make it work.
Angular CDK Provides you two ways to achieve that (Directives and Services).
Using the Overlay service you will need to call the create method passing the positionStrategy prop:
#Component({
....
})
class AppComponent {
#ViewChild('button') buttonRef: ElementREf;
...
ngOnInit() {
const overlayRef = overlay.create({
positionStrategy: getOverlayPosition(),
height: '400px',
width: '600px',
});
const userProfilePortal = new ComponentPortal(UserProfile);
overlayRef.attach(userProfilePortal);
}
getOverlayPosition(): PositionStrategy {
this.overlayPosition = this.overlay.position()
.connectedTo(
this.buttonRef,
{originX: 'start', originY: 'bottom'},
{overlayX: 'start', overlayY: 'top'}
)
return this.overlayPosition;
}
...
}
I made an example to show you how to use the CDK overlays services and classes.
Overlay demo
If you prefer the directive way Look at this medium article and check the examples applying the directive way:
Material CDK Overlay with RxJS
I would like to display one data point for Custom Units Scrollable graph (Custom Units Example). Is it possible to do it with this library?
I have looked into issues and the library to check and I only see [ChartAxisValue] array to create ChartAxisModel (i.e. xModel an yModel), no function to only add one ChartAxisValue for each. Would really appreciate your input. Here is an example of a function that I see w/ [ChartAxisValue]: ChartAxisModel(axisValues: [ChartAxisValue], lineColor: UIColor, axisTitleLabel: ChartAxisLabel, labelsConflictSolver: ChartAxisLabelsConflictSolver, leadingPadding: ChartAxisPadding, trailingPadding: ChartAxisPadding, labelSpaceReservationMode: AxisLabelsSpaceReservationMode, clipContents: Bool)
Would really appreciate your input.Thank you!
Link to Swift Charts: https://github.com/i-schuetz/SwiftCharts
So I use Openlayers 3.9.0 and I use a loader to get a vector layer from Geoserver. Here is the code that currently works.
var sourceVector = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent) {
$.ajax('http://localhost:5550/geoserver/mymap/wfsservice=WFS&version=1.0.0&request=GetFeature&typeName=mymap:mylayer&outputFormat=application/json',
{type: 'GET'})
.done(
function(response) {
var geojsonFormat = new ol.format.GeoJSON({});
sourceVector.addFeatures(geojsonFormat.readFeatures(response,{dataProjection :projection,featureProjection : projection}));
})
.fail(function () {alert("BAD");});
},
strategy: new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20}))
});
By setting a maxFeatures (...&maxFeatures=50&...) to my url I dont get all the features. Does this means that if I zoom in I will see more features and if I zoom out I will see less? Is maxFeatures related to the bbox and renders features according to the current map view and zoom levels? Or this isnt the concept? Because in my case , I always see a fixed number of features.
Thanks
The loader function of an ol.source.Vector is called with an extent, a resolution and a projection. The semantic expectation is that the loader function is responsible for loading all features within that extent.
ol.source.Vector maintains a history of all loaded extents, and will not try to load an extent that is within the already loaded extents.
So if you use the tile loading strategy at a low zoom level, and your maxFeatures causes some features to be ignored, zooming in will not make them appear (because loading that extent should already have been done be the parent tile load).
Because of this, using the WFS parameter maxFeatures with ol.source.Vector is generally a bad idea. If you really need to limit the number of features per request, consider limiting your layer to higher zoom levels or making several request for each loader call.
Additionally, your loader code does not use the extent parameter, making each request identical. Your loaders only responsibility is to load the features within the given extent. If you want to load all features independently of their location, use the all loading strategy.
I have an application built in OL3 and geoserver. I am using bootstrap and jQuery in my application.
I am trying to print the maps in pdf. I have OSM as a base layer in my application and other layers come from my local geoserver.
Now I have a situation where I need to print my map in pdf(with all the visible layers and OSM layer).
I have installed printing plugin in my geoserver and it works fine I have tested my printing module with the following codes:
http://localhost:8080/geoserver/pdf/print.pdf?spec={
"layout":"A4 portrait",
"srs":"EPSG:4326",
"units":"degrees",
"dpi":300,
"outputFilename": "map",
"mapTitle":"This is the map title",
"layers":[
{
"baseURL":"http://localhost:8080/geoserver/genesis/wms",
"opacity":0.5,
"singleTile":false,
"type":"WMS",
"layers":["District_Boundary", "DevelopmentRegions"],
"format":"image/png",
"styles":[]
}
],
"pages":[
{
"center":[84.25,28.1],
"mapTitle":"",
"comment":"",
"scale":4000000,
"rotation":0
}
] }
But the problem is how should I print my OSM layer in this?? I am not using Extjs in my application so I don't want to use that just for my printing functionality.
Can anyone suggest how should I do with just jQuery and bootstrap and plain javascript without Extjs??
Thanks.
You just need to add osm as another layer to your request payload like this
http://localhost:8080/geoserver/pdf/print.pdf?spec={
"layout":"A4 portrait",
"srs":"EPSG:4326",
"units":"degrees",
"dpi":300,
"outputFilename": "map",
"mapTitle":"This is the map title",
"layers":[
{
"baseURL":"http://a.tile.openstreetmap.org",
"maxExtent":[
//your extent of map in the correct projection
],
"tileSize":[
256,
256
],
"extension":"png",
"type":"OSM",
"opacity":1
},{
"baseURL":"http://localhost:8080/geoserver/genesis/wms",
"opacity":0.5,
"singleTile":false,
"type":"WMS",
"layers":["District_Boundary", "DevelopmentRegions"],
"format":"image/png",
"styles":[]
}
],
"pages":[
{
"center":[84.25,28.1],
"mapTitle":"",
"comment":"",
"scale":4000000,
"rotation":0
}
] }
You need to change the extent based on your need
Once you send the request Geoserver will populate the osm tiles and put it on the map
Be aware that you should put the osm layer before other layers in your json string otherwise it will be placed on top of other layers in the printed map.
Geoserver Print plugin works only on geoserver data. In your case, you should handle OSM data as a layer in your geoserver instance. There is no possibility to just "proxy" OSM tiles through geoserver, you have to import OSM data into your database. Please check this article:
http://blog.geoserver.org/2009/01/30/geoserver-and-openstreetmap/
When you are using OL3 (canvas support), you can consider browser-side printing. It is very simple to get image from canvas:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
You can also generate PDF in JavaScript using:
https://github.com/MrRio/jsPDF
I'm trying to get the current center of an Openlayers map in lat/lon coordinates. I've got the following event handler setup:
this.map.on('pointermove', function (e) {
if (e.dragging) {
console.log(that.map.getView().getCenter());
}
});
This works, but I'm getting weird values. Here's an example:
[9318218.659044644, 3274618.6225819485]
Those are obviously not lat/lon values :) Do I need to transform this somehow? Thanks!
I'm not super familiar with openlayers but it sounds like the map is in different projection.
Check out the following on spherical_mercator, transform,
Open Layers projections
UPDATED
I've done a little more research, check out this example. Not sure what the projection your view is in. the map in this example is in ''EPSG:21781' if you go to a js console and enter map.getView().getCenter() you get [693230.7161150641, 179010.3389264635] but if you enter ol.proj.transform(map.getView().getCenter(), 'EPSG:21781', 'EPSG:4326') you get [8.658936030357363, 46.75575224283748] hope that helps.
For those who are working with angular.
Also, I would consider searching the projection of the map, instead of entering it manually.
import * as olProj from 'ol/proj'
import Map from 'ol/Map'
// ...
olProj.transform(
this.map.getView().getCenter(),
this.map.getView().getProjection(),
'EPSG:4326',
)
Update for OpenLayers 6 (assuming your map is called 'map') the following gives an array of [lon, lat] for the centre of your map's view.
ol.proj.toLonLat( map.getView().getCenter() )