Hot answers tagged

29

Try this instead: function getJson(simp){ //Removed unneeded arguments here var url = 'file' + simp + '.json'; map.removeLayer(geojsonLayer); //geojsonLayer.clearLayers(); I don't believe this needed. $.getJSON(url, function(data){ geojsonLayer = L.geoJson(data, { style: defaultStyle, onEachFeature: ...


9

GeoServer has its own convention for JSONP callbacks, which is described here (coudn't find it mentioned in the official docs). So I quickly hacked a jsfiddle showing how you can use it with jQuery, just remember to set the url, workspace and layers so that they point to your geoserver.


8

You are almost there. Another .each for val.properties should work: $.each(data.features, function (key, val) { $.each(val.properties, function(i,j){ items.push('<li id="' + i + '">' + j + '</li>'); }) });


8

You have to explicitly specify a width and height to your #map container : In css add : #map { width:600px; height:400px; } Or in HTML : <div id="map" style="width:600px; height:400px;"> And you will see correctly your map!


7

For anybody interested in how to correctly use ajax and return jsonp from geoserver this is how its done: var url = "http://localhost:8080/geoserver/Common/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:markers&outputFormat=text/javascript&format_options=callback:getJson"; $.ajax({ ...


7

You can achieve this using a style function on your vector layer. This is a function that is called whenever a feature is rendered, with the feature and the view resolution as arguments. The function is supposed to return an array of styles. The official vector-layer example shows how to do this. To see the example live, go to http://openlayers.org/en/v3.3.0/...


6

What is written above will loop through each element in each JSON object. Those are JSON objects so you want to treat them as the objects geometry and properties then simply reference them using dot notation. $.each(data.features, function (key, val) { geometry = val.geometry; properties = val.properties; alert (properties.place); });


6

Normally you would associate a marker with an object or at least an Identifier (an Objectid) by simply defining a variable for it on the marker object. Leaflet also uses an internal id (marker._leaflet_id) for each marker by default which you can use for your purposes. It depends mainly on how you create your markers and its associated sidebar divs so that ...


6

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 buttons, the second radio buttons. http://bl.ocks.org/zross/47760925fcb1643b4225 http://www.gistechsolutions.com/leaflet/DEMO/filter/filter.html


5

Essentially, you are just passing an array to the autocomplete widget. If the data is in a map or feature service, query for the data from the service. If you start with a table in your mxd/msd that contains the data, when you publish it, you will get a REST endpoint for the table to query for in the same way. Next, parse out the data and push onto an array ...


5

If you still have the reference to your marker, simply use marker.options to access the options object assigned to it. In your case: marker.options.draggable.


4

create a function to loop through your addresses and create a marker for each one. then call this function on the click event of your element (div, link, etc). example: HTML <a href="javascript:google.maps.event.trigger(gmarkers['Location 1'],'click');" class="button3">Location 1</a> <a href="javascript:google.maps.event.trigger(gmarkers['...


4

First of all, OpenLayers 3 doesn't have a LayerSwitcher control. In OpenLayers 2 however, there is a .olControlLayerSwitcher style which can be animated by JQuery without any further styling options. You can use JQuery's animate function for this task: $(".olControlLayerSwitcher").animate({top: "55px"}); There is no need for the 30px animation, except if ...


4

Here is how I solved my own problem: var pointLayer = new OpenLayers.Layer.Vector("POI Markers", {projection: "EPSG:4326"}); $.getJSON('json/DATA.json', function(data) { $.each(data.POI, function() { var pointFeatures = []; var px = this.longitude; var py = this.latitude; // Create a lonlat instance and transform it to the map projection. ...


4

Here's an example that accomplishes what you want (I think): http://jsfiddle.net/tschaub/Lkgx0qaa/ I've created a map with three layers, only the first one (named roads) is visible: var roads = new ol.layer.Tile({ source: new ol.source.BingMaps({key: key, imagerySet: 'Road'}) }); var clipped = { imagery: new ol.layer.Tile({ source: new ol.source....


4

According to the code, getFeaturesAtCoordinate needs a method containsXY on the geometry class to works. But this function is not defined for point geometry and the parent class return always falsesee here. May be the use of ol.source.Vector.getClosestFeatureToCoordinate is more appropriate for a list of point features. Or you can provide a buffer around ...


4

I have been struggling with the same issue, but I seem to have come across a solution that works pretty well. In the Docs there is no visibility style option for vector features. But you can set the opacity of an ol.style.Icon or the alpha of the fill and stroke for an ol.style.Circle and ol.style.RegularShape How I got it to work was to set a style ...


4

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 style of your GeoJSON layer, rather than remove and re-load? Use the setStyle() method. Changes styles of GeoJSON vector layers with the given style function....


4

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 consecutive years, it should suit your purposes fine. If you pass it a L.layerGroup object with the layers you want to use, it will place a JQueryUI slider control on ...


4

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 functions and see if this is your case. var geojsonFormat = new ol.format.GeoJSON(); var vectorSource = new ol.source.Vector({ loader: function(extent, resolution, ...


4

Finally found how to solve map.removeLayer(L.geoJson); var geojson = L.geoJson(campus, { style: style, onEachFeature: onEachFeature }).addTo(map); It worked like a charm


4

var yourData = getInfoFrom(yourObject).join(" <br>"); L.marker([63.43, 10.395]).addTo(map) .bindPopup(yourData) .openPopup(); function getInfoFrom(object) { var popupFood = []; for (var key in object) { if (object.hasOwnProperty(key)) { var stringLine = "The " + key + " is " + object[key]; popupFood.push(stringLine); } } ...


3

Use .on() instead of .live() - the element is not onpage when you bind your event handler, so you'll need to bind it dynamically. $('click', 'a .smallPolygonLink', function(e){ console.log("One of the many Small Polygon Links were Clicked"); });


3

Thanks unicoletti, the callback change worked. I now have: $.ajax({ url: "http://localhost:8090/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:markers&maxFeatures=50&outputFormat=json&format_options=callback:processMarkers", dataType: "jsonp", }); and it returns the json, which I successfully ...


3

The "map.setExtent()" method should work in this case. This method will take your coords and center the map over them. else if (RegionID == 2){ var xmin = '-9323482.962110244'; var ymin = '4350184.153764758'; var xmax = '-8922341.437669657'; var ymax = '4557481.374474147'; var regionname = 'Far Sourthwest'; map.setExtent(xmin, ymin, ...


3

I really appreciate all the suggestions, but I never got the esri/dijit/Popup to be moveable and still be able to highlight and copy the text inside. Instead I used a jQuery Dialog, which I figured would be the case but it just took a while to get all the experience needed to make it work the way I wanted it to. My boss and I both worked on it and we still ...


3

The docs are great, look at the LayerGroup part. There is a method eachLayer that does exactly what you want: featureLayer.eachLayer(function (layer) { // do something with marker layer // layer.feature is probably defined, to create marker, do something like this layer.bindPopup(createPopupContentFromFeature(layer.feature)); }); You can do similar ...


3

You should declare the variable rlayer outside of the easybutton function. Try that: var rlayer = null; L.easyButton('fa-level-up', function() { if (rlayer) { map.removeLayer(rlayer); rlayer = null; } else { var routing = L.Routing.control(...); rlayer = L.layerGroup([routing]); map.addLayer(rlayer); } }, '...


3

Try to change the dataType in your ajax request to 'jsonp' The documentation indicates callback—Applies only to the JSONP output format.


3

What I've done is set a single click event for the map and checked for features at that location like below. This seems to work well. map.on("singleclick", singleClickCB); function singleClickCB(event) { var feature = map.forEachFeatureAtPixel(event.pixel, function (feature) { return feature; }); if (feature) { ... if (feature.get("...


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