Hot answers tagged

9 votes
Accepted

Filter GeoJSON by attribute in Leaflet using a button

You need to create a grouplayer and from that you can add or remove the layer, in that way refreshing the data with the filter from the same dataset. Here are two working examples: the first using ...
Bill Chappell's user avatar
8 votes

dynamic content in leaflet popup window

In order to update the popup content I've added an on click function, and used the popup.setContent method. marker.on('click', onMarkerClick ); function onMarkerClick(e) { var popup = e.target....
NettaB's user avatar
  • 1,926
8 votes
Accepted

Attach click function to the button inside a popup in Leaflet?

No need to use jQuery here IMHO. You can pass an HTMLElement to the bindPopup function. So just create a div and the button as javascript objects and construct the container that way. Then you can add ...
Bernd Loigge's user avatar
  • 2,413
6 votes

Adding/Removing GeoJSON layers using Leaflet

I wrote the below example to show how to remove multiples geoJSON layer. ///adding geoJSON data var myGeoJSON = L.geoJSON(myData, { onEachFeature: function (feature, layer) { ...
Mercel Santos's user avatar
6 votes
Accepted

Fetching GPS point data from a REST service endpoint using jQuery/AJAX and displaying them as tracks on an OpenLayers map

Here is a simple OpenLayers example https://codesandbox.io/s/simple-forked-4m0d8 which will fetch a TrackID, convert the points, elevation and times into an XYZM format linestring and display it. HTML:...
Mike's user avatar
  • 12.4k
5 votes

Using JQueryUI Slider to change Layer Display (Leaflet)?

As ghybs suggests in the comment above, you may find the LeafletSlider plugin useful. It has some idiosyncrasies that make it unsuitable for some uses, but if all you need to do is step through ...
nathansnider's user avatar
  • 2,141
4 votes
Accepted

Leaflet : load & remove layer at specified interval time

If my understanding is correct, in fact you remove and re-load your exp_Fields GeoJSON data into a new GeoJSON layer so that it comes with a new fill color? In that case, why not simply changing the ...
ghybs's user avatar
  • 7,173
4 votes
Accepted

How to load 2 different WFS layers using OpenLayers?

Your code is a bit complicated concering your callback:loadFeatures function. Within the function you add features for both requests to both sources. Try to distinguis them using two separate ...
pavlos's user avatar
  • 3,538
4 votes

Removing layer and redrawing it again in Leaflet?

Finally found how to solve map.removeLayer(L.geoJson); var geojson = L.geoJson(campus, { style: style, onEachFeature: onEachFeature }).addTo(map); It worked ...
joker's user avatar
  • 227
4 votes
Accepted

Dynamically create leaflet popup via JavaScript Object

var yourData = getInfoFrom(yourObject).join(" <br>"); L.marker([63.43, 10.395]).addTo(map) .bindPopup(yourData) .openPopup(); function getInfoFrom(object) { var popupFood = []; for (var ...
Fjellrev's user avatar
  • 495
4 votes

Filter GeoJSON by attribute in Leaflet using a button

Here is an example of using a dropdown to filter out values in the geojson layer. JS Bin: https://jsbin.com/sasojat/edit?html,js,output There are many possible solutions, but this one works like ...
cmrRose's user avatar
  • 1,150
4 votes
Accepted

Styling OpenLayers 5 Vector dynamically

It will use the value of getStyle at the time vector is defined. For dynamic styling you need a style function var vector = new ol.layer.Vector({ style: function(){ return getStyle; }, source: ...
Mike's user avatar
  • 12.4k
3 votes
Accepted

How to pass GeoJSON array to datatable dynamically using Javascript

Your data is stored in the features array. You can access that by specifying a custom datasource within the ajax property like this: "dataSrc": "features". I haven't found a way to get the GeoJSON ...
chrki's user avatar
  • 2,655
3 votes
Accepted

Reading through GeoJSON using Turf.js?

Got it, create a JS object and load it with features from the GeoJSON file. Next loop through the object passing it through the turf function inside. var cluster = []; var features=[]; var point1 = ...
Bill Chappell's user avatar
3 votes
Accepted

where i can add style in this code leaflet

You can initialize your Borne geoJson layer without any data but with a styling function specified in the options: var Borne = new L.GeoJSON(false, { style: function (feature) { return {color: ...
nathansnider's user avatar
  • 2,141
3 votes

How can I load GeoJSON from URL to leaflet?

Plain leaflet does not offer asynchronous loading from external resources. If you really want to craft all this youself, you could use the plain XMLHTTPRequest http://www.w3schools.com/ajax/...
til_b's user avatar
  • 4,924
3 votes
Accepted

How to extract GeoJSON vector layer coordinates from DOM, Openlayers 3

You can access source of your layer then access features of the source and coordinates of features with getCoordinates() method of ol.geom.Polygon. Try like this: var vectorLayer = new ol.layer....
himyata's user avatar
  • 356
3 votes
Accepted

Zoom on Linestring object in Leaflet

You can build a polyline object from the coordinates and then get the bounds from that object: $(".zoom-to-route").on("click", function(){ var routeId = this.id; console.log("searching ...
Marc Pfister's user avatar
  • 4,097
3 votes
Accepted

Reference to layergroup object in Leaflet?

You can use window[object name] in javascript to get the layer object as they were initialized before: HTML: <body> <div id="layercontrol"> <label><input type="...
Shiko's user avatar
  • 2,883
3 votes

OpenLayers adding/removing layer when checkbox is changed

Once you create your map, it is static, which means it will allways have the same layers. In particular only because you change the array, that was used to populate the map, does not mean the map ...
MakePeaceGreatAgain's user avatar
3 votes

Make Leaflet polyline bold by hover?

There is no bold style for polylines, just weight option, which is width of polyline in pixels. If you want to change polyline style to 'bold', you have to increase it's width, let's say from 6 to 8 ...
TomazicM's user avatar
  • 25.2k
2 votes
Accepted

Accessing HTML using jQuery within LeafletJS popup.

If you want to perform a simple action, you can just use the onclick attribute, like this: .bindPopup( "<button id='clickHere' onclick='alert(...)'> <strong> stuff </strong> </...
ArMoraer's user avatar
  • 5,629
2 votes
Accepted

Sortable list of layers

If you want the layers sorted in the same order as the list elements (i.e. the layer on the top of the list is placed on top of the other layers), you will want to subtract the list index from the ...
nathansnider's user avatar
  • 2,141
2 votes
Accepted

How to store a vector layer as a geojson file in openlayers 3?

I agree with Hicham (above). Your code seems fine (hard to tell without an example of the results returned) but refreshing of a page on a submit suggests a mishandling of the submit event. (Plenty ...
Scott Close's user avatar
2 votes

Leaflet / JQuery -cannot add or remove class to divIcon marker

Here's a codepen example that shows how to add a class to an SVG. No jQuery required. document.getElementsByTagName('svg')[0].classList.add("anotherclass"); console.log(document.getElementsByTagName(...
alfred_j_kwack's user avatar
2 votes

OpenLayers 3 toggle feature visibility

I found a simpler method, It only works if you have only one feature with the same image setted: feature.getStyle().getImage().setOpacity(0) // Invisible feature.getStyle().getImage().setOpacity(1) //...
Genarito's user avatar
  • 121
2 votes

Getting historical imagery of Google Maps?

That feature is not available on Maps. You can do it easily in Google Earth. Click the "clock" icon at the top of the window and you'll see a time slider. Next and previous buttons will walk through ...
LoneRanger's user avatar
2 votes

How to reference jQuery in Javascript API 3.23

I think the main issue is that with the particular versions of dojo, jQuery, and jQuery-UI you're using, there's a loading issue where you need to load jQuery-UI first. Here is a sample of your code ...
GavinR's user avatar
  • 2,268
2 votes

Filtering interactive leaflet-map with dropdown-menu?

For this particular scenario, I'd use the GeoJSON data to create several instances of L.GeoJSON (one per filter) and then use a L.Control.Layers to switch them off and on, something like: fetch(...
IvanSanchez's user avatar
  • 10.2k
2 votes
Accepted

Load data from URL to update Billboard position Cesium

For anybody who might be having an issue similar to me i have found a solution based on a tutorial from https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html. My solution based on ...
Owen's user avatar
  • 63

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