Tag Info

New answers tagged

0

Thanks @toms! The code worked great: <table><tr><td><audio controls><source src="audio/moo.mp3"></source></audio></td></tr></table> Much appreciated!


0

I've not worked with QGIS Leaflet, but if every column in that table is just meant to be html that gets inserted in the popup, and you're ok with using HTML5 audio controls, try the following markup: <audio controls><source src="audio/moo.wav"></source></audio> You should be able to include the table wrapper, too, as you have ...


0

Use turf.js for this, the functions union and erase in particular. Make a union of all your polygons (or at least the ones that are within the current viewport), then erase the result from the polygon that covers the current viewport. The result will be the inverted selection you're looking for.


0

So not completely automated but my answer at for the following questions solves it quickly: Connecting polygon accidentally deleted - filling in the gap


0

One approach would be to create another layer with a polygon that roughly covers the hole and then use a geoprocessing operation, such as difference or clip to remove the overlap and leave just the jigsaw piece you want. The extent of the rough-cut polygon would limit the operation to the region of interest. ...


2

In case someone else stumbles upon this and needs a live pan, too. Just remove the click event like so: var marker = new L.marker([lat,lon],{ draggable: true }).addTo(map); marker.on("drag", function(e) { var marker = e.target; var position = marker.getLatLng(); map.panTo(new L.LatLng(position.lat, position.lng)); }); I wished it would ...


1

You should add the script that loads the markercluster plugin after you've loaded the core leaflet application. The markercluster functionality is based on extended/new classes from Leaflet, so it has to read Leaflet first. So, put this line: <script ...


0

Try this: Sas Planet You can define your own TMS and XYZ layers to be scrapped


2

I mostly agree with you and would say: If the user wants to click on it => leaflet If it changes regularly (like a GPS track) => leaflet If it is loaded on demand => leaflet if frontend rendering is too slow/complex => tiles For interactivity, you may have another option, but I have never had the opportunity to play with that: UTF-grid ...


0

Try adding return before L.CircleMarker just as you have with markers. Without that I would guess layer is undefined.


2

It's fine to use different tile sources for different zoom levels, just set the min and max zoom on each layer, and don't have the zoom ranges overlap. var map = L.map('map').setView([45, -110], 10); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a ...


1

The standard way to do this is to use setTimeout inside a function and call that function recursively, incrementing any values you need inside the function, rather than using setInterval. This allows you to pass variables into the function being called recursively, to either vary the calling interval or some other value, such as a lookup into an array, a ...


0

first, disable the spiderfy and zoom effects: markers = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false }); then add a clusterclick event listener and construct a popup for the cluster. This assumes you have added name to each marker when constructing the marker cluster (see ...


1

There is no 'uncluster' function to call per se, but you could keep both a clustered and unclustered version of your data available, and toggle between them when you click a button var cluster = L.markerClusterGroup(); var marker = L.featureGroup(); for (var i = 0; i < points.length; i++) { var point = points[i]; var marker = L.marker(new ...


0

A few options You could build your own server end-point that registers a new database record each time a marker is clicked, including whatever information you want to track You could use Google Analytics and jQuery and do something like: var marker = L.marker([51.5, -0.09]).addTo(map); marker.on('click', function() { // sends notification to your ...


1

May be It depends up on back end for serving geojson. Just it varies for different back end serving capabilities. Just change the serving back end and observe the result. In leaflet the layer is load once from the back end and we can do more functionalities available for manipulating the layer.


1

If you keep a reference to the L.Routing.Control around you can remove it later on. $scope.routingControl = L.Routing.control({ waypoints: [ L.latLng(fromLat, fromLng), L.latLng(toLat, toLng) ] }).addTo(map); and to remove it: $scope.removeRouting = function() { leafletData.getMap().then(function(map) { ...


0

you can add the geojson within the success callback success: function(data) { var geoJsonLayer = L.geoJson(data, { onEachFeature: function(feature, layer) { feature.bindPopup('Hi!'); } }); // the rest as before... markers.addLayer(geoJsonLayer); map.addLayer(markers); }


0

I feel that you have two questions: a) How to extract end points b) How to save data for showing it in Leaflet. For a) there is no native OpenJUMP tool but you can use the Sextante toolbox in OpenJUMP Plus. The tool is Sextante - Toolbox - Topology - Extract endpoints of lines. Tool extracts also start points but you can sort them out by having a look ...


0

OK so this issue has to do with the field alias. When your map service has field aliases that are different from your field names you must query the returned JSON using the alias instead of field name.


1

The answer is simple javascript to cancel the setInterval you created: var handle = setInterval(function() { // do something }, 100); function onCancel() { if (handle) clearInterval(handle); } Here's a working example using your code: http://jsfiddle.net/umwo0rn1/25/


0

According to the documentation, leaflet-pip returns: An array of polygons in which the given point resides, an empty array if there are none. whereas you are looking for the opposite: to test if the given point resides in the selected polygon In principle, you should be able to do this with turf-inside. Rough example: var point = turf.point([lon, ...


2

I can answer the 2nd part of your question, the first one has me a little tied up now too I'll edit if no one answers when I get my head around it. So for 2) just use something in the line of routeControl._routes[0].summary.totalDistance See if this works, also _routes[0] represents your choice for example if you have another routing option for which you ...


1

this works for me: function bindNewPopup(){ this.bindPopup(randomText()); } var marker = L.marker([47.16, -115.32]) .on('click', bindNewPopup) .addTo(map); The code in your gist only gets a randomText() when the marker is created. To change the text on every click, you need some way to call the function again; therefore create the ...


0

It works to specify default style for all vector classes before you instantiate any: var myStyle = { color: '#00767C' , fillColor: '#00767C' , opacity: 1 , fillOpacity: 0.5 }; L.Path.mergeOptions(myStyle); L.Polyline.mergeOptions(myStyle); L.Polygon.mergeOptions(myStyle); L.Rectangle.mergeOptions(myStyle); L.Circle.mergeOptions(myStyle); ...


1

Another plugin leaflet-image The plugin is working well with standard markers, for export leaflet map with special markers you can see export-leaflet-map-to-image


0

If I understand you correctly then this problem is called map matching. And e.g. our library in combination with GraphHopper solves the problem fast and in many cases already.


0

I found the solution : var search = document.getElementById('suche'); search.appendChild(new L.Control.GeoSearch({ provider: new L.GeoSearch.Provider.OpenStreetMap(), }).onAdd(map));


0

Just try to pass the viewparams as part of the WMS_URL: var viewparams = [ 'x1:' + startCoord[0], 'y1:' + startCoord[1], 'x2:' + destCoord[0], 'y2:' + destCoord[1] ]; var baseURL="http://192.168.0.34:8080/geoserver/wms"; var better_BaseURL=encodeURI(baseURL+"?viewparams="+viewparams.join(';')); var myLayer = ...


1

We have implemented WFST plugin here: https://github.com/Flexberry/Leaflet-WFST It supports reading GML and GeoJSON data, and can send transaction requests (insert, update, delete).


1

Overwrite the defaults in L.Path with: L.Path.include({options: newDefaultStyle}); e.g.: L.Path.include({options: { color: '#dd8855', fillOpacity: 0.5 }});


3

This should work. Which version of Leaflet are you using? Here, have a look at this jsFiddle. It is important you get the arrays right. First array is the polygon object [ in here the outer ring [ in here some [lat,lon],[,] close the outer ring], then the inner ring [ in here some [lat,lon],[,] close the inner ring ] close the polygon ]. scotland = ...


1

If you can see your layer on a map using L.TileLayer, the problem is in the boundary polygon you pass in L.TileLayer.BoundaryCanvas. It is difficult to guess the exact problem without example sources, but you can try the following checks: Add your layer using L.TileLayer and your boundary using L.Polygon (or using L.GeoJOSN). Check that your polygon ...


1

Leaflet tiles have the leaflet-tile class You can use css to make the border visible .leaflet-tile { border: solid black 5px; } This would create black borders for each tile. It worked for this example https://www.mapbox.com/mapbox.js/example/v1.0.0/wms/ by editing in the developer console of the browser.


0

Depending on your app and your browser requirements, you can use one of these methods: Store selected layers in the browser, like session storage (https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage); doesn't work in all browsers Store the information in the URL hash - nice if you want users to be able to share links with each other and get ...


0

That's possible using a plugin for leaflet. Take a look on this one https://github.com/heigeo/leaflet.wms You'll be able to display a popup containing attributes for each feature of a wms layer, thanks to the GetFeatureInfo


0

I am using the answer above in a leaflet map to allow users to send me feature requests based on the clicked location in a map, which then opens a pre-filled google form with the lat long from that position. Those points are then shown on the map using sheetsee/tabletop. I added a map.hasLayer(my requests layer) so the user is not always seeing the popup ...


1

There are two possibilities I found (I have had the same problem). For the first one, the answer on top help. I was trying to do it as you did, without using the <script> tag to load the files, but if you do so, it works. Declare each JSON file using the <script> tag: <script src="JSONFILE-1.js" type="text/javascript"></script> ...


0

You should take a look at this plugin : https://github.com/heigeo/leaflet.wms It allows you to get info on a popup for each 'feature' of a wms layer.


0

drawControl = new L.Control.Draw({ draw : { position : 'topleft', polyline : false, rectangle : false, circle : false, polygon: { // polygon draw options here }, marker: { // marker options here } }, edit : false }); map.addControl(drawControl); see here ...


0

The Esri JavaScript API has improved dramatically in the last couple years, I have enjoyed my experience with porting Flex apps to the JavaScript API. One thing that has really helped - that should not be as difficult to do as it is - is setting up a build process. Because Esri doesn't release their code, you have to use their built version. This means you ...


0

Using e.popup.setContent("content"); Works for me, using Leaflet 0.7.3. Note that setContent() was added sometime in Leaflet 0.7.


0

Here is a working jsfiddle http://jsfiddle.net/expedio/8r1ncv6a/ I posted while answering following question: How to add Geoserver WFS to Leaflet JS Application To test if your geoserver is supporting jsonp yet just have a look at the preview section of your GeoServer installation.


0

This is probably due to the clipping of polygons by leaflet. A solution is to have a non moving hole using CSS in an overlay layer (not managed by leaflet). You still have to adjust the diameter of the circle during the drag depending on the location, but you will avoid this behaviour. Making a circle hole in css: ...


0

I would put the overlay and the map divs as children of a parent div and use the css mouse-event property to ensure correct propagation. See: http://stackoverflow.com/questions/17537496/bootstrap-row-over-leaflet Be careful, if you need the popup to appear above that custom HTML, you will probably face some ordering issues.


-1

In your geoserver directory locate the web.xml file (should be here: geoserver\WEB-INF) and add the following just above </web-app> at the end: <context-param> <param-name>ENABLE_JSONP</param-name> <param-value>true</param-value> </context-param> and here is a working example: var owsrootUrl = ...


0

Hi your url should be : /geoserver/workspaceName/wfs?request=GetFeature&version=1.0.0&typeName=storeName:layerName&outputFormat=json Keep the default style for now, If this doesn't work you should see an error message in your console, which will help you out!


0

Oh well I'll answer my own question - thanks to Joerg from elsewhere - it was just the case - for geoJson you use mixed case as in my JSFiddle example which worked: http://jsfiddle.net/megalithic/zuz4urb7/ But the CSV plugin lowers the case of all the variables - Aaaargh - but by no means obvious so I thought I should follow up with the working code - CSV ...


1

One option would be to use leaflet point in poly (leaflet.pip) which is available through Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ Or as a leaflet plugin: https://github.com/mapbox/leaflet-pip The fiddle here: http://jsfiddle.net/TnX96/136/ will show exactly how this would work. Or see the code below.... HTML be sure to ...


0

I am currently in the middle of converting a Flex based ArcGIS system into Javascript using the javascript API. The biggest mistake I made so far was using old Legacy code as compared to the more modern AMD. This caused me to rewrite and organize some javascript which was a waste of my time. I would say that doing it in-house is pretty low cost compared to ...



Top 50 recent answers are included