Tag Info

New answers tagged

0

Is this what you mean? starting from your code in onMapClickAddMarker: markerList.push(marker); add this var marker_index = markerList.indexOf(marker); console.log("added marker_index: " + markerList.indexOf(marker) ); marker.myid = marker_index; marker.on('click', function(e) { console.log("Clicked marker with id: " + marker.myid); });


0

It seems one solution is to prevent this dragging issue upfront, at the document level, rather than retroactively treat the symptom and push focus back to the Leaflet map element/object using javascript.. It finally occurred to me to google "javascript firefox disable image drag", and that lead me to a generic solution over at SO. If you're looking for a ...


0

I did not think about this solution thought I read tutorial leaflet pages. Thank you very much Thomas.


1

I just gave it a quick try and yes it works: You can assign an id to every feature: function onEachFeature(feature, layer) { // just add this line to your onEachFeature-Function: layer._polygonId = feature.id; // assigning ID to each feature } I wrote two functions for the mouse-enter and mouse-leave event: In the hoverstart-function you ...


3

You could for example use a div-Container and a click-Event instead of the default popups: HTML: <div id="info"></div> Javascript: onEachFeature: function (feature, layer) { //layer.bindPopup(feature.properties.name); layer.on('click', function (e) { document.getElementById("info").innerHTML = ...


0

you just need to add the layerGroup combo to the layers option, otherwise it is not added to the map. This is just a convenience. You can also add each layer individually, for example combo.addTo(map) var map = L.map('map', { center: [39.73, -104.99], zoom: 10, layers: [img, bnd, transport, combo] }); updated fiddle


1

According to the latest mapbox.js source, the class names are actually .map-legends and .wax-legends, so: .map-legends.wax-legends { background: rgba(80,80,0,0.1); } But maybe you are you saying that you prefer not to overwrite this style? There is nothing wrong with overwriting .map-legends, in fact this is the only way to change the transparency ...


0

you can utilize cartoview to display your ArcGIS Server services on Leafletjs, the basic viewer and the feature detailed apps of cartoview both utilize the ESRI Leafletjs plugin, take a look at www.cartologic.com/cartoview


2

After seeking for a more broad (jQuery and AJAX related) answer here I assigned to my jsonpCallbacks unique values, like the following: //JSON request $.ajax({ url: ...


1

Turf has no visualization dependencies at all. It does not require any map display, and works with raw GeoJSON data. For example, I often use Turf on my desktop (via Node.js) for running analysis that outputs the results to files I open in QGIS. The code runs 100% on your machine, so there are no access tokens or servers involved anywhere in the process.


1

You simply need to define a standard marker with your own icon, e.g. a PNG image, or alternatively with a L.circleMarker if you prefer a circle. You need to collect all markers on creation in an array without adding them to the map yet. You then add all markers to the marker clusterer, which you add in turn to the map. Here is a simple example that should ...


2

UK Met Office use this cloud cover layer. http://www.metoffice.gov.uk/datapoint/product/cloud-cover-forecast-map-layer If you sign up to datapoint you can get archive data (which you are after) https://register.metoffice.gov.uk/WaveRegistrationClient/public/register.do?service=datapoint (Note: some are not free services but most are) API feeds (& ...


0

Two pieces of advice (which may or may not constitute an answer--haven't tested your code myself): Use Promise Objects Available within jQuery (as well as many other js libraries). Read the docs: essentially, a promise object allows you to work with variables that point to data that may still be loading asynchronously. E.g. var promiseData = ...


0

Your map is being shown in the browser before all the GeoJSON is loaded into your layers. Try wrapping your JavaScript with jQuery's ready() method. $(document).ready(function(){ <put all your code in here> });


7

Turf.js is not dependent on Mapbox.js or access token. I was initially confused with the documentation, I think, but it works fine with plain leaflet.js.


0

I had a typo in the code "infobox.refresh(feature.proprtyies); -> infobox.refresh(feature.properties);" Correcting the typo fixed the problem. Except for the typo, the mouse event code was correct.


1

Those are methods from either underscore or lodash being used in those samples. They are not part of, nor require for Leaflet. The naming convention is one where I suppose searching for "_" would not be very fruitful if you weren't familiar with it already.


3

Imho, what you see in http://videohive.net/item/infographics-3d-map-kit/4835077 has nothing at all to do with GIS anymore. It's an animation done by an artist and should be treated as such. You won't find a GIS which can create anything remotely this artistic. It's just not at all part of the GIS toolchain.


0

I don't think there is any problem with the geojson countries, it works fine on Open Street Map tiles I would check the source and projection of your tile layer, or perhaps start again without defining a crs. I notice you are using what seems to be a locally hosted tile layer: http://localhost/maps/z{z}/x{x}/y{y}.jpg. You can also use Google Satellite ...


2

check the updated JSFiddle. I hope it is what you need.


4

There's a plugin called Leaflet.label which does what you want: https://github.com/Leaflet/Leaflet.label


0

It works but abit tricky way... $.each(layer.data.features, function(index, polygons) { var coordinates = JSON.parse(polygons.geometry.coordinates); var values = []; var coord = []; for(var i = 0, l = coordinates.length; i < l; ...


0

To add values to a datebase on the fly, break it up in three steps: 1) Catch the click and position in Javascript: https://developers.google.com/maps/documentation/javascript/examples/event-simple 2) Send the position to a server using Ajax: http://api.jquery.com/jquery.ajax/ 3) Save the values in the database using PHP: ...


0

You may want to take a look at PostGIS, a spatial database extender for PostgreSQL object-relational database. It adds support for geographic objects allowing location queries to be run in SQL. http://postgis.net/


1

Ok, so I found the problem. The code that I posted in the question above was correct but I had made a schoolboy error in the css part. I am pretty new to leaflet and coding in general and there is very little out there on how to produce legends (other than the Choropleth example). Here is the code that works for me that produces a legend like this: var ...


1

an explanation of the cause of the problem can be found here. Because L.Util.template only supports a limited characterset, the recommended solution is to use a more robust templating solution like Underscore, Lodash or Handlebars in situations like this.


1

The only solutions currently available are hacky and may break in the future, if they decide to use something else than pos.y or refactor the code heavily. Here's another simple hacky solution which is easier to use and doesn't require updating the value every time zoom changes. It makes the zIndexOffset reflect the actual zIndex: ...


0

You could check if your function"get color"is written inside some other function(for example some sort of init function and your for loop not.what happens if you run getColor(categories[0]) in your console? Apart from that categories[i] + 1 should be just categories[i] in order not to get problems during your last loop...


1

In the javascript code the array is treated as a string so try to parse this sting as json before using , then assign the result to coordinates . So if your result in success function is result , parse its coordinates attribute before using it this is example how to do so : result = { "type": "FeatureCollection", "features": [ { ...


0

Although 'export' is very ambiguous, here's a way to console log the drawn polygon as 'geojson' string. Working from this example, replace the map.on('draw:created') callback with the following: map.on('draw:created', function (e) { var type = e.layerType, layer = e.layer; if (type === 'polygon') { // structure the geojson object ...


0

This works without needing to remove the layer and recreate a new one as described above: geojson_layer.eachLayer(function (layer) { if(layer.feature.properties.NAME == 'feature 1') { layer.setStyle({fillColor :'blue'}) } }); It seems to be quite a bit more efficient than removing and recreating the geoJson layer. From the docs, geoJson ...


0

This is because the features property of featureCollection is an array. Because of this you'd either need to loop through all of them or just specify a static index position if you'd like to get a reference to the first individual feature. return 'Name: ' + featureCollection.features[0].properties.NAME;} setting a breakpoint within the callback which is ...


0

have you looked at this answer? GeoServer 2.3 how to enable jsonp. Depending on your version of GeoServer you may have to edit web.xml


0

in my special case I needed to create a custom crs for each point in the list of points in my point layer. it does now what it should: here is my code so far: import processing canvas = qgis.utils.iface.mapCanvas() allLayers = canvas.layers() point_layer = allLayers[0] #this is my pointlayer in my project point_layer_dp=point_layer.dataProvider() ...


4

To create a great circle, you need either a custom azimuthal equidistant (aeqd) projection or a gnomonic (gnom) projection on one of your points. In those projections, the great circle is a straight line, which you can densify to have a curved line in other projections. If the great circle crosses the 180° E/W line or the poles, it might be useful to cut ...


0

You are already accessing the IRoute object (by routes[0]), so the rest is about getting in touch with IRouteSummary object from which you can get the distance: alert('Distance: ' + routes[0].summary.totalDistance);


2

To check whether a layer is toggled you can use the hasLayer() method. You have to modify your getZoom function slightly to get it to work; I added an two extra variables (for clarity) and modified your if statement from if (currentZoom <= 13){ //do something } to var hasTrainLayer1 = map.hasLayer(train1); var hasTrainLayer2 = map.hasLayer(train2); if ...



Top 50 recent answers are included