Posts

Showing posts with the label Openlayers

Updating Features in Openlayers 4.x

Image
Let's say you have this following set-up: var jsonObj = {         "type": "FeatureCollection",         "features": [             {                 "geometry": {                     "type": "Point",                     "coordinates": [124.112122, 8.112132]                 },                 "type": "Feature",                 "properties": {        ...

My journey on Openlayers 2.x...

Image
It has been, well...overwhelming.HAHA Actually, it's quite fun and I have discovered that my codes in the previous month was so...(what's the right term?) messy and makes my head shake.  New Me : Hey old self, that was a disaster and the ugliest code I've ever seen. Old Me: But...it works! Upon testing all its functionalities, lots of bugs I've found. Although it's not that major but still, a bug is a bug. Let's talk about history...I've been working this web application  in which I need to add multiple layers (flood events) for each river basin. So, my old me did this: if (!myflag1 && "Agaton 2014" == a) { mainit_tubay_bldg_agaton = new OpenLayers.Layer.Vector("Mainit-Tubay Agaton 2014 Affected Buildings", { strategies: [new OpenLayers.Strategy.Fixed()], eventListeners: { loadend: function(a) { map.zoomToExtent(mainit_tubay_bldg_agaton.getDataExtent()); $("#load_tabl...

GeoDjango + GeoServer + Openlayers Combo!

Image
I am developing this web mapping application using Django(GeoDjango), Openlayers and PostgreSQL(PostGIS plugin). It is quite good but when having a huge set of data(shapefile/rows in the table/polygons with multiple vertices) it is "laggy". Panning and browsing on the map and rendering of layers is too slow. I have read some articles about it that although Openlayers has no limitation in rendering a vector(feature) layer, the browser does. So, I decided to use GeoServer. Here's my framework for now: Before, I get my GeoJSON data from Django and rendered it directly using Openlayers but since it is, as I said "laggy" the visualization of the map now is from GeoServer (WMS). HUGE difference, in terms of its rendering performance. It is quite good but I need to learn more about tuning it and use native JAI for rendering images. And also, performing PostGIS queries(ST_Intersects, etc...) is slow, I have tried using raw sql for it but still the response...

Overlaying Legend on Map

This is actually just a simple CSS manipulation, you need to create your legend using an image editor. This won't generate automatically based on your styling. Demo <!--HTML--> <div id="map"> <div id="infoi"> <img src="https://b3218a0dcf0f0481f4a486b8229300982d8fe048-www.googledrive.com/host/0B0JBx-GczUoYUExkeENEQWFDb00"/> </div> </div> /*CSS*/ #map { width: 500px; height: 500px; position: relative; background: #343434 } #infoi { width: 100px; height: 100px; position: absolute; bottom: 35px; left: 10px; } #infoi { z-index:10000; }

Styling Vector Layer Based on Attributes

Image
/*START OF STYLING THE VECTOR LAYER*/ var o = { getColour: function (e) { var t = e.attributes.hazard; return "Low" == t ? "#FFFF00" : "Medium" == t ? "#FFA500" : "#ff0000" } }; var c = { fillOpacity: .3, strokeColor: "${getColour}", strokeWidth: 0, strokeOpacity: 0, fillColor: "${getColour}" }; var b = new OpenLayers.Style(c, { context: o }); var v = new OpenLayers.StyleMap({ "default": b }); /*END OF STYLING THE VECTOR LAYER*/ var GeoJSONLayer = new OpenLayers.Layer.Vector("GeoJSON", { styleMap: v, strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy], renderers: ['Canvas', 'SVG', 'VML'], protocol: new OpenLayers.Protocol.HTTP({ url: "{% static "js/floodmap.txt" %}", format: new OpenLayers.Format.GeoJSON() }) }); Change the attribute name based on your ...