Tag Info

Hot answers tagged

12

If you are interested in an implementation look at jsts a Javascript implementation of the much used Java Topology Suite library -- depending on whether you prefer reading Javascript or Java, I suppose. A general idea of how the algorithm works. For points, it is trivial, you simply buffer them by a given radius. If you have multiple points, you will have ...


6

If you have GeoJson that looks like that on the wikipedia page var json={ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [102.0, 0.6] }, "properties": { "prop0": "value0" } }, { "type": "Feature", "geometry": { "type": "LineString", ...


6

Feature creation can be kind of tricky in OpenLayers 3. There aren't any official examples for ol.source.Vector layers, most of them are working with GeoJSON, or some other data exchange format. I have managed to create a working fiddle. Let me explain some of the key aspects of achieving your task. var layerLines = new ol.layer.Vector({ source: new ...


6

It is not as easy as it used to be, but there are some helper methods for the collection. That should allow you to do similar things as ThomasG77 described above. Assuming you have a map named map, with 4 layers i.e. [base_layer, coastlines, heatmap, markers] Then you can get the collection via map.getLayers(), and the array of layers via ...


6

Assuming you use an ol.layer.Vector with an ol.source.GeoJSON you can use something like this: var vectorSource = new ol.source.GeoJSON({ projection : 'EPSG:3857', url: 'http://examples.org/fearures.json' }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); // show loading icon // ... var listenerKey = ...


6

We use a trick like: <style type="cartocss/text" id="simple"> #earthquakes_cdbjs_lesson3{ marker-fill: #FF6600; marker-allow-overlap: true; ... } </style> and after that cartocss: $("#simple").text();


6

FYI... I believe this has changed for OL3 V3.5.0, so gcarrillo's answer would be: new ol.layer.Vector({ title: 'added Layer', source: new ol.source.Vector({ url: 'mygeojson.json', format: new ol.format.GeoJSON() }) }) You can see the changes here: ...


5

You will need to add a new interaction. Assuming that... this.mapRaster = ol.Map This should work this.mapRaster.on('singleclick',function(e){ var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(e.coordinate), }); iconFeature.setStyle(_self.iconStyle); _self.rasterVectorSource.addFeatures([iconFeature]); Make the ...


5

It looks like a new and better supported JS WKB parsing library has since appeared. https://github.com/cschwarz/wkx I've been able to use it to convert WKB directly from postgres into JS objects that can be mapped in the browser. You'll need to include https://github.com/cschwarz/wkx/blob/master/dist/wkx.js in your webpage for this to work. // Required ...


5

If you want to remove the grayscale map from the start just delete: "Grayscale": grayscale, From var baseMaps = { "Grayscale": grayscale, "Streets": streets }; If you want to remove the layer on a click you call it as a method on the map object. Like so: map.removeLayer(grayscale) To remove it from the control you first have to assign ...


5

You cannot capture selecting a feature template and creating a feature on the map using, for instance, with Selenium IDE. This is because those things don't happen at the client side, and the testing software is not aware of JS API and considers editing templates to be just a group of CSS elements. Actually, you can test those kinds of interactions. ...


5

I'm not familiar with programming in JavaScript but in the OpenStreetMap Wiki there is a section describing "Mercator". Following this link you'll find a sample code snippet to tranform from lat long to mercator. I actually don't know if it's correct because I did not test the code.


4

Try something like: map.getLayers().setAt(99, markers) The list of layers is in an object inheriting from an ol.Collection. See the API doc for it. Be careful, I'm pretty sure, you can't use arbitrary number like 99 in setAt: first arg is for the position in the array of layers and the second arg is for the layer element reference you want to move. To ...


4

If the features are points use var coord = event.feature.getGeometry().getCoordinates(); For point geometries getCoordinates returns an array of 2 numbers. The first number is the x coordinate. The second number is the y coordinate. And if you want to convert coord to a longitude and a latitude use: coord = ol.proj.transform(coord, 'EPSG:3857', ...


4

If you want to have different visualisations but only modifying your query params, for instance because a filter changed and you want to change your where from WHERE somefield = 'x' to WHERE somefield = 'y', probably you want to have a look at the named maps + templates functionality provided by the Maps API. That allows you to create visualisations without ...


4

Try this: var iconStyle_line = new ol.style.Style({// My style definition fill: new ol.style.Fill({ color: 'rgba(221, 99, 0, 0.5)' }), stroke: new ol.style.Stroke({ color: 'rgba(221, 99, 0, 0.5)', width: 3, lineDash: [4,4] // <-Here is the change. first line then space. try [40,40] if not shown as dash }) ...


4

You would do this requirejs.config({ 'paths': { 'esri': 'http://js.arcgis.com/3.12/esri', 'dojo': 'http://js.arcgis.com/3.12/dojo', 'dojox': 'http://js.arcgis.com/3.12/dojox', 'dijit': 'http://js.arcgis.com/3.12/dijit' } }); Then require your modules in AMD style like this require(["esri/dijit/BasemapGallery", "dojo/dom", ...


4

If you look at the picture below, you'll see your Shapefile is actually being displayed on the map. But it's not being projected to your map's reference system. Your Shapefile has EPSG:4326 (as you can see here) and your map has EPSG:900913. So, in your ol_simple.js file, change line: var outProj = new OpenLayers.Projection('EPSG:3857'); by: var ...


4

Since you are a beginner at Node, I'll try to give you a step by step answer Firstly you need to install Node on your system. The exact steps will depend on your Operating system, and version, but it's a good bet that you will find the installer at https://nodejs.org/download/ You should also note that if you have an updated installer, then NPM or the Node ...


4

The following will open a new page when the drawn feature is clicked: map.on('draw:created', function (e) { var type = e.layerType, layer = e.layer; layer.on('click', function(){ window.open('http://www.example.com','_blank'); }); drawnItems.addLayer(layer); }); This will bind a popup with a url: ...


4

This is because boundedBy / bbox is a property that OpenLayers creates when parsing the GML, it is not a real feature property. So when you update, you should clone the feature and get rid of it. Some example code: // do a WFS transaction to update the geometry var properties = feature.getProperties(); // get rid of bbox which is not a real property delete ...


4

You can use: map.getViewport().addEventListener('contextmenu', function (e) { e.preventDefault(); console.info('contextmenu'); var feature = map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) { return feature; }); if (feature) { // ... } }); Tested: Firefox && Chrome ...


4

Dashed lines can be done with: new ol.style.Style({ stroke: new ol.style.Stroke({ width: 3, color: 'rgba(255, 255, 255, 1)', lineDash: [.1, 5] //or other combinations }), zIndex: 2 }) I've made you an online example! http://plnkr.co/edit/AW1YNC?p=preview You can use this online "tester" to get various combinations: ...


4

There are two mode in MapServer in fact and it can be confusing for end users without knowledge about the project history. The first one, the now mostly outdated mode cgi (the url contains mode=browse) way where you don't rely on standards OGC webservices. It was supported in OpenLayers 2 by default because of history (more Mapserver instances not using ...


4

I think you need to use IdentityManager from the API that allows you to sign in with your arcgis.com account and then receive access to the data. Whatever users from your organization that have accounts can sign in as well. https://developers.arcgis.com/javascript/jsapi/identitymanager-amd.html And here is a sample that shows what I think you are trying to ...


3

I think your first solution, to project the Lat/Long coordinates to your preferred state plane is the right way to go. However, I'm not sure what you mean by "a Geometry Service". Do you mean you're using a 3rd-party web method to perform the coordinate transformation? If so, I would discourage that, as there's not a good reason to have such a dependency in ...


3

I have been making my own map app using my own picture maps. Our university shifted to a new campus and I am mapping out 7 storeys (indoor), with 5 levels of zoom, from hand-drawn maps. Leaflet is able to work with custom map tiles! I have followed this guide (omarriott.com/aux/leaflet-js-non-geographical-imagery ), just that I did some trial and error ...


3

The loader should be defined with the callback function that is called when the response has been completely loaded. One way of doing this: loader: function(extent, resolution, projection) { var url = ...


3

Kaarel´s answer should be marked as the correct answer. You need to call the loadFeatures function from the AJAX call. I created three jsfiddle to demonstrate ol 3.5.0 calls via AJAX for ol.format.GeoJSON (JSON and JSONP) as well as ol.format.WFS. WFS http://jsfiddle.net/goldrydigital/9d3jzpna/ JSON http://jsfiddle.net/goldrydigital/ucspgvx0/ JSONP ...


3

For a few "markers" a solution can be implement them as overlays and use CSS3 or SVG to animate them. See example: http://acanimal.github.io/thebookofopenlayers3/chapter06_markers_overlays.html Take into account overlays does not offers a great performance, as you can see in the examples, when many overlays are animated.



Only top voted, non community-wiki answers of a minimum length are eligible