Tag Info

New answers tagged

2

esri leaflet is an alternative to the ArcGIS API for JavaScript, not something that makes much sense to try and combine. L.esri.DynamicMapLayer provides comparable functionality (within Leaflet) for loading dynamic map services published to ArcGIS Server to the class 'esri/layers/ArcGISDynamicMapServiceLayer' in the JSAPI please check out the esri leaflet ...


0

Leaflet is certainly a good option, out of the box leaflet does not support kml but if you add a plugin like omnivore you should be able to get things work reasonably simply. Perhaps have a shot and post your code to jsfiddle if you get stuck then someone can provide more assistance. Regards, Rowan


0

The other answer is already helpful, but there is a little adjustment, because the property is named "lng" and not "lon"; (see reference, 2015-04-22): http://leafletjs.com/reference.html#latlng var bngcoords = proj4(bngprojection, [e.latlng.lat, e.latlng.lng]); or, clearer: var latlon = e.latlng; var bngcoords = proj4(bngprojection, [latlon.lat, ...


1

Here is a script to turn your csv into a keyed object as suggested in the comments: function csvJSON(csv){ var lines=csv.split("\n"); var result = {}; var headers=lines[0].split(","); // start at 1 to skip the header row for(var i=1;i<lines.length;i++){ var obj = {}; var currentline=lines[i].split(","); var key = currentline[0]; ...


0

You can use turf.js in client side (as Devdatta said) but also on the server. It requires nodejs and spatial data in geojson format, the perfect format if you like to render it on a leaflet map. You can install just the modules that you need: Buffer: turf-buffer Merge: turf-merge Overlap: turf-overlaps Here is an example with node


1

The answer to your question is yes. You might like to clarify what kind of server-side software you have. You can use GeoServer to do WPS requests. You could use a Python library like Shapely. Or a C# library, or a Java library, or a JavaScript library. Or the QGIS API, or the ArcGIS API or the database, be that SQL Server, PostGIS or Oracle. So, to ...


0

This ended up being the solution using HTML attributes of "onmousenenter" and "onmouseleave": var legend = L.control({position: 'bottomright'}); function showDisclaimer() { var div = document.getElementById("info legend") div.innerHTML = "<h6>DISCLAIMER:<br>text</h3><table></table>"; } function ...


0

I don't think collapsed:true is going to make sense in this context, as there isn't a legend control in Leaflet that is analogous to the layer control (L.control.layers). Similar to the layer control, you could construct a div with an icon that always shows by default, with the legend hidden by default, but positioned to hide the icon div when visible. ...


4

Leaflet's GeoJSON uses by default a smoothing factor which eliminates less important points. Pass {smoothFactor: 0} to L.geoJson as an option to achieve a more appropriate overlap.


1

According to the developer of Leaflet, there is some generalisation going on. So that's the cause. I'm not sure if you can turn it off or not, sorry.


0

I can see that the app in Fiddle is working well.However, the effect you mentioned is visible but I think that depends on the render speed of the layers onto the map.When zooming in the layers are all Ok. I don't think thats a problem to worry about


1

UPDATE I found a way of handling the search using FuseSearch! .I have used it in my code and it works well.Only that when I click on the output list,it doesn't show the corresponding polygon in the map. Code var options = { position: 'topright', title: 'Parcel Search', placeholder: 'Parcen No,ID, Reg Name', maxResultLength: ...


1

I found a solution here: http://stackoverflow.com/questions/17005784/clustering-markers-on-mapbox-leaflet I used this code to display my markers: var markers = new L.MarkerClusterGroup(); var geoJsonFeature = rodents1; var geoJsonLayer = L.geoJson(rodents1); var map = L.mapbox.map('map','mapbox.streets') .setView([42.35,-71.08],13); ...


1

Not clear if you want all the points to be the same color, or styled according to some property in your data (a category of animal, etc.). Assuming the latter, you could set up your map slightly differently and use the pointToLayer function to return a circle marker for each point: // make an object to lookup a hex color for each category in your data var ...


0

you can use global variables to keep track of the current layer and popup; then reset these when you click to move to a new layer highlight: // declare these in global scope, e.g. after setting highlightStyle // name these whatever you want, case doesn't matter var CURRENTLAYER, CURRENTPOPUP; layer.on("click", function (e) { // start by clearing the ...


1

If you mean you want this to be an actual clickable link, you are most of the way there. I would break up how you construct the content of the popup to be a little more explicit: var hed = $("<div>", { css: {fontSize: "16px", marginBottom: "3px"} }).appendTo(popup); var span = $("<span>", { text: "District " + properties.datazone + ": " ...


2

The route1Data you are trying to remove is not the original route data that was added. You need to declare your layer outside of vlocation. I modified vlocation to the follow and it adds and removes the layer in my fiddle. var currentRoute; function vlocation(locx, xx) { var vdatax = locx; if (currentRoute) map.removeLayer(currentRoute); if ...


0

Your 'var CountPt' part of the code (which does the counting of points) needs to be moved to within the updateBuffer function so that it constantly reruns. function updateBuffer() { var pointMarker = marker.toGeoJSON(); buffered = turf.buffer(pointMarker, 1, 'miles'); buff = L.geoJson(buffered); buff.addTo(map); ...


0

So looks like one solution is just to remove the controller and and recreate it. So when I initialize it outside of my Leaflet.draw event handler, declare it as a variable. controller = L.control.layers(baseMaps, overlayData, {position:"bottomright"}).addTo(map); and then within my function controller.removeFrom(map); //Add the new data to ...


1

Try projecting your data to 4326 (WGS84) instead of 3857. Leaflet expects coordinates in geojson to be 4326. It'll probably easier to reproject your data before including it your app rather than adding Proj4Leaflet to do on the fly reprojection. Plus, if you don't use Proj4Leaflet, that's one less dependency in what you're developing.


1

I think you are mixing up a couple of things. When you install Geoserver, it comes with a lite distribution of OpenLayers. That is used to preview the data once you publish some. But this functionality is only suitable for previewing, and not as a production front-end. If you want a Production quality front end, you need to develop that yourself. You can ...


0

The problem may be related to the bug described here, since I get the same SCRIPT5: Access is denied error in the console in IE11, and you are using jQuery 1.10.1. You can either downgrade to 1.10.0, or use a version from 1.10.2 and up, as described in the accepted answer. You can also try the latest version which I believe is 1.11.2. Not sure why this ...


2

Opacity is partially implemented in qgis2leaf. The problem is the many ways in which opacity is specified in QGIS: layer transparency fill transparency fill style rgba colours We're still in the process of implementing the full range of these in qgis2leaf. It has improved in the last few weeks, so make sure you have the latest master from Github. More ...


1

This is how I would form the query you're asking about using ST_MakeEnvelope() and the && operator. You can request whatever field data you want, in addition to the geometry in GeoJSON format using ST_AsGeoJSON(). Also I recommend taking advantage of that function's ability to specify a max decimal precision value. Here I'm requesting geometries ...


0

You can do it with slightly less code than ThomasG77's version: function onEachFeature(feature, layer) { //bind click layer.on('click', function (e) { // e = event console.log(e); // You can make your ajax call declaration here //$.ajax(... }); } geojson = L.geoJson(your_data, { style: style, onEachFeature: ...


2

For questions like these, I find Tom MacWright's Mapmakers Cheat Sheet useful. In your particular case, look at the section about lines: https://github.com/tmcw/mapmakers-cheatsheet#lines. As already mentioned by @john-barça, a tiling solution is probably best; I'm personally not a fan of WMS though, I usually find mbtiles etc easier to work with.


2

With the current version you are able to create unfilled polygons. check this : video Simply use no brush fill instead of solid fills. this issue was covered here: https://github.com/Geolicious/qgis2leaf/issues/187


2

Seems like a bug to me. Also reading the README.MD in Qgis2leaf git gave me the impression that opacity should be transffered to the GEOJSON. You might consider opening a bug report. Exporting an example data with opacity of the fill color == 0 %, gave the following in qgis: and the following (as yours) after exporting to leaflet using qgis2leaf plugin. ...


1

The OpenLayers demo requests a single tile so there's no tiling issues to work around. When individual tiles are requested, as in the case by Leaflet.js, GeoServer renders each tile individually without knowing about the other surrounding tiles. This is most often run into when labels show up for a large feature once in each tile, but your symptoms looks ...


3

The N or S value of Latitude is whether the location is North or South of the Equator. W or E for Longitude, is W or E of the Prime Meridian. The number that follows the letter is the Degree of Latitude or Longitude, followed by minutes and seconds of Latitude/Longitude displayed as floats. The alpha-numeric values should not be ignored as they are part of ...


0

Here is a working solution: var map = new L.map('map', { center : [42.339926, -83.04137], zoom : 13 }); L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { attribution: 'Stamen' }).addTo(map); var voices = cartodb.createLayer(map, 'http://opendetroit.cartodb.com/api/v2/viz/08140c18-8a05-11e3-ae46-0e49973114de/viz.json').addTo(map); ...


1

you have to change the css, but also the javascript that is used to generate the html for the legend. From the section of the tutorial where the legend is generated ("Creating a control with a legend..."), change the part with the comment "loop through our density intervals...", to something like the following var legend = L.control({position: ...


1

While your PHP looks to be creating an array, I'm not sure that you're going to have consistent luck getting JS to read it that way (an arrant space here or there, etc.). At least I've tried that in the past, only to realize that while it LOOKS like a good array, it isn't. I think you're better off just returning your MySQL as a true array and then using ...


0

wrapping the latlng in an extra pair of [ ] to make it an array of latlngs arrays as per the comment from pk above var latlngs = [[ L.latLng(52.919803809533754, 0.6671244638974255), L.latLng(52.919803809533754, 0.9753146428868592), L.latLng(52.74726491172838, 0.9753146428868592), L.latLng(52.74726491172838, 0.6671244638974255) ]]; var ...


2

try marker.dragging.disable(); and to re-enable: marker.dragging.enable(); reference: http://leafletjs.com/reference.html#marker-dragging


0

I suppose you want the content to be changed after some event occured, like mouseover, contextmenu, or anything else. To do so, you can use the following code: //marker creation var marker = L.marker([44.63, 22.65]).bindPopup('something').addTo(map); marker.openPopup(); //changing the content on mouseover marker.on('mouseover', function(){ ...


0

Seems that you need to order the geojson first. // take your geojson features var featuresArray = geojson.features; featuresArray = featuresArray.sort(function(a,b) { return parseFloat(a.properties.Timestrg) - parseFloat(b.properties.Timestrg) } ); var orderGeojson = { "type": "FeatureCollection", "features": [] } orderGeojson.features = ...


0

Leaflet.Sleep will make that job easy, and it's plenty configurable It turns off scroll events when they're not needed and 'wakes' your map when they are.


0

In WebGIS, algorithms which require intensive computing, like heatmap with a mask are not recommended to do on the client side. As the data source changes rapidly, the easiest way would be to render the whole as a heatmap layer and mask it with a WMS layer. The WMS should only have landmass data, and the transparency should be set to true. An example can be ...


0

It looks like that feature geometry is corrupted, as the coordinates are just the min/max bounding box of the SRID as set by the WMS. (Plus or minus a few significant digits) The problem seems to stem from EPSG:900913 being defined incorrectly. 900913 is no longer in use, it has since been changed to 3857. The bounding box should be +/- 20 million X and +/- ...


2

At the moment I still prefer OpenLayers2. You can find a nice tutorial here: http://www.gistutor.com/openlayers/22-advanced-openlayers-tutorials/47-openlayers-wfs-t-using-a-geoserver-hosted-postgis-layer.html or even have a look at the "official" openlayers-example: http://dev.openlayers.org/releases/OpenLayers-2.13/examples/wfs-protocol-transactions.html ...


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



Top 50 recent answers are included