I am trying to plot the map of Latin American countries using openlayers 3 in my asp.net mvc app.
I have geojsonobject of the countries and I tried the below code but map is not displayed..
My requirements is to only show LAC with interaction and different color filling of the different countries.
<html>
<head>
<title>Modify features test</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"> </script>
<style>
.map {
background: grey;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var styleFunction = (function() {
var styles = {};
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'orange', width: 2})
});
styles['Point'] = [new ol.style.Style({image: image})];
styles['Polygon'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})];
styles['MultiLinestring'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
})];
styles['MultiPolygon'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
})];
styles['default'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.1)'
}),
image: image
})];
return function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
})();
var source = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var layer = new ol.layer.Vector({
source: source,
style: styleFunction
});
var overlayStyle = (function() {
var styles = {};
styles['Polygon'] = [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 255, 0.5]
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: [255, 255, 255, 1],
width: 5
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: [0, 153, 255, 1],
width: 3
})
})
];
styles['MultiPolygon'] = styles['Polygon'];
styles['LineString'] = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: [255, 255, 255, 1],
width: 5
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: [0, 153, 255, 1],
width: 3
})
})
];
styles['MultiLineString'] = styles['LineString'];
styles['Point'] = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: [0, 153, 255, 1]
}),
stroke: new ol.style.Stroke({
color: [255, 255, 255, 0.75],
width: 1.5
})
}),
zIndex: 100000
})
];
styles['MultiPoint'] = styles['Point'];
styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
return function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
})();
var select = new ol.interaction.Select({
style: overlayStyle
});
var modify = new ol.interaction.Modify({
features: select.getFeatures(),
style: overlayStyle
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
layers: [layer],
target: 'map',
view: new ol.View({
center: [0, 1000000],
zoom: 2
})
});
</script>
</body>
</html>
and my geojsonObject is given below only one now..
var geojsonObject = {'type':'FeatureCollection','crs': {'type':'name','properties':{'name':'EPSG:3857'}},"features":[{"type":"Feature","id":"BOL","properties":{"name":"Bolivia"},"geometry":{"type":"Polygon","coordinates":[[[-62.846468,-22.034985],[-63.986838,-21.993644],[-64.377021,-22.798091],[-64.964892,-22.075862],[-66.273339,-21.83231],[-67.106674,-22.735925],[-67.82818,-22.872919],[-68.219913,-21.494347],[-68.757167,-20.372658],[-68.442225,-19.405068],[-68.966818,-18.981683],[-69.100247,-18.260125],[-69.590424,-17.580012],[-68.959635,-16.500698],[-69.389764,-15.660129],[-69.160347,-15.323974],[-69.339535,-14.953195],[-68.948887,-14.453639],[-68.929224,-13.602684],[-68.88008,-12.899729],[-68.66508,-12.5613],[-69.529678,-10.951734],[-68.786158,-11.03638],[-68.271254,-11.014521],[-68.048192,-10.712059],[-67.173801,-10.306812],[-66.646908,-9.931331],[-65.338435,-9.761988],[-65.444837,-10.511451],[-65.321899,-10.895872],[-65.402281,-11.56627],[-64.316353,-12.461978],[-63.196499,-12.627033],[-62.80306,-13.000653],[-62.127081,-13.198781],[-61.713204,-13.489202],[-61.084121,-13.479384],[-60.503304,-13.775955],[-60.459198,-14.354007],[-60.264326,-14.645979],[-60.251149,-15.077219],[-60.542966,-15.09391],[-60.15839,-16.258284],[-58.24122,-16.299573],[-58.388058,-16.877109],[-58.280804,-17.27171],[-57.734558,-17.552468],[-57.498371,-18.174188],[-57.676009,-18.96184],[-57.949997,-19.400004],[-57.853802,-19.969995],[-58.166392,-20.176701],[-58.183471,-19.868399],[-59.115042,-19.356906],[-60.043565,-19.342747],[-61.786326,-19.633737],[-62.265961,-20.513735],[-62.291179,-21.051635], [-62.685057,-22.249029],[-62.846468,-22.034985]]]}}]};
Polygon not plotted for bolivia please help...
Projection/CRS
Your GeoJSON specifies using EPSG:3857 (crs: {'type':'name','properties':{'name':'EPSG:3857'}}), but your coordinates does not seem to be in EPSG:3857. EPSG:3857's units is meters, and coordinates such as [-62.846468,-22.034985] are less than 100 meters from the equator and the Greenwich meridian.
Your coordinates are probably in EPSG:4326 (latitude and longitude in degrees). If that's true, change the GeoJSON to reflect that (set crs: {'type':'name','properties':{'name':'EPSG:4326'}}.
With features in EPSG:4326, you also have to change the view projection to EPSG:4326 or reproject the features to EPSG:3857. EPSG:3857 is normally used for global web mapping applications.
In order to read GeoJSON in EPSG:4326 and get features in EPSG:3857, change
(new ol.format.GeoJSON()).readFeatures(geojsonObject)
to
(new ol.format.GeoJSON()).readFeatures(geojsonObject,
{'featureProjection': ol.proj.get('EPSG:3857')})
Initial center
The inital center of the map does not seem to be focused on your data. You could insert this after the map is initialized:
map.getView().fit(source.getExtent(), map.getSize())
Related
I use konva.js and I try to align texts with the align function but I can't do it with the left alignment (right and center works on the other hand)
my code
var text1 = new Konva.Text({
y: 26,
fontSize: 40,
text: 'ligne1',
draggable: true,
width : 550,
align: 'center',
});
layer.add(text1);
layer.draw();
Thank you
The text.align() method sets the alignment. In the snippet below I have drawn a rect around the text shape to give a visualisation of the effect.
let
// Set up a stage
stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
}),
layer = new Konva.Layer(),
rect = new Konva.Rect({
x: 0,
y: 26,
width: 550,
height: 40,
stroke: 'magenta'
}),
text1 = new Konva.Text({
y: 26,
fontSize: 40,
text: 'ligne1',
draggable: true,
width: 550,
align: 'center',
fill: 'cyan'
});
stage.add(layer);
layer.add(rect, text1);
layer.draw();
$('#left').on('click', function() {
text1.align('left');
layer.draw();
})
$('#center').on('click', function() {
text1.align('center');
layer.draw();
})
$('#right').on('click', function() {
text1.align('right');
layer.draw();
})
body {
margin: 10;
padding: 10;
overflow: hidden;
background-color: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/konva#^3/konva.min.js"></script>
<p>Click a button to change alignment of the text.</p>
<button id='left'>Left</button>
<button id='center'>Center</button>
<button id='right'>Right</button>
<div id="container"></div>
When I enable tooltip.shared = true, The arrow will disappear like screen shot.
tooltip: {
shared: true
},
I want to keep arrow just like tooltip.shared = false
tooltip: {
shared: false
},
DEMO in here http://jsfiddle.net/puff0211/5sbfztur/
Does anyone know to accomplish this?
Thank you!
You can prevent from skipping the tooltip anchor in case tooltip is shared by wrapping move function. More about wrapping can be here: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts. Take a look at the example below.
DOCS Reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Example:
http://jsfiddle.net/u6d2bode/
You can use tooltip.formatter with some css to achieve nearly required behavior but not exactly same when shared: false .
$(document).ready(function() {
$('#container').highcharts({
chart: {
//type: 'column'
type: 'bar'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
shared: true,
useHTML: true,
backgroundColor: null,
borderWidth: 0,
formatter: function() {
//console.log(this.points)
var points = this.points;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<div class="callout right" >' + points[0].key + '<br/>' : '';
var index;
var y_value;
for (index = 0; index < pointsLength; index += 1) {
y_value = (points[index].y);
tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value + ' </b><br/>';
}
return tooltipMarkup + '</div>';
},
/*//you can use bellow code to adjust position
positioner: function(boxWidth, boxHeight, point) {
return {x:point.plotX,y:point.plotY};
}*/
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
div.callout {
background-color: rgba(247, 247, 247, 0.85);
background-image: -moz-linear-gradient(top, rgba(247, 247, 247, 0.85), rgba(247, 247, 247, 0.85));
position: relative;
color: #000;
padding: 5px;
border-radius: 3px;
box-shadow: 0px 0px 20px #444;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 35%;
border-right: 10px solid rgba(247, 247, 247, 0.85);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Fiddle demo
tooltip formatter
tooltip: {
shared: true,
useHTML: true,
backgroundColor: null,
borderWidth: 0,
formatter: function() {
var points = this.points;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<div class="callout right" >' + points[0].key + '<br/>' : '';
var index;
var y_value;
for (index = 0; index < pointsLength; index += 1) {
y_value = (points[index].y);
tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value + ' </b><br/>';
}
return tooltipMarkup + '</div>';
},
css
div.callout {
background-color: rgba(247, 247, 247, 0.85);
background-image: -moz-linear-gradient(top, rgba(247, 247, 247, 0.85), rgba(247, 247, 247, 0.85));
position: relative;
color: #000;
padding: 5px;
border-radius: 3px;
box-shadow: 0px 0px 20px #444;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 35%;
border-right: 10px solid rgba(247, 247, 247, 0.85);
}
I have several layers on an OL map which contain outlines, background colours and labels for the same sized features, so you can show or hide one or more of the layers. Two of these layers are just labels... the style contains no fill or stroke. One label should sit above the other in the center center of the feature but OL seems to spread them vertically further away or closer together relative to the height of the feature polygon, like this:
I have tried setting an offsetY: 15 in the text style block of the lower label, adding a line break before the lower label and setting textBaseline:'top' on the lower label and textBaseline:'bottom' on the top (that was a last ditch attempt!) but they are always spread differently!
Here's my style block for the upper label:
function fields_label_style() {
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255,255,255,0)',
width: 1
}),
text: new ol.style.Text({
font: '13px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#ffffff' }),
stroke: new ol.style.Stroke({
color: '#000000', width: 2
}),
// get the text from the feature - `this` is ol.Feature
// and show only under certain resolution
text: map.getView().getZoom() > 14 ? this.get('description') : ''
})
})
];
}
And for the lower label:
function cropping_label_style() {
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255,255,255,0)',
width: 1
}),
text: new ol.style.Text({
font: '13px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#ffffff' }),
stroke: new ol.style.Stroke({
color: '#000000', width: 2
}),
// get the text from the feature - `this` is ol.Feature
// and show only under certain resolution
text: map.getView().getZoom() > 14 ? this.get('description') : '',
offsetY: 15
})
})
];
}
Both definitely have the same polygon outline. No question. I can only think that perhaps OpenLayers is treating the offset as a percentage rather than the pixels as is stated in the documentation:
Due to some complicated loops in my code I overlooked that there was a slight discrepancy between polygon boundaries on some of the fields, meaning their labels were displayed in slightly different places. Now I have made all the polygon boundaries the same the label do indeed line up correctly with the offsetY behaving as expected. My apologies.
More of a workaround than an answer because I see nothing wrong with your approach but does this produce the same result?
[
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255,255,255,0)',
width: 1
})
}),
new ol.style.Style({
text: new ol.style.Text({
font: '13px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#ffffff'
}),
stroke: new ol.style.Stroke({
color: '#000000',
width: 2
}),
// get the text from the feature - `this` is ol.Feature
// and show only under certain resolution
text: map.getView().getZoom() > 14 ? this.get('description') : ''
})
}),
new ol.style.Style({
text: new ol.style.Text({
font: '13px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#ffffff'
}),
stroke: new ol.style.Stroke({
color: '#000000',
width: 2
}),
// get the text from the feature - `this` is ol.Feature
// and show only under certain resolution
text: map.getView().getZoom() > 14 ? this.get('description') : '',
offsetY: 15
})
})]
In my mapping application, I can hightlight the polygon, when mouseover it or select it, but the point and lineString cannot be highlighted, thought I add the style in script.
I found some working examples with ol.featureOverlay online, but now in new openlayers3, ol.featureOverlay is removed from library, do some specialists know how to solve it?
Tell your interaction to read the styles from a function of yours:
var hoverInteraction = new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
style: geometryStyle
});
And your function will be like above:
function geometryStyle(feature){
var
style = [],
geometry_type = feature.getGeometry().getType(),
white = [255, 255, 255, 1],
blue = [0, 153, 255, 1],
width = 6
;
style['LineString'] = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: white, width: width + 2
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: blue, width: width
})
})
],
style['Polygon'] = [
new ol.style.Style({
fill: new ol.style.Fill({ color: [255, 255, 255, 0.5] })
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: white, width: 3.5
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: blue, width: 2.5
})
})
],
style['Point'] = [
new ol.style.Style({
image: new ol.style.Circle({
radius: width * 2,
fill: new ol.style.Fill({color: blue}),
stroke: new ol.style.Stroke({
color: white, width: width / 2
})
})
})
];
return style[geometry_type];
}
http://jsfiddle.net/jonataswalker/prx41egk/
I am creating a simple chart using highcharts. The chart seems not displaying.
Stuck at it for few hours and I could not figure out what is wrong. Is there anything I have missed out? Need some help here.
xhtml
<script type="text/javascript">
function renderChart(divId, chartType, chartTitle, chartData, categories){
var options = createOption(divId, chartType, chartTitle, categories);
options.series = $.parseJSON(chartData);
var chart = new Highcharts.Chart(options);
}
function createOption(divId, chartType, chartTitle, categories){
var options = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1,
renderTo: divId,
type: chartType
},
title: {
text: 'JVM Heap Memory Usage Chart',
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
text: 'Source: http://java-bytes.blogspot.com',
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
ridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
categories: $.parseJSON(categories),
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
},
formatter: function() {
return this.value;
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
},
text: 'Heap Memory Usage'
},
labels: {
formatter: function() {
return this.value +'MB';
},
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
tooltip: {
formatter: function() {
return ''+ this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' MB';
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
labels: {
style: {
color: '#99b'
}
},
series: []
};
return options;
};
</script>
<h1>Highcharts</h1>
<p:commandButton oncomplete="renderChart('container','area','Sample Chart','${pc_Test.chartData}', '${pc_Test.categories}');" action="#{pc_Test.loadChartData}" id="chartvalue_btn">
<div id="container" style="width: 100%; height: 500px"></div>
</p:commandButton>
java
/**
* Load Chart Data
*/
public void loadChartData() {
String _LOC = "[************loadChartData************]";
System.out.println(_LOC + "1.0");
W_test _w = getW_test();
setChartData("[{name:'Heap Size',data:[1024]},{name:'Used Heap',data:[942]}]");
setCategories("['14:31:12']");
}