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

There's a lot of subjectivity still in play, but I think a broad answer to your question is that it's getting easier every day to use GeoJSON directly in a leaflet map without tiling, and this is ultimately a good direction for interactive maps to be going. As such I tend to build maps using your third option above. That comes with a few caveats. You ...


8

It's simple: create L.Map with scrollWheelZoom: false option, then add a listener: map.once('focus', function() { map.scrollWheelZoom.enable(); });


7

You can use jquery Ajax to load data and then add it. var district_boundary = new L.geoJson(); district_boundary.addTo(map); $.ajax({ dataType: "json", url: "data/district.geojson", success: function(data) { $(data.features).each(function(key, data) { district_boundary.addData(data); }); } }).error(function() {}); or You can use ...


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


5

You forgot to add Leaflet CSS: <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> Also there are numerous typos in your code: for example, in html, body{} stylesheet line. Do check for them before deploying to production.


5

You can get it with JSTS. Check DistanceOp.js.


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

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


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

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


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

Look into Leaflet-Ajax. It streamlines everything. Will give up-vote for Neogeomat for mentioning it. Get the script here and add it to your header: <script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script> Then it's a matter of uploading with the file p name. var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson"); ...


4

Echoing Bill: it depends. I would say never/rarely do the second option. Keep your data and styling separate. The first and third options might be rephrased as "when should I use a service to render map features?" and "when should I use Leaflet to render map features in-browser?" For me, I try to do the third option whenever I can. Rendering features in ...


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

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


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

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


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


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

Yes with Data Streaming the KML - See 'Stream KML Google Maps' [fmeserver.com/userweb/sharper/playground/index.html] var ctaLayer = new google.maps.KmlLayer('http://fmeserver.com:80/fmedatastreaming/Samples/austinApartments.fmw?'); is doing the request on the page request (on first load or refresh) FME Server is running the workspace and delivering the ...


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

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


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

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.


3

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


3

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


3

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



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