Tag Info

New answers tagged

1

Yes that's possible. With leafletjs you can use this Mapbox API: leaflet-pip Once you have captured the users clicked coordinates you can use them like in the example linked above: var userCoords = ???? var gjLayer = L.geoJson(statesData); var results = leafletPip.pointInLayer(userCoords, gjLayer); This will give you an array of polygons that contain ...


0

In Leaflet 0.7 you can assign a different CRS to each WMS Layer by using its csr option. var myLayer = L.tileLayer.wms(...); myLayer.options.crs = L.CRS.EPSG4326;


0

The solution I proposed here is based on an AJAX request, using a a php file to query and return data from the database. So you will need: a local server to work on (for the php to work) the AJAX-plugin for Leaflet Knowledge of SQL and php Connection parameters to your database ( I suggest creating a "readonly" user for that purpose) Example of the PHP ...


1

If I understand what you are asking, you have a basemap of the US, and geojson layers for zip codes and county shapes, and you want to toggle (turn on or off) the geojson layers? Leaflet layer control is designed for this Documentation http://leafletjs.com/reference.html#control-layers Example http://leafletjs.com/examples/layers-control.html Leaflet ...


0

The construction of your WMS request appears to be missing a ? after the initial url. ms_url="http://localhost:8080/geoserver/TestpostGIS/wms"; .... var URL = ms_url + ...


0

I managed to fix this issue in a whole different way than initially asked for. Even when popups where not present (with unbindpopup) i was still not able to place a new marker on top of polygons. The reason was that there was no custom event added to the polygonlayer that could respond to a click, the code only added such an event on the map. So inside the ...


0

Because $.getJSON() is asynchronous. So only after your request to papeleras1.php get finished you can add it to the map. You could add a listener to check when this happens. Like: map.on('layeradd', function(layer, layername){ //some action });


1

I got a solution incidentally for stopping event. For example, if an event is created like this - map.on("click", onMapClick);, the event can be stopped with this code - map.off("click", onMapClick);


0

You can try: map.on('layeradd', function(layer, layername){ }); You should bind the event to the map object. /**UPDATE****/ You cannot bind the popup directly to omnivore.kml, according to their docs the returned object is a L.geoJson() layer -- so a pool of features. Try to bind the popup on each feature: var KML_layer = L.geoJson(null, { ...


0

You could unbind the popup from the polygons when entering marker mode enterAddMarkerMode, and then bind them again after adding a marker onMapClickAddMarker. Without knowing how your polygons or popups are constructed, it is difficult to say exactly, but assume you have added polygons and saved them to a L.featureLayer() called polyFeatures: // somewhere ...


1

This probably has nothing to do with Leaflet — it requests tile images the same way as other JS libraries, and caching is fully handled by the browser. Check your browser/devtools settings.


1

The draw plugin currently has no touch support. This is a much-asked-for feature, but it's not currently available. You can use the Leaflet plugin "Simple Marker" which works perfectly fine with a mobile device. (only tested on iOS devices though). This plugin is only limited to drawing new points/markers. No polygon or line support, but your original ...


0

The event management for Leaflet and jQuery for this use case seems to conflict. Instead of struggling with debugging, you should better use an alternate solution like this contextMenu dedicated lib for Leaflet.


2

Here is a code sample to show how you could publish a WMS layer hosted on geoserver in Leaflet: var map = L.map('map').setView([51.505, -0.09], 8); var forest2000 = L.tileLayer.wms("http://138.26.24.xxx:8080/geoserver/tiger/wms",{ layers: 'forest2000', format: 'image/png', transparent: true, opacity: 0.7 }).addTo(map); Change ...


0

If the marker successfully added to the map with L.marker(map.unproject([element.LocationX,element.LocationY],map.getMaxZoom()-4)).addTo(map); Then try: $.each(data, function(index, element) { var marker = L.marker(map.unproject([element.LocationX,element.LocationY],map.getMaxZoom()-4)).addTo(map); marker.bindPopup(element.id); ...


0

A bit hacky but effective L.LayerGroup.prototype.eachLayer.call(layer, each_layer_fn); I use this in a special case of a KML layer what is FeatureGroups inside FeatureGroups, to found the polygons inside I use the following function var each_layer_fn = function(layer) { if(typeof(layer._layers) === 'undefined') { // do da thing } else ...


2

Your events are propagating to the map. Leaflet provides DomEvent methods to prevent this, for example (using jQuery): $('div').each(function () { L.DomEvent.on(this,'mousedown',L.DomEvent.stop); L.DomEvent.on(this,'click',L.DomEvent.stop); L.DomEvent.on(this,'touchstart',L.DomEvent.stop); });


1

I just googled and found the Leaflet Quick Start Guide: This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events. If you are looking for an eLearning video that is cheap (but not free) then Zoran Petrović has published a course ...


0

omnivore.wkt.parse returns a layer // adding var feature = omnivore.wkt.parse("${feature}"); feature.addTo(map); // removing: feature.removeFrom() is not a function, use map.removeLayer() map.removeLayer(feature);


0

"Low cost" and "minimum development effort" are relative terms. I recently converted a Silverlight application to use the ESRI JavaScript API. I developed the app in-house so it didn't cost anything other than my salary. However, if you take this approach you will have to take into account your current knowledge of Dojo and AMD as this could impact how much ...


1

I normally upload the whole export folder to an accessible folder on my server and implement the map with an <iframe src="relative path to the export folder"> </iframe> and that's it!


0

Here is a pattern that may be useful. Data attributes provide a kind of 'self-configuring' behavior. The example here uses jQuery: HTML <div class="story" data-point="37.000,-120.652">First story. Click to zoom</div> <div class="story" data-point="35.232,-118.334">Another story. Click to zoom</div> <div class="story" ...


1

This is a general answer since you didn't provide any code to work with. Note that I assume you have managed to work out the QGIS2LEAF plugin. The output of the plugin gives you a folder with an index.html file, which contain the webpage main code, and few more folders described below. CSS: contains CSS styling files, including own_style.css that is meant ...


0

Remember that JavaScript runs on the client's machine, under their control. They are allowed to set breakpoints and inspect variables at run time on their own machine. You can minify and obfuscate JavaScript, but Chrome DevTools has a one-click pretty-format button to partially undo the minification enough to make breakpoints work effectively. Long story ...


1

I am not sure if this is helpful, but a suggestion for an algoritm to process OSM multipolygon into into proper GIS multipolygons is given here http://wiki.openstreetmap.org/wiki/Relation:multipolygon/Algorithm Helpful reading regarding boundaries, enclaves and exclaves: http://wiki.openstreetmap.org/wiki/Relation:boundary Especially the last example is ...


2

Leaflet's map.fitBounds has an option padding which you can use like so: map.fitBounds(polygon.getBounds(), { padding:[50,50] } ); JSFiddle demo: http://jsfiddle.net/1vjqjx6h/


1

geojson styles need to be defined in javascript, not css. Here's a sample style: var countyStyle = { "color": "#cec4bc", // medium? brown "weight": 1, // stroke weight in pixels "opacity": 0.65 }; You can look up path style options here in Leaflet documentation. There are many sites to look up hex or rgb color codes and help choose ...


3

It seems you have the same problem as I had. Have a look here. Since you are using AJAX to load the JSON the geojsonAjax has most probably no data when you fire markers.addLayer(L.geoJson(geojsonAJAX)); Try something like this: var markers = new L.MarkerClusterGroup({ showCoverageOnHover: false, maxClusterRadius: 80}); // Style function for ...


0

You need to use the style properties of the L.GeoJSON object. The ajax plugin is extending this object and thus, the properties valid with the L.GeoJSON object are also valid with the plugin object. << I assume your geometries are polygons/lines and not points >> // Define a style var myStyle = { "color": "#ff7800", "weight": 5, ...


0

This is a very broad question and difficult to answer as the solution will necessarily be complex. In some ways you are describing browser-based GIS. To get started, perhaps check out the following components: Leaflet Draw. A great set of easy to use and extendable tools for drawing and editing polygons on screen through a browser. PostGIS. Using Leaflet ...


0

I figured it out! - the problem is that my function or wherever I hold my line of code to "preventDefault()" was outside of the function that created the form in the first place. I need to place the code like such: //Custom functions upon 'edit' map.on('draw:created', function(e) { var coords = e.layer._latlng; ...


0

Some other numbers on the z-indexes, shown elsewhere, worked on my end. Cross-posting from here: https://gist.github.com/crofty/2197042#comment-1234339 .leaflet-google-layer{ z-index: 0 !important; } .leaflet-map-pane{ z-index: 100; } (put this in your webpage's CSS or <style> section )



Top 50 recent answers are included