I used openlayers clustter strategy to cluster a dataset from a geoserver.
I used the following code in styling of clusters.
var myStyle = new OpenLayers.Style( {
pointRadius :20,
fillColor :'#FFFF00',
fillOpacity :0.5,
strokeColor :'#FFFFFF',
strokeWidth :2,
strokeOpacity :0.5
});
var myStyleMap = new OpenLayers.StyleMap( {
"default" :myStyle
});
This works nicely if I write the code in html pages and also in jsp pages.
when I want to change the cluster radius dynamically according to the data point count in each cluster I just had to do the following change to the above code.
var myStyle = new OpenLayers.Style( {
pointRadius :"${radius}",
fillColor :'#FFFF00',
fillOpacity :0.5,
strokeColor :'#FFFFFF',
strokeWidth :2,
strokeOpacity :0.5
}, {
context : {
radius: function(feature) {
return Math.min(feature.attributes.count, 7) +3;;
}
}
});
var myStyleMap = new OpenLayers.StyleMap( {
"default" :myStyle
});
This also woks fine, if I write the code in an html page.
But, when I wanna use the above second code in jsp pages, it gives me the mozilla firebug error => Unexpected value parsing r attributes.
can someone help me?
thanks in advance!
From JSP2 spec you should be able to escape the EL
With something like :
${'${'}radius} in your JSP page
Good luck.
Related
I have a SAPUI5 Fiori application.
I use theme sap_fiori_3 as the base theme.
I customized this theme and only attached a background image to the theme.
The interesting part is when I activate this customized theme (that only has an extra background image in comparison to original sap_fiori_3 theme), the dialog are not centered in my app anymore.
The dialog are made with sap.m.dialog class.
I wrote a small snippet of code to center the dialog like following:
onAfterDialogOpen: function(oEvent){
var oDialog = oEvent.getSource(),
$Dialog = oDialog.$(),
oPosition = $Dialog.position(),
iTop = oPosition.top,
iLeft = oPosition.left,
iDialogWidth = $Dialog.width(),
iDialogHeight = $Dialog.height(),
iScreenWidth = sap.ui.Device.resize.width,
iScreenHight = sap.ui.Device.resize.height,
iNewTop = Math.floor((iScreenHight-iDialogHeight)/2),
iNewLeft = Math.floor((iScreenWidth-iDialogWidth)/2);
if(Math.abs(iNewLeft-iLeft) > 10 & Math.abs(iNewTop-iTop) > 10){
$Dialog.offset({top: iNewTop, left: iNewLeft});
}
},
But it is not a good solution. Why? Because it makes a motion on my screen like following:
Now the question is, how can I center the dialog without Java Script and by settings or some other tricks that when the dialog is opened, it be already centered.
Please note that using onBeforeOpen event is not possible as I need the size and position of the dialog!
I finally found out what is the source of the problem. It seems the Theme Designer of SAP is buggy and some part of the theme code does not transfer to the exported file.
When I use the theme designer to customize the theme it not only made the mentioned error, but also some other strange behavior appear in the deployed applications in the fiori launchpad which use the customized theme. However, we don't have those errors in the development time in the WEB IDE.
Therefore as I only needed to customize the following items:
background image
logo
favicon
I tried to use the standard theme like sap_fiori_3 and work around for setting these properties.
So for the first 2 issues I used the CSS hack:
div.sapUShellFullHeight {
background-image: url(../images/myBackgroundImage.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: right;
}
a#shell-header-logo > img#shell-header-icon {
content:url(../images/logo.svg);
}
And for the favicon I used the promise solution. Please notice in the fiori launchpad each time that you switch between the applications fiori will reset the favicon, so I used the JavaScript promise to set it.
// Set the favicon dynamically to get read of blinking
function waitForElementAppear(selector) {
return new Promise(function(resolve, reject) {
var element = document.querySelector(selector);
if(element) {
resolve(element);
return;
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var nodes = Array.from(mutation.addedNodes);
for(var node of nodes) {
if(node.matches && node.matches(selector)) {
observer.disconnect();
resolve(node);
return;
}
};
});
});
observer.observe(document.documentElement, { childList: true, subtree: true });
});
}
//
function waitForElementRemoved(selector) {
return new Promise((resolve) => {
var element = document.querySelector(selector);
if(!element) {
resolve();
return;
}
var observer = new MutationObserver((mutations, observer) => {
for (const mutation of mutations) {
for (const removedNode of mutation.removedNodes) {
if (removedNode === element) {
observer.disconnect();
resolve();
}
}
}
});
observer.observe(element.parentElement, { childList: true });
});
}
//
function changeFavIcon(selector) {
waitForElementAppear(selector).then(function(element) {
element.setAttribute("href", "icon/favicon.ico");
waitForElementRemoved(selector).then(function() {
changeFavIcon(selector);
});
});
};
changeFavIcon("link[rel='shortcut icon']");
It recursively checks when the favicon is injected then it will set its href and as soon as it is removed, this function will observe the next injection!
As I know somebody may says why not used sapui5 its original solution for setting the favicon, like this:
jQuery.sap.setIcons({
'phone': '/images/cimt-logo.png',
'phone#2': '/images/cimt-logo.png',
'tablet': '/images/cimt-logo.png',
'tablet#2': '/images/cimt-logo.png',
'favicon': '/icon/favicon.ico',
'precomposed': true
});
I must say it was not working in my case!
I am able to draw the Map with maneuverPoints.
Below is the screen shot for map
Below is the code for the routing.
var maneuverPoints = this.model.get("maneuverPoints");
if (maneuverPoints) {
var routePoints = [];
_.each(maneuverPoints, function (point) {
routePoints.push(new MsMaps.Location(point.latitude, point.longitude));
});
var routeOptions = {
strokeColor: new MsMaps.Color(1, 65, 255, 35),
strokeThickness: 3
};
var routeShape = new MsMaps.Polyline(routePoints, routeOptions);
map.entities.push(routeShape);
}
Now I am trying to implement clustering and I am able to do it as below:
The pink pushpins are the clusters.
Code for clustering is as below:
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins);
map.layers.insert(clusterLayer);
clusterLayer.setPushpins(pushpins);
map.setView(viewOptions);
var maneuverPoints = this.model.get("maneuverPoints");
if (maneuverPoints) {
var routePoints = [];
_.each(maneuverPoints, function (point) {
routePoints.push(new MsMaps.Location(point.latitude, point.longitude));
});
var routeOptions = {
strokeColor: new MsMaps.Color(1, 65, 255, 35),
strokeThickness: 3
};
var routeShape = new MsMaps.Polyline(routePoints, routeOptions);
map.entities.push(routeShape);
}
I am not able to do clustering and routing at same time. Is it possible to do both at same time?
Your code isn't doing routing by the looks of things, it is simply taking route line points and rendering them as a polyline. I don't see the directions module being used in your code. If you are using that directions module, why don't you simply use the built in rendering? You can customize how it looks. If you continue using a polyline as you are, consider adding it to a layer, it will make it easier to manage later.
That said, the code you provided is simply clustering and drawing a polyline. This works fine when I test this scenario.
Any reason why you are calling setPushpins in the cluster layer? You already passed the pushpins in when creating the layer, no need to pass them in again.
Im trying to make a graph like this:
https://www.google.com/finance?q=BCBA:PAMP
I have a line chart in chart.js, now I want to add labels (like the letters A, B, C) for certain dates.
Can't find a doc/example to start from. Any idea?
If its more simple to do with another library a recommendation is more than welcome.
Thanks!
Unfortunately, there is no native support in chart.js for what you are wanting. However, you can certainly add this capability using the plugin interface. This requires that you implement your own logic to draw the canvas pixels at the locations that you want them. It might sound challenging, but its easier than it sounds.
Here is an example plugin that will add a value above specific points in the chart (based upon configuration).
Chart.plugins.register({
afterDraw: function(chartInstance) {
if (chartInstance.config.options.showDatapoints || chartInstance.config.options.showDatapoints.display) {
var showOnly = chartInstance.config.options.showDatapoints.showOnly || [];
var helpers = Chart.helpers;
var ctx = chartInstance.chart.ctx;
var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize + 5, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = fontColor;
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
if (showOnly.includes(dataset.data[i])) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
ctx.fillText(dataset.data[i], model.x, yPos);
}
}
});
}
}
});
It allows you to configure which points you want to annotate using this new configuration. The showOnly option contains the points that you want to label.
options: {
showDatapoints: {
display: true,
showOnly: [3, 10, 9]
},
}
Obviously, this only adds the datapoint value at the specified points, but you can just change the plugin to paint whatever you want to show instead. Simply replace ctx.fillText(dataset.data[i], model.x, yPos) with different code to render something different on the canvas.
Here is a codepen example to show you want it looks like.
I'm using the mapbox-gl-js API and I'm using it with react to create some custom markers as follows:
let div = document.createElement('div');
let marker = new mapboxgl.Marker(div, {
offset: [ -20, 80 ]
});
marker.setLngLat(person.geometry.coordinates);
render(
<MapPersonIcon />,
div,
() => {
marker.addTo(map);
}
);
This worked great. However I would now like to cluster these markers, producing the same affect as the functionality found with layers i.e.
https://www.mapbox.com/mapbox-gl-js/example/cluster/
Does anyone know whether this is possible (hopefully with custom clusters too) or whether it will be available in an upcoming release?
This feature is now in Mapbox GL js - https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/
Key takeaways:
When setting your data source using map.addSource, make sure you define cluster: true and clusterRadius: int, like so:
map.addSource( 'sourceName', {
type: "geojson",
data: {
type: 'FeatureCollection',
features: [JSON]
},
cluster: true,
clusterRadius: 80,
});
That will push mapbox to cluster your icons, but you need to tell mapbox what to do when it clusters those icons:
map.on( 'moveend', updateMarkers ); // moveend also considers zoomend
The business (trimmed down for relevance):
function updateMarkers(){
var features = map.querySourceFeatures( 'sourceName' );
for ( var i = 0; i < features.length; i++ ) {
var coords = features[ i ].geometry.coordinates;
var props = features[ i ].properties;
if ( props.cluster ){ // this property is only present when the feature is clustered
// generate your clustered icon using props.point_count
var el = document.createElement( 'div' );
el.classList.add( 'mapCluster' );
el.innerText = props.point_count;
marker = new mapboxgl.Marker( { element: el } ).setLngLat( coords );
} else { // feature is not clustered, create an icon for it
var el = new Image();
el.src = 'icon.png';
el.classList.add( 'mapMarker' );
el.dataset.type = props.type; // you can use custom data if you have assigned it in the GeoJSON data
marker = new mapboxgl.Marker( { element: el } ).setLngLat( coords );
}
marker.addTo( map );
}
NOTE: Don't copy paste this code, rather use it in conjunction with https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/ to get the whole picture. Hope this helps!
Answering own question:
At current it seems that this isn't possible as per mapbox's github:
If you would like to cluster your markers you will need to use mapbox's native maki icons (please see above example picture & URL) until a plugin is available for your custom HTML markers.
/// <reference path="openlayers.d.ts" />
class MapComponent {
element: HTMLElement;
map: OpenLayers.Map;
constructor(element: HTMLElement) {
// Setup our map object
this.element = element;
this.map = new OpenLayers.Map(this.element);
}
init() {
// Setup our two layer objects
var osm_layer_map = new OpenLayers.Layer.OSM("OSM");
// Add layers to the map
this.map.addLayers([osm_layer_map]);
// Add a layer switcher control
this.map.addControl(new OpenLayers.Control.LayerSwitcher({}));
// Zoom the map to the max extent
if (!this.map.getCenter()) {
this.map.zoomToMaxExtent();
}
}
}
window.onload = () => {
var el = document.getElementById('map');
var mc = new MapComponent(el);
mc.init();
}
I have the above piece of code to work with a simple HTML file with only 1 of ID, 'map' with style: height and width # 500px.
I have tried several other ways to get the map to display but so far all i got was a white page (blank).
Can anybody point me in the right direction?
Solutions tried so far:
using jquery with ready function
replace window.onload with a call direct from the html, <script><script/>
place document.getElementById() in the new OpenLayers.Map(here); when first creating this.map
placing the window.onload call above and below (currently)
using export class or public init() or both
As of now, I just want it to work.
Seems that creating the map with the element provided and later defining the options doesn't work.
Instead either initialize the map with options
var options = {
projection: "EPSG:3857",
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
center: new OpenLayers.LonLat(-12356463.476333, 5621521.4854095)
};
this.map = new OpenLayers.Map(this.element, options);
Or call this.map.render(this.element) at the end of your init method.
Also make sure your div is actually visible and has some size specified, otherwise it might be not visible...