Tag Info

New answers tagged

0

You need to define the affine transformation for transforming the map with the layer's tile origin (upper left corner) coordinates. context.EPSG27700 = new L.Proj.CRS( 'EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000' + '+ellps=airy +datum=OSGB36 +units=m +no_defs', { transformation: new ...


1

The first question is what do you mean by interactive? Do you just mean basic pan and zoom, or do you need to let users click the map to get information on features? If you have an image of the mall layout, and want a simple interactive map image with pan and zoom, check out these two tutorials for using Leaflet as a kind of zoom image tool: ...


1

According to the Leaflet documentation, the layer config is an object literal with layer names as keys and layer objects as values. That means you can use [] to set the object key, here is the modified codes: var layerName = feature.properties.condition[0]; //layer control var baseMaps = { "OpenStreetMap": OSM, "Aerial Imagery": ...


3

You can try to use this tutorial from MapBox to get started. You will need to create your own GeoJSON data for the stores and fountains that you want to display, and you can use this website to generate the GeoJSON file.


1

You have to use the subset method (see ?subset.Spatial): subset(lines, X > 400 & Y=="YES") Alternatively you can use indexing operations via []: lines[lines$X > 400 & lines$Y=="YES", ] Your dplyr code filters just filters the data frame, but not the geometry.


0

The increased response time is likely due to the delay waiting for getcurrentposition to retrieve the device position. If using on a mobile device there could be a delay while the device attempts to retrieve a position from GPS, or fallbacks to Wifi Geolocation. On a desktop computer this delay could be while the browser queries a Geolocation API to ...


1

I think you will be best off using a tile server, and then your heat map on top. You don't want to be publishing your own OpenStreetMap. Follow this guide here: http://www.qgistutorials.com/en/docs/leaflet_maps_with_qgis2leaf.html Just replace the points dataset with your dataset.


1

If you do (or want to) use the Leaflet 1.0 Beta version, Marker and Path have an interactive option. If false, the marker will not emit mouse events and will act as a part of the underlying map. (from leaflet beta API)


0

Here's a small plugin which achieves this well: https://gist.github.com/rclark/6908938 If you're using a leaflet version greater than 0.7.3, this is another good plugin to do the on click identification within WMS layers: https://github.com/heigeo/leaflet.wms


0

You can access to the specific coordinates of the bounds this way: console.log(bounds[0][0]); console.log(bounds[0][1]); console.log(bounds[1][0]); console.log(bounds[1][1]); But take into account that in the bounds you'll have two coordinates that form the two corners of the bounding box, so perhaps you ...


0

I think you should play around with GeoServer, and you can start with the examples here. It should be easy enough to follow. GeoServer will be doing something that you have less control over, though, and if you want to actually to interpolation, I'd use QGIS, or if you have money, ArcGIS (it does Kriging easily, which is super-fancy mathematically magical ...


0

Outside of polling for size changes, there isn't a way to detect a resize of a <div>. I usually use absolute positioning on the map container and let Leaflet handle resize automatically. Like this: http://jsfiddle.net/asnyder14/0gsfdxeg/


1

When you have a layer that also listens for click then it will pick up the top most layer's event. Check out this fiddle. You can add the shape click handler and see that it picks that up instead of the map's.


14

You could use PyQGIS for that (not sure is the best solution for it, though). Select (or activate) the layer in the QGIS ToC, open the QGIS Python console, and copy this code snippet: prefix = "'" layer = iface.activeLayer() attr = layer.rendererV2().classAttribute() attrColor = 'color' # Name of the field to store colors fieldIndex = ...


0

I'm pretty sure the CartoDB javascript API is the Leaflet API, so have a look at their doco: http://leafletjs.com/reference.html#latlng You can either just pull the values out of there, something like this: var coord = L.latLng(50.5, 30.5); var lng = coord.lng; var lat = coord.lat; Or you could store it as your own object, like this: var lnglat = ...


0

OK Guys and Girls, I think toms pretty much nailed the problem. The site was running locally on my PC, i edited the html,css and javascript with an editor and opened the html dircetly in the browser. Only Firefox displayed the zipped shapefile. The problem seems to stem from the fact that only Firefox allows locally hosted files, which took me quite a ...


0

Are you running this locally? In the Chrome console (F12) I get a cross origin error on your zipped shapefile when trying to open index.html from the file system. XMLHttpRequest cannot load file:///C:/Users/web/kaystros_osm_Project.zip. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, ...


1

This question had the second rank on Google when I searched for OpenLayers versus Leaflet so I thought I'd mention that there is a basic tutorial that compares the APIs of both OpenLayers 3 and Leaflet by having you build the same thing in both of them. It is written by Astun Technology and the tutorial tasks are: Basic map with OSM tiles OS-GB Map with ...


0

You do not compress them manually yourself, instead you configure Apache to compress them on the fly when browsers request/allow that. See eg https://stackoverflow.com/questions/19254859/does-apache-2-gzip-json-output-by-default


0

This was caused by a bug as @Javi Santana says in the comments, but it's been fixed already and your map seems to be behaving as expected :-)


0

Looks like Leaflet.EasyButton was mentioned above, but here's some example code: var myImage = '<img class="button-image" src="image-for-icon.jpg"/>'; L.easyButton( myImage, function(btn,map){ // your stuff to do 'on click' }, 'title for the button').addTo(map); and some css: .button-image{ display: block; height: auto; margin: auto; ...


0

From the sound of it, Leaflet.EasyButton could help. It has a disable method that you can style to fit your needs (example). in your js: var disclaimer = L.easyButton('<h1>!!!</h1>', function(btn, map){ alert('disclaimer here!!!'); },{position:'bottomright'}); disclaimer.addTo(map); and in your css: .easy-button-button.disabled{ ...


1

I've been stuck on an issue quite similar to yours by having a custom control with a scrollable div inside. At least a partial solution can be achieved by using lines like this: var elem = L.DomUtil.get('yourelementid'); L.DomEvent.on(elem, 'mousewheel', L.DomEvent.stopPropagation); where elem is the element that's laid out over the map. This prevents ...


0

This is not exactly what you asked for, but it could be a suitable starting point for your heatmap. I created a simple python script for converting geohashes to 3d Google Earth representations. This isn't exactly what you asked for, but if you'd like to create a cool looking thematic map (based on geohash) this will get you started. You can get the code ...


3

You could – along the lines of map.on('zoomend' … insert a conditional statement into layer.on('click' … querying map.getZoom(): layer.on('click', function() { if(map.getZoom() < 10) { map.fitBounds(layer.getBounds()) } });


0

You need to add L.DomEvent.disableClickPropagation(this._baseLayerDropDown); That seems to allow it to work once that is added. This fixes it for version 0.7.3 of leaflet. If that line doesn't work, try doing it to the first div or something.


1

try .leaflet-popup-content img { margin: 0 auto; display:block; }


2

not sure if this fits your use case, but you might be able to use pointToLayer when constructing the geojson var papesjson = L.geoJson(someGeojson, { pointToLayer: function (feature, latlng) { if (feature.properties.estado == "BAJA"){ awesomeclase ="fa-circle-o-notch"; } else if (feature.properties.estado == ...


1

I'd look here: += 'L.latLng('` What is split_route meant to be? A multi-point array? Can you just construct this as an array and pass this in as waypoints? var split_route = []; for (x = 0; x < route1.length ; x++) { var coords = []; coords.push(route1[x].ordered_locs.displayLatLng.lat, route1[x].ordered_locs.displayLatLng.lng); ...


1

You are not telling us how you get the WMS in Leaflet: are you using the default object or a plugin? I have experiences the "cut" issues with labels too. I suspect that the problem might come from the fact that Leaflet WMS object is a extension of the Tile object and somehow in the request processing somehting ges wrong. The geometric object to which the ...


1

I think that with 13,000 records you might still get away with a single app loading a GeoJSON or TopoJSON file. Are you interested in sharing the data? I've got a single page web-app that allows you to explore a bunch of data about crashes here. If you use the clustering plugin, you get better performance. And then you can turn the clusters off when you ...


0

You can iterate over the layers in a L.FeatureGroup with eachLayer: var match = featureGroup.eachLayer(function(layer) { if (layer.feature.properties.ID == uniqueID) { return layer } } L.FeatureGroup documentation


0

I had a similar problem and I believe it has to do because you never bindPopup to the marker. You should try to iterate through your data and add the features you want the marker to display into a marker variable. Then you add that newly made marker layer var into your markercluster variable and now the points that do not get clustered should also have a ...


0

While qgis2web does not explicitly expose an API, it would be possible to write a python script to load each dataset sequentially, and export it to Leaflet. You would need reasonable knowledge of Python and the QGIS API to achieve this.


1

I just released qgis2web 0.16.0 which supports scale-dependent visibility in Leaflet output. That should do the job for you.


1

One example using jQuery. You would need to integrate with your existing script; maybe keeping a default timeGap of 5000 (in case the user doesn't enter one), but overwriting that with the input value if the user clicks the submit button. You could also trigger this with the play button, grabbing the value from the input if it exists. <script ...


1

The easy way is to put everything from var geojson = { down to the closing }; into a new file and loading that as JavaScript file in the head of your HTML. For example: geojson_data.js: var geojson = { type: 'LineString', coordinates: [ [28.24, 84.75, 7.6, .45, '04/25/2015', '11:56', 'Gorkha'], [28.41, 85.8, 5.5, .12, '04/25/2015', '12:23', ...


1

This is the answer. Sometimes you have to go through all the process of asking a question to understand the solution. JavaScript: /** * Converts spherical web mercator to tile pixel X/Y at zoom level 0 * for 256x256 tile size and inverts y coordinates. * * @param {L.point} p Leaflet point in EPSG:3857 * @return {L.point} Leaflet point with tile pixel ...


-1

I would look into using the proj4.js library to transform your coordinates programatically using javascript. From the Github Readme: Basic usage: proj4(fromProjection[, toProjection2, coordinates]) eg: ``` var firstProjection = 'PROJCS["NAD83 / Massachusetts Mainland",GEOGCS["NAD83",DATUM["North_American_Datum_1983",SPHEROID["GRS ...


1

Sounds like you may need to clone the Leaflet objects before adding them to the layerGroups, otherwise they are passed by reference to the layerControl, and this turns off all the Albany, NY markers on the map, regardless of what trip they are part of. var trip1 = L.layerGroup(); var albany = L.marker([lat, lng]); // showing one way to clone object in ...


2

help(Snow.deaths) says: The scale of the source map is approx. 1:2000. The ‘(x, y)’ coordinate units are 100 meters, with an arbitrary origin. so I don't know why you think EPSG:3109 is going to help you, that seems to be Jersey transverse mercator... http://epsg.io/3109 To properly georeference these you'll need to find the lat-long of the arbitrary ...


1

Problem was that one layer was using a rule-based renderer, which is unsupported. I need to patch the plugin to alert users if their project contains rule-based layers.


0

I've managed to calculate the resolutions using the following equation: resolution = ScaleDenominator * PixelWidth 529.166666667 = 1889880.95238 * 0.00028


2

Apologies that this was such a severe bug in qgis2web 0.14.0. I've fixed it as described by GreyHippo, and pushed qgis2web 0.14.1 as a GitHub release, and also onto the QGIS plugins repo - you should be able to update from within QGIS.


1

There is an error in the code. In maindialog.py on Line 198 should be: outputFile = writeLeaflet(self.iface, folder, 600, 400, 1, layers, visible, "", cluster, "", "", "", "", labels, 0, 0, json, params, popup)


3

That is true. QGIS2leaf does not support "Scale Dependent Visibility"! QGIS2leaf was developed to extract a qgis project into a leaflet based webmap. It is not designed to "transfer" all qgis possibilities into styling/behaviour of leaflet. It can build the basis for great webmaps but will definitely require you to do some manual coding in the ...


2

Try to call map.invalidateSize() after changing the map div's size/visibility: http://leafletjs.com/reference.html#map-set-methods


0

I never actually was able to use L.mapbox.featureLayer for this. I ended up having to use Leaflet's L.geoJson, adding featureLayer to map instead of the featureGroup, and adding the layer to the featureGroup at onEachFeature. Here's what my final code looked like: var featureGroup = L.featureGroup().addTo(map); if (oldData) { var featureLayer = ...


0

You could just pass the pointToLayer function as an option on layer instantiation. var layer = L.myLayer(geojson, { pointToLayer: function (ftr, latLng) { return L.marker([latlng.lat, latlng.lng]); } }); And then get markers off the layer instance. var markers = layer.getLayers();


-1

Thanks @toms! The code worked great: <table><tr><td><audio controls><source src="audio/moo.mp3"></source></audio></td></tr></table> Much appreciated!



Top 50 recent answers are included