An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

learn more… | top users | synonyms (1)

56
votes
6answers
32k views

Should I use OpenLayers or Leaflet?

I was debating with one of my collegues on OpenLayers v/s Leaflet. I made a point that OpenLayers is much better API if we wish to build a project, where you need direct connectivity to the Geoserver ...
50
votes
8answers
10k views

How to create Vector Polygons at the same amazing speeds GISCloud is able to render them?

EDIT (outlining new bounty added): I have added the largest bounty possible to this question in hope of getting a very detailed answer. Your solution should outline a step-by-step guide utilizing open ...
24
votes
9answers
18k views

How to convert ArcGIS Server JSON to GeoJSON?

I'm creating a web map using Leaflet, and I want to be able to grab feature layers from our ArcServer. I have successfully been able to retrieve a feature class as JSON, but Esri's JSON objects don't ...
20
votes
5answers
11k views

Visualizing large datasets with Leaflet

When using Leaflet to visualize a large dataset (GeoJSON with 10,000 point features), not surprisingly the browser crashes or hangs. A sub-sample of 1000 features from the same dataset works ...
20
votes
3answers
6k views

Database for offline slippy map tiles

I currently have an offline HTML5 map application (built on Leaflet & KendoUI with custom additions) that has an app manifest and works fine on multiple platforms. However, I am hesitant to use ...
18
votes
4answers
29k views

How to load external GeoJSON file into Leaflet map

I would like to load a geoJSON (polygon) file into my leaflet map. I have seen examples where geoJSON is embedded into the javascript code but I can't find any examples showing how it is done with an ...
18
votes
4answers
35k views

How to show a popup on mouse-over, not on click?

Is it possible in Leaflet that popup opens on mouse-over, not on click? This is working for just one marker at a time, but I need it for a bigger number of markers: marker.on('mouseover', function(e)...
16
votes
6answers
15k views

How to Create Animated Cluster Markers in OpenLayers/Leaflet?

I want to use Leaflet due to the smooth transitions which Openlayers seems like they can't match. I specifically require the ability to cluster markers with custom styled marker groups. The best ...
15
votes
7answers
2k views

Comparing two maps with nice web interface?

Is it possible in Leaflet or OpenLayers to compare two maps with a bar to slide between the two? Examples include: http://www.esri.com/services/disaster-response/hurricanes/hurricane-sandy-the-...
15
votes
2answers
23k views

Adding/Removing Leaflet GeoJSON layers

I'm trying to show different GeoJSON layers at different zoom layers using the Leaflet API. I can load and display all three layers at once (though I don't actually want them all to show at once). I ...
14
votes
4answers
18k views

Custom Leaflet Controls

I have gotton some help in creating a custom control for leaflet, but I am still having trouble upgrading to the CSS styles used by the latest versions of Leaflet. Basically, all I need is a icon in ...
14
votes
2answers
3k views

Understanding web mapping tools [duplicate]

Before I start, this is going to be a general question but with specific cases. I've been trying to understand GIS tools and applications to achieve the following: Build my own basemap Publish the ...
14
votes
5answers
7k views

How do you convert OSM XML to geojson?

I want to take the XML output of a Xapi query and display it using leaflet or polymaps. How can I do that? Is there an easy way to convert XML to geojson
13
votes
1answer
504 views

How to copy the color styling to a color column in a layer's attribute table?

I have a polygon layer in QGIS that I have applied a random color style to each polygon. Under Layer Properties -> Style I selected a Categorized style and then generated a random color ramp. I added ...
13
votes
2answers
2k views

How can I make a polyline wrap around the world?

I am using leaflet maps to create a representation of a round-the-world challenge. I would like to add a polyline which heads east from tokyo and then appears west of south america on the map - but ...
13
votes
3answers
5k views

Open source alternatives to Google's StreetView engine?

I am looking to create an open source javascript app using either Leaflet or OpenLayers. Is there any way to implement panoramic views (similar to Google's StreetView) into either of these, or any ...
13
votes
3answers
4k views

Leaflet: how to draw curved lines?

So, I'm trying to draw curved lines in my application which is based on a Leaflet map. As far as I know Leaflet does not support drawing curved lines at the moment, so my question is really more ...
12
votes
3answers
18k views

How to add text-only labels on Leaflet map with no icon

I'm looking for a way to show text on Leaflet map using markers or anything else without showing any icon. I want to show text only and be able to style and rotate it... Any suggestion? Thanks a lot ...
12
votes
1answer
20k views

How to Add/Remove Legend with Leaflet Layers Control?

I have two overlays http://02d0c8c.netsolhost.com/dev/lcb_census_layers3.html that can be turned on and off with a Layer Control. I’d like the legend for each layer to turn on/off along with the ...
12
votes
2answers
4k views

What is the most common way of displaying geodata from Postgis on Leaflet?

For example, in my database I've some points with geographic coordinates. I want to display them on Leaflet JS layer. Which instruments should I use? Maybe there is some API...
12
votes
1answer
10k views

What is the default projection in Leaflet?

I've read an API documentation for Leaflet on its site, but I can't realize: what is a default projection to view maps? It was written about spherical and elliptical Mercator and Equirectangular - so ...
12
votes
1answer
2k views

Generating Heatmap from PostGIS

I have GIS data in a PostGIS data base and would like to generate a density map and display them on a Leaflet/Google Maps. Question: What is the recommended/typical method for doing so, without ...
12
votes
3answers
4k views

Examples of leaflet interactive mapping applications

I would like to develop a simple mapping application. One where users can digitize lines, polygons and points and attribute the features. The attributes will then be stored in a database for later ...
11
votes
3answers
26k views

How to draw a polyline in Leaflet?

This is my coding I used in Leaflet: var pointA = new L.LatLng(28.635308, 77.22496); var pointB = new L.LatLng(28.984461, 77.70641); var pointList = [pointA, pointB]; var ...
11
votes
3answers
9k views

How to get Leaflet interactivity from Geoserver WMS?

I have geoserver serving shapefiles as a WMS into Leaflet. I'd like to add interativity that shows a popup with WMS attributes in the Leaflet map when the user hovers over or clicks on a WMS feature. ...
11
votes
3answers
10k views

Does Leaflet JS API provide a Geocoding service?

I am considering replacement of Google Maps with Open Street Maps and the Leaflet JS API. Does the Leaflet JS API provide a Geocoding service?
11
votes
1answer
1k views

Leaflet rendering TileMill tiles in the wrong order

I'm stumped, and quite a lot of searching has turned up nothing helpful. I'm on the first step of what will ultimately be a map with three raster layers and three layers of markers (with controls to ...
11
votes
1answer
15k views

Change marker icon on click using leaflet

I have a map with many (>100) markers on it. I would like to make it so that clicking on these changes the icon to a highlighted version. I've created two custom icons, one regular, and one ...
10
votes
4answers
4k views

GeoJSON too bulky - what to do?

I am using leaflet.js to allow web users to select a region. Valid regions are US states, Canadian providences, and world countries (except for US and Canada). I constructed a shapefile myself using ...
10
votes
2answers
4k views

Leaflet mouse wheel zoom only after click on map

I'm working with the Leaflet JavaScript Library and attached a (working) map to my HTML Document. It is in the middle of the page, and when I'm scrolling down with my mouse wheel and arrive at the map,...
10
votes
3answers
3k views

Chart inside pop up window in Javascript

How to show a chart inside pop up window? I'm using Leaflet JS, which has support for raphael plugin http://dynmeth.github.com/RaphaelLayer/. Is it possible to create a div inside popup window? I was ...
10
votes
1answer
912 views

How to add an attribution on a GeoJSON Layer from Leaflet?

I need to use a GeoJSON Layer on my Leaflet map. Here is a sample of my code: function onEachFeature(feature, layer) { if (feature.properties && feature.properties.popupContent) { ...
9
votes
2answers
19k views

setStyle() function for GeoJSON features - Leaflet

Ok, since I already asked a very long question about this, but since it didn't get any new replies for a while, and not to get confused in details, I will keep this one simple the best way I can. If ...
9
votes
5answers
1k views

How to use Leaflet to efficiently show parts of a massive dataset?

I keep seeing non-GIS web developers running into this problem, and I'm not sure what the solution is. There is some dataset of thousands of items. We want to show a map to the user, with the ...
9
votes
1answer
245 views

Mercator bias plot in Leaflet

I was inspired by this wikipedia image from the mercator projections page to hack around with leaflet. The idea was to interactively have your cursor move a continent and that it would be corrected ...
8
votes
1answer
5k views

leaflet geojson coordinate problem

I just started to play with leflet/geojson a little. But my coordinates are not rendered properly and I have no clue what is going on. My coordinates are: 52.23943, 4.97599. They work correct with ...
8
votes
2answers
8k views

Disable panning/dragging on leaflet map for div within map

This may be a bit trivial, but does anyone know how to suppress panning when you click and drag over top of a div box embedded within the map itself? Not sure if this question has been asked in ...
8
votes
2answers
10k views

Leaflet: How to move the layer-control menu?

This might be a silly question, but I could not find a documented way to achieve this. I'd like to freely position the layer-control menu, probably to the top left near the default zoom-in/out button....
8
votes
1answer
2k views

What is the difference between Leaflet and Mapbox?

What is the difference between Leaflet and Mapbox, and how are they used together? Like the API and what exactly are they and is Mapbox using Leaflet?
8
votes
2answers
9k views

Trigger a click event on a leaflet map?

Is it possible to make a click event occur at a particular lat/lon on a leaflet map? I would like to make a popup appear that is associated with a point at a particular location. I have tried several ...
8
votes
1answer
4k views

Zoom further in with leaflet javascirpt API

We're using the leaflet JavaScript API with a tile layer which supports zoom level up to 19. I'd like users to be able to zoom further even if the tiles blur as they have to place markers to a high ...
8
votes
2answers
4k views

Leaflet: Container coordinates vs Layer coordinates?

What is the difference between map container coordinates and layer coordinates? From what I gathered, the map container coordinates are always relative to the map viewport, and while layer ...
8
votes
1answer
14k views

How to change Leaflet Map panes layering order (z-index)?

Leaflet maintains that the Map panes elements contain all layers added to the map. The difference between many of the Map panes is strictly the z-index order of layering. I would like to use a ...
8
votes
3answers
4k views

Click Events with Leaflet and geoJSON

How do I attach a click event to a geoJSON that then executes an Ajax function when clicked. I looked into onEachFeature but that executes when the geoJSON is loaded, not when clicked, thus executing ...
8
votes
6answers
11k views

3D perspective on maps in Leaflet, CartoDB?

Are there any JS library out there that would render normal, flat maps (like Leaflet) into a perspective map like this one, on the web: Also, anyone seen anything that could turn CartoDB data into ...
8
votes
1answer
10k views

problem adding pop-up to GeoJSON layer in Leaflet

I'm new to working with the Leaflet API and am running into trouble with creating popups for a GeoJSON layer. I've looked at the following post as a reference and am still having difficulty: binding ...
8
votes
2answers
7k views

Auto zoom on multipolygon with leaflet

I have a geojson with a multipolygon and I want to fit this multipolygon to the map. The map center only on one polygon not on the multipolygon. Here is my script var map = L.map('map',{ ...
8
votes
1answer
3k views

Generating Interactive Tiles using Nodejs, Mapnik, and PostGIS for Leaflet

I am looking to do something like this but where I have all the data on the same server. I've been following through the set of tutorials @ sparkgeo.com/labs/big/ and I'm having some difficulty. ...
7
votes
3answers
2k views

Advantages of WFS over GeoJSON/KML?

I'm planning to create an online map with openlayers (2 or 3) or leaflet. I have to show some points/markers (~30.000), polygons (~500) and lines on top of an OSM map in several layers. Those points ...
7
votes
1answer
6k views

Disable leaflet interaction temporary

How can I temporary disable zoming/draging the Mapview in Leaflet.js Tried so many ways but without any luck. It's important to make it temporary and I also need the option to enable again.