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 ...


8

It's simple: create L.Map with scrollWheelZoom: false option, then add a listener: map.once('focus', function() { map.scrollWheelZoom.enable(); }); If you need to toggle zooming: map.on('click', function() { if (map.scrollWheelZoom.enabled()) { map.scrollWheelZoom.disable(); } else { map.scrollWheelZoom.enable(); } });


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

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();


5

Your units are in decimal degrees and they should be in a projected coordinate system. If you still have the gps unit, you can change it to something like an appropriate UTM projection then download the coordinates and use those in your calculation.


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

You are providing html in setContent() var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent(e.latlng.toString() + '<a href="http://www.google.com">Visit Google</a>"') .openOn(map); } map.on('click', onMapClick);


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

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 ...


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

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 ...


4

The OpenLayers.Control documentation says: Controls by default are added to the map they are contained within however it is possible to add a control to an external div by passing the div in the options parameter. So you just need to pass the div to the control while initialising it, somewhat like this: var mp=new ...


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

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: ...


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 ...


3

The map object will take on the projection of the first layer you add to it, in the case of your code, the streets basemap is 102100 (web mercator). You have two options to solve this: Use your own basemap service that is in your 102726 projection so that the points from the web service show up in the correct place. Stick with arcgis online basemaps, ...


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

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 ...



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