New answers tagged

1

i think the fact that we currently define an anonymous function to dicate what happens when users click on the control is why L.domEvent.removeListener can't be used to 'disable' it later programmatically from within a client app (more info here). it sounded like a pretty good idea to me, so i went ahead and submitted a pull request to add wrappers to esri ...


0

According to the official doc you can use bindPopup on a marker to show data when you click on this marker. marker.bindPopup("<b>Hello world!</b><br>I am a popup: " + myData).openPopup(); About shapefile, I found a leaflet's plugin to deal with it. Leaflet Shapefile How to bind popup with shapefile features Hope it will do the job ! ...


1

According to the official tutorial (http://leafletjs.com/examples/geojson.html and http://leafletjs.com/reference.html#icon), you can define your icons before your L.geojson call and set them in your L.geojson function. var smallIcon = new L.Icon({ iconSize: [27, 27], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'my-icon.png' ...


0

This problem is looking for a supercover DDA line, or just a DDA (Digital differential analyzer) line. Once the line is found (perimeter), it is simple enough to find the interior cells as well. A description of the problem and difference can be found here: Bresenheim modified supercover algorithm One useful code solution is shown here: Line Drawing on a ...


0

I think the trouble may simply be the formatting of your options block. Based on how I'm understanding Leaflet's documentation for GeoJSON, both onEachFeature and pointToLayer should be attributes of the same options object. What happens if you format it like this? var geojson = L.geoJson(data, { onEachFeature: ...


3

Yes, it might sound confusing but internally markers are treated like layers. You have to use removeLayer, it will still only remove a single marker: var x = L.marker([51.5, -0.09]).addTo(map); var y = L.marker([51.45, -0.09]).addTo(map); map.removeLayer(x);


0

I typically call pointToLayer before I call onEachFeature. Also I return new L.circleMarker() where you return L.circleMarker() Thats not an answer to your question but its what I do with almost the same exact scenario and it works for me. ie: geojsonLayer = L.geoJson(json, { pointToLayer: function(feature, latlng) { return new ...


5

As already pointed out in the comments, the problem is that you are directly opening the HTML file in your browser. This will show up like file:///C:/map.html in your address bar. The OSMGeocoder plugin is calling the URL location.protocol+//nominatim.openstreetmap.org/search (see source code). This works on webservers because the location.protocol is ...


1

Check out turf.js, which should give you the geospatial capabilities to do what you need in browser. In particular, turf.squareGrid and turf.merge and (edited) the extension turf-overlaps. Something like this might get you most of the way there: var poly = <geoJSONPolygon>; var grid = turf.squareGrid(turf.extent(poly), cellWidth, unit); var ...


2

I was able to solve this issue by just deleting/not specifying the iconAnchor property of the custom icon. Then the 'icon's center' will always remain at the correct position by default.


6

The order is important. You can't add something to the map before it is defined. Try in this sequence. First define the termini, metroStops var termini = ... ; var metroStops = ...; Then define the basemap, but don't add it to the map yet var osmBase = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'); var baseMaps = { "OSMBaseLayer": osmBase ...


1

[Edit: See Followup Below] When you instantiate your Leaflet map, you just need to pass in a maxBounds option among your map options. When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back when he tries to pan outside the view. To set the restriction dynamically, use setMaxBounds method. ...


0

Figured out! Here's how I solved it. Added a class to each marker using their names: for (var j = 0; j < markers.resources[i].coords.length; j++) { var x = markers.resources[i].coords[j].x; var y = markers.resources[i].coords[j].y; marker = L.marker([y, x], ...


3

Here is a very rough approach to adding a custom layer control outside of the map, using only basic html elements (div, checkbox, label, etc.), no built-in Leaflet controls or plug-ins html /* data attribute will be used in javascript to know which layer to add or remove from the map */ <div id="layercontrol"> <label><input ...


2

what this error tells you is that you've lost the reference to the L.geoJSON layer you have named geoJson. It is not in scope in the geoJsonBounds function. You need to either pass the geoJson layer to the function or define it in a scope this function has access to. Can you post the full code?


1

What is the size of your geojson? I think you need to register 'layeradd' map event, this event will be called only after the geojson [or any other layer] is properly added to the map. In this event, you can get the layer object and its extent, and then call map.fitBounds(bounds) to zoom to the layer. Here is the basic code: map.on('layeradd', function (e) ...


1

Loading multiple geojsons in an application is not a very good idea if you are looking for better performance and speed. You can convert your geojson files to topojson and then load them all asynchronously. Size of topojson files will be less as compared to geojson which will help you to maintain you speed and performance. To convert geojson to topojson, ...


1

The only way I know of to arbitrarily manipulate layer z-indexing relies on the pane features introduced in 1.0.0-beta, specifically the map.createPane and map.getPane methods combined with the ability to set a pane option for each layer. You start by creating new panes for each of your layers to occupy: map.createPane('newPane1'); ...


2

You can use setStyle within the mousemove function: layer.on({ 'mousemove': function (e) { //I want to make the point a red style ? this.setStyle({fillColor:"#ff0000"}); ... } )}


1

I have not found any Leaflet plugin suitable for Question 2 (plugin with support of gpx color extension); so I had to stick with some solution to Question 1. I found that for my task it is best to use http://umap.openstreetmap.fr because it can show my traces + it can be embedded to my page. Although it does not have option to export / import the GPX with ...


-2

We have written a mobile geospatial data collection and audit app, that works on any browser enabled device (any device as long as it can enable GPS). It is a mobile app/interface for field data collection and mobile editing of GIS data that relies/syncs back to some type of GIS server or database. We use our own server (MySQL) and your data is stored on ...


0

Barrett's answer set me down the right path, but I ended up in such a number of rabbit holes that I decided that posting my resulting code and explanation of some of my discoveries in the hopes this might help the community. The resulting code that worked is as below. var CartoDB_PositronOnlyLabels = { "tilejson": "2.0.1", ...


1

You wrote L.titleLayer, but it should be L.tileLayer. You also provided an URL that does not serve tiles (individual PNG or JPEG images), but an .html file that contains the complete code with a map already (try opening it, you'll see). You should use this URL from the Leaflet tutorial instead: ...


2

Panes might help your cause. The idea being you can control what layers draw in what panes and then control the pane order. Here is the original GIT discusson on it. There is also a similar SO question regarding overlay layers and tile layers and how they are implemented on custom panes.


1

I've found a fix for now. I'm using the Mapbox API and it comes with mustache.js baked in. Therefore, when using the L.mapbox.template() function, mustache.js will skip over any blank values and finish rendering the DOM.


0

First create a few icons: var BorIconHere = L.Icon.extend({ options: { iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/e/e9/6_df.png', iconSize: [17, 30] } }); var ShigiIconHere = L.Icon.extend({ options: { iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/f/f5/4_lmb.png', iconSize: [17, 30] } }) Add ...


2

Do you have "win_url" saved as a property on each feature in states geojson? If so, try: function onclick(e) { window.open(e.target.feature.properties.win_url); }


0

I've also found this solution after a few days by accident. I've just put a second GeoJSON and L.grid() object before new OSMBuildings(map).load(). It's not elegant solution but it works, thank you for your answer.


0

Try something like this L.control.zoom({ position:'topright' }).addTo(map); Sry, for the lack of explanation I ll try to be more comprehensive next time. So, if I understood the question correctly, problem lies in position of zoom in & out control. On Leaflet doc I've found this [http://leafletjs.com/reference.html#control-options][1] ...


1

You can also just export the dom element as a pdf/png. Here is a threed that works with openLayers. But should be the same with leaflet Follow here


1

I wonder if there's a configuration that enables export format as pdf. No. Leaflet does nothing of the likes of that. If you want PDFs, you'll need to print PDFs. You can let the users do just that with their web browsers - but if you really need the users to download PDFs, then you can run tools like wkhtmltopdf or a PahtomJS script server-side to ...


1

Could be possible to apply a zoom level into this url request? No. The concept of "zoom level" can only apply for grid-based reference systems (e.g. TMS). For WMS, you are providing both the bounding box of the area you want and the width-height of the image you want. The "zoom level" is implicit, defined by the ratio between those two parameters.


1

From what you've described, my guess is that some CSS is shifting your graphics container. It's probably on svg or div.leaflet-overlay-pane. You should be able to use dev tools to inspect and see if there's some inherited margin shifting your graphics north. To demonstrate, here's a fiddle that shows graphics shifted due to margin applied to svg elements. ...


1

To hide a feature you can give it an invisible color with rgba(0,0,0,0) (the last value is the transparency value, 1.0 = opaque, 0 = fully transparent). var piky1=new L.geoJson(pol00,{ style: function (feature) { return { fillOpacity: 0.55, weight: 7, color: '#eff682' }; }, onEachFeature: ...


1

In the onClick functions for each, put some code that checks the state of the other check box. If the state of the other checkbox is checked, then perform the code to uncheck and remove the layer and load in the one you want. Apply the same logic for the other check boxes onclick function.


1

I tested a few things in the "Classic 2.5D" version of OSMBuildings which integrates with Leaflet. I was able to achieve what you wanted by starting/loading OSMBuildings quite late. If you want to add circles late or during runtime, you will need to have a FeatureGroup with a dummy circle before calling new OSMBuildings(map).load(), or else they end up on ...


1

Your GeoJSON is not valid, remove the {'geojson': "[]"} wrapper. Not sure if that is the cause of your issue, but try with this GeoJSON instead, and see if that solves it: {"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [74.886779, 33.571307]}, "properties": {"rastvalues": 9, "id": 1, "species": ...


2

This may provide a partial answer. Use the map event listener to listen for zoomend to toggle the state of your bootstrap switch. map.on('zoomend', function (e) { // enable/disable based on zoom level if (map.getZoom()>=5) { $("[name='my-checkbox2']").bootstrapSwitch('disabled',false); } else if ...


1

I'm not sure TopoJSON is the answer here. Under the covers leaflet-omnivore is converting the TopoJSON to GeoJSON and feeding that to Leaflet. Using d3js-topojson does exactly the same thing. In the end the polygons being rendered are the same wether sourced as TopoJSON or GeoJSON. You might need to consider simplifying your polygons. The only way you can ...


0

Omayeee Its really simpler than that. map.on('draw:created', function (e) { var type = e.layerType, layer = e.layer; if (type === 'polygon') { // here you got the polygon points var points = layer._latlngs; // here you can get it in geojson format var geojson = layer.toGeoJSON(); } // here you add it ...


1

The problem is that your map is in EPSG:3857 and your getFeatureInfo request is in EPSG:4326. This will work in the sense that no error is thrown because the WMS is stateless and has no idea that the two requests are related but the location of your click is "off" because getFeatureInfo works by "drawing" the map as requested and looking for the feature ...


0

Finally got an answer on github: Internally, Leaflet transforms EPSG:4326 coordinates to pixel coordinates. These pixel coordinates are the EPSG:3857 coordinates divided by a power of 2 (and then rounded). It might be possible to fetch some of these coordinates (look at methods like L.Map.latLngToLayerPoint) and then multiply stuff given the zoom ...


0

To calculate scale you need to know two things, a distance on the map and the length of the same line in pixels or inches etc. You then divide one by the other to give a ratio of 1pixel (or inch) to X metres (or feet). To make life easier we usually use the width or height of the map as we know the bounding box of the map, and the size of the image. If you ...


0

I ended up hosting the output of htmlwidget::saveWidget on a Github Pages project website. I embedded the html files in the ioslides presentation using an iframe, as demonstrated below: <iframe title="My Map" width="980" height="400" src="http://username.github.io/reponame/maps/my_map.html" frameborder="0" allowfullscreen></iframe> This ...


4

Put your map codes in a separate Rmd file, and include it in your main file. https://raw.githubusercontent.com/yihui/knitr/master/inst/examples/child/knitr-main.Rmd


1

This is because in your GeoJSON data, you use MultiPoint geometry type. { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "date_rec": "2016\/01\/13", "land_type": "…", "waste_type": "…" }, "geometry": { "type": "MultiPoint", "coordinates": [ [2.35, 48.86] ] } ...


0

I ran into the exactly the same problem today. It was an absolute devil to debug, but in my instance I had some styles on the svg element - specifically a height:100% and width:100% that was causing them to override the default height/width of the element itself and prevented them from showing.


2

.leaflet-control-layers-expanded { background: #ff0000; } make sure you add this after leaflet css is loaded so that it overrides the default style in your for example: <style>.leaflet-control-layers-expanded { background: #ff0000; }</style> or else edit leaflet.css directly (line 302 in this example)


0

Ahh Now it works thank you ;you must not only make the album public but you have to check Show photo locations to viewers of this album even the photo is geolocated.if not the image stay ungeolocated


1

EDIT: It turned out Picasa has an extra privacy parameter on location data of photos that are going to be shared as public. The "Show photo locations to viewers of this album" parameter must be checked for geotags to be sent with the photos metadata, even if those photos are already publicly shared. See also OP's answer below. Unfortunately it looks ...



Top 50 recent answers are included