Tag Info

New answers tagged

0

it doesn't work for me, I can validate the GeoJSON with the online tool. Here is the GeoJson I get: { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ { "type": "Feature", "properties": { "FID": 0.000000 }, "geometry": { "type": "MultiPoint", "coordinates": [ [ 8.9777585, ...


0

Assuming you are loading maptiles from your mapbox account--using something like L.mapbox.tileLayer there is no way to change the style of tiles client side. Your options would be: load the data you want to be able to style dynamically as vector data, displayed on top of your raster tilelayer, using something like L.mapbox.featureLayer and ...


1

The following will add a custom zoom control with a home button to a Leaflet map. The home icon is from font-awesome, so be sure to include that reference. Working fiddle here. html: <html> <head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> </head> <body> <div ...


2

Wire up a button that calls map.setView http://leafletjs.com/reference.html#map-setview map.setView(lat, lng, zoom);


1

I don't think Leaflet supports this out of the box. However, I think you can implement such a behavior using events such as tileloadstart and tileload: http://leafletjs.com/reference.html#tilelayer-tileloadstart For example, you could start counting time the first time a tileloadstart is fired using setTimeout, and cancel it (using clearTimeout) once a ...


1

I encountered with exactly the same problem while displaying VDC layer for nepal. The concept i came up with is to create tiles using tilemill (since the vdc layers are static and the data is updated once in a month (at max in my case)) extracted using mb-util and served using apache/iis (both work fine). Although the files created were about 100 mb in my ...


0

Leaflet draws a circle using SVG. For example: new L.Circle([3,-60], 1000000).addTo(map) results in the following html: <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#0033ff" stroke-opacity="0.5" stroke-width="5" fill="#0033ff" fill-opacity="0.2" class="leaflet-clickable" d="M823,-88A205,205,0,1,1,822.9,-88 ...


0

Rene, there could be something else going on here as well, but its a problem that the service you are attempting to display has 512 pixel tiles (instead of 256). Proj4Leaflet has a constructor option for L.Proj.CRS.TMS service providers to let you set tileSize explicitly, but not for L.Proj.CRS. Since ArcGIS Server is not a 'TMS' tile server it appears ...


1

If you edit your code this way, it works (note the ADDED line) var Markerlayer = L.geoJson(null, { pointToLayer: function(feature, latlng) { marker = L.marker(latlng, {}); marker.options['title'] = feature.properties['uname']; // ADDED return marker; }, onEachFeature: function(feature, ...


0

For some reason, the highlight opacity is sometimes maintained even though you call resetStyle. Explicity set fillOpacity in stateStyle, and it should work as expected. //ALL FOR STATES var stateStyle = { "color": "#3D5229", "weight": 1, "opacity": .90, "fillOpacity": .90 }; Note, you are also declaring the variable named geojson twice, ...


2

Not tested, but something like this should work var oldLayer = ""; // to start, declare an empty variable outside of the function scope function clickFeature(e) { var layer = e.target; layer.setIcon(layer.options.icon = icon2); // only attempt to change oldLayer icon back to original if oldLayer defined if (oldLayer) ...


2

Since Github supports CORS, you can use jQuery's getJSON() or a micro-library like corslite to grab your geojson without altering it. Here's a working example using $.getJSON() (notice that I took out your script tag referencing your geojson file): <html> <head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" ...


1

You forgot to upload 2 files <script src="nzoutline.geojson"></script> <script src="sectors.geojson"></script> They should be in the same directory as 167finalAD.html


1

I have realised that proj4js doesn't work in IE below version 9


1

This plugin for Debian lacks this problem, but does not meet terms of service of google (Oficial example). Or try this code: var map = L.map( 'map' ).setView( [ 51.505, -0.09 ], 13 ); L.tileLayer( '//mt{s}.googleapis.com/vt?x={x}&y={y}&z={z}', { maxZoom: 18, subdomains: [ 0, 1, 2, 3 ] } ).addTo( map ); var marker = L.marker( [ 51.5, -0.09 ] ...


2

Your github file cannot just contain a value; it must define a variable that will be defined when the file is included as javascript. var geojsonFeature = { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, .... }; Then you can use this variable as an input to your GeoJSON layer var ...


4

What you are describing is a well known issue with animation of Google basemap tiles in Leaflet, and unfortunately, I don't think there is an easy solution. The map in the fiddle uses the Leaflet Google.js plugin by Pavel Shramov. As explained in this answer by @mourner, this plugin "acts as a proxy to the original Google Maps API v3, so it doesn't work ...


1

I think you are asking the wrong question ... Leaflet does the right thing: the tiles you see in your errors belong to your boundaries. To be convinced of it, please have a look at this JSFiddle where your boundaries are shown as a rectangle. You see that Leaflet only loads the tiles needed and that 14/4105/5993.png is shown


0

At first glance, it appears that the only styles missing are the styles that rely on a zoom level. When exported in MBtiles, your "map" is seen in a map context where you have zoom levels, and as such, your styles are rightfully applied. However, when exporting a static map, by default there is no zoom level applied during rendering. I've snooped a bit and ...


2

You need to initialize your map object. See the source code here for an example: http://leafletjs.com/examples/quick-start-example.html Add something like this to harris.js before you call map.on. var map = L.map('map').setView([51.505, -0.09], 13); What's happening is map.on is undefined. Map itself is not defined in JavaScript, but by default DOM ...


1

Your best bet is to convert it to JSON. I assume the binary array is a file type, so you have a X,Y,(Attribute) grid in some format and you want to display it on Leaflet. If you have a way of reading the file, then work out how to output it just as points, so CSV, or GeoJSON as a first preference. If there are less than, say, 3000 points, that will render ...


0

adding "callback" should work, I've tested it using this code: <script> function c(data) { console.log(data); } </script> <script src="http://stratiform.cartodb.com/api/v2/sql/?q=SELECT%20name,%20ST_AsGeoJSON%28the_geom%29%20FROM%20schools_points%20WHERE%20name%20ILIKE%20%27%25clunes%25%27&format=json&callback=c"></script> ...


2

Like HasT said, you need to uncomment the line where you set the view on the map. map.setView(new L.LatLng(59.9244, 10.7582),10); This is because the minimap needs to centre itself on creation, which it does by checking the centre of the main map. This is done before your Ajax call returns, so no position has been set yet. I made a JsFiddle to try out ...


2

What you should look for is called 'Map Matching'. I've opened sourced my idea based on GraphHopper very recently here so it is still in a VERY early shape, please give feedback via providing data or creating issues etc.


0

change // L.Control.MiniMap(L.mapbox.tileLayer('examples.map-i86nkdio')).addTo(map); to map.setView(new L.LatLng(59.9244, 10.7582),10); // add correct lat/lng var miniMap = new L.Control.MiniMap(L.mapbox.tileLayer('examples.map-i86nkdio')).addTo(map);


0

This can be accomplished using a css Transform, but it doesn't look great, but it works well enough for some things. The screenshot below uses the style: transform: translate3d(-300px, -141px, 0px) on the div containing the map.


1

There is no builtin functionality for this in Leaflet, and no plugin to do it that I am aware of either. You could maybe produce something like it with some CSS transform3d hack, but it would likely look pretty horrible. In general, I think OpenLayers 3 might be more suited for pseudo-3d functionality. I have not used OpenLayers 3 myself, though.


0

You can do it without having to create a million different icon images if you use CSS. Add the marker find the backgroundcolor attribute for the css and change it. Here it is: var marker = L.marker([50,-20], {icon: myIcon}).addTo(map); marker.valueOf()._icon.style.backgroundColor = 'green'


3

I don't know of any built-in functionality or plugins for this, but here is a solution that should get you started (using jQuery). In short, because the Layer Control is generating dynamic html, we use jQuery to select the leaflet control layers overlays, and add a description. Then make use of these built in Leaflet map events to show and hide the ...


1

I found that one way to do this is using the CartoDB Core API. Check this example: http://jsfiddle.net/eczajk1/ok0nseom/


0

I presume, you are running this code directly from your computer, not from web server. In other words, URL in browser's address bar starts with file:/// not with http:// There's cross-domain ajax call in your code: $.ajax({ url: "https://www.openstreetmap.org/api/0.6/way/315192257/full", dataType: "xml", success: function (xml) { var layer = new ...


1

I was having the same issue than you, and then realize that it was a problem on the data. In order to log those errors on the console, you have to put: omnivore.csv('your_file.csv', null, L.mapbox.featureLayer()).addTo(map) .on('error', function(error) { console.log(error); }); And it will tell you which line is not working, such as an invalid lat ...


2

Use dragend method for the marker. Look through the jsfiddle.I hope it helps. http://jsfiddle.net/Poshan/w6ej59jk/5/


0

Another possible problem I see is depending on cartodb.js version you are using it only works with versions of leaflet > 0.7. In your example you are using the css for version 0.6.4


0

It is really hard to diagnose your problem without trying to reproduce it. Do you mind assembling a simple jsfiddle so we can better assist you? Using a hardcoded reference to an element is frowned upon in Angular. Try to use the element reference the directive receives as the second parameter instead: var map = L.map(elm, { ...


2

IE8 can't handle trailing commas in object literals map = new L.Map('map', { zoomControl: true, center: [49.2500, -123.1000], zoom: 10, // Delete this comma }) There are three other trailing commas, around line 57, 67, 96 in the inline script on the index page (console debug in IE will show you where) There will probably be other issues in ...


3

Use the TopoColour plugin, which is already compatible with QGIS 2.x but is not yet available in the official repository: https://github.com/nyalldawson/topocolour Download the zip file and unzip it in the QGIS plugin directory: Linux: ~/.qgis2/python/plugins Windows: C:\Users\{username}\.qgis2\python\plugins


1

Because of the way the BoM appears to produce those images, the "content" will always be in the same locations in geographic space, and in the same location in pixel space. So you should be able to use a Leaflet JS image overlay, specifying whatever turns out to be the equivalent of the outer bounds of the source PNG for the imageBounds argument. An ...


0

So we had a play around with the code you sent through, although I had some help in writing a different reset. This is what it looks like and it seems to work well. function highlightFeature(e) { var layer = e.target; layer.setStyle({ fillColor: "yellow", color: "yellow", weight: 5, opacity: 1 }); if (!L.Browser.ie && ...


1

The popup is printing the text just as you have written it. Use javascript variables in marker.bindPopup, not php: marker.bindPopup(data[i].name + "<br>" + data[i].user_date + "<br>" + data[i].user_time + "<br>" + data[i].address + "<br>" + data[i].icon_name).addTo(map);


2

I think this is an issue with CORS. The layer you are trying to use is on an older version of server (10.0x) which mean that it does not ship with support for cross origin requests (CORS) out of the box. Esri Leaflet assumes newer versions of server (10.1x) which include support for CORS. You just need to tell Esri Leaflet not to use CORS the following ...


2

You can do it pretty easy, here's some code: onEachFeature: function (feature, layer) { var content = ""; content = content + "<b><u>" + feature.id.split('.')[0] + "</b></u><br>"; delete feature.properties.bbox; for (var name in feature.properties) {content = content + "<b>" ...


0

The Leaflet markers clusterer can be used to show directly pie charts on the map. An example is visible on this map showing the breakdown of accidents in Oslo. The code behind is rather well explained and could be adapted for your case.


0

You should use GEOJSON instead, this will allow you to store as much data as you want Here is the data : var path = { "type": "between2captures", "features": [ { "type": "Feature", "geometry": { "type": "LineString", ...


0

I get Leaflet interactivity in two ways, depending on how big the dataset is. I would recommend against WMS getFeatureInfo, because the styling is all set server-side, which is tedious to configure. So, here's my two ways: If the dataset is small, just load the whole thing as a vector (do the request as JSONP or JSON if you have CORS enabled). For example: ...


0

The problem is that redmap in your code isn't a layer, but a map object, that is initialized with a tile layer added. PencilMap, on the other hand, is a tile layer, that is also added to the same map. This means that the map will, from the start, contain both tile layers. I fixed the relevant part of the code to look like this: var redmap = ...


2

in order to style the markers that L.esri.featureLayer helps you add to the map, you can use L.icon. see this leaflet tutorial and this example for more info.


1

Calculate the bounding box of the line (using getBounds() in Leaflet), put a circle with the center at the center of the bounding box, and the radius chosen as half width or height of the bounding box, whichever is highest.


1

i wrote a quick example of loading dojo and leaflet in the same application here that being said, if you are committed to using dojo, it probably makes more sense to maintain a mapping application written with our ArcGIS API for JavaScript, which loads the framework automatically (and uses it internally) than it does to use Esri Leaflet. additonal ...



Top 50 recent answers are included