FAQ Database Discussion Community


Thick white lines on mapbox/leaflet js map

javascript,css,d3.js,leaflet,mapbox
I have embedded a map inside a javascript-generated HTML tooltip in d3.js. Functionally, it works, but there are two white horizontal lines that appear at all zoom levels: The lines only appear when it's embedded in the popup. If I have it outside the popup, the lines disappear. I've checked...

How to display polygons that are within a specific range (circle) using Leaflet

mongodb,leaflet,polygon,openstreetmap,circle
I am trying find a solution on how to display polygons that are only within a specific range, a circle with radius using leaflet. Polygons screenshots Before, I have ask for help regarding on the display of points within a specific range but this time, since a polygon have many...

Centerpoint of the visible GeoJSON path with Leaflet

javascript,maps,leaflet
I am working on a project that is displaying a map centered on a selected country and the neighboring countries, all with GeoJSON. I'm wondering if there is a way to get the centerpoint of the visible portions of a country? Part of the project involves adding country labels as...

how to change url titleLayer mapbox

leaflet,mapbox
I need to change my url because I want modify my view map, but I don´t know how I change this url. I want modify this: L.tileLayer('https://{s}.tiles.mapbox.com/v4/mysaqygi.m8jo7i0g/{z}/{x}/{y}.png' I use mapbox, but I don´t know how to change this url when I create my map. where do I change this? I...

leaflet.js markers not showing up

javascript,python-3.x,leaflet
My code isn't showing the markers all of the time on the leaflet map. My code is below. And below the code is the "view source" I get. As you can see markers are created with locations in my code but just don't show on the map. Any ideas? my...

Performance issue when zooming (Leaflet 0.7.3)

performance,leaflet,openstreetmap,zooming
I'm facing a performance problem with Leaflet (version 0.7.3). I'm working with an OSM map that I use to display a bunch of CircleMarkers linked by decorated Polylines (with arrow pattern every 25px). Loading take a little time but the main problem is that when I zoom the map I...

Removing geojson layers Mapbox.js/Leaflet.js

leaflet,mapbox
I'm having trouble removing multiple geojson layers at a time. When I keep them as feature layers, there is memory of each and every layer added, one right after the other. But when they become marker layers only the last layer clicked is removed. I've tried adding them to a...

Leaflet Realtime GeoJSON dynamic marker color change

javascript,real-time,leaflet,geojson
I have a map built with Leaflet which displays markers from a GeoJSON using Leaflet-Realtime plugin and Leaflet-awesome-numbered-marker plugin. However I noticed that the markers color doesn't change dynamically, but it changes if I reload the page. Here's the code so far: var map = L.map('map', {center: [46.7634, 23.5996], zoom:...

Update Leaflet marker className

javascript,leaflet
I have a L.layerGroup() called var stopsLayer. I want to iterate through it when certain parameters have been set by the user and "turn on" only those that match the user's input. Turning on a marker implies it exhibiting one style versus the default. The method I have for accomplishing...

Add empty overlay to leaflet map?

angularjs,leaflet
Looking for a way to add an empty overlay to a Leaflet map. I have multiple Leaflet overlays that load in their data from a realtime server. Because I am using a custom UI control and not the default Leaflet one, I have a listener that every time new markers...

Bootstrap and Leaflet Integration

html,css,twitter-bootstrap,leaflet
I am having a problem in combining my website (based on bootstrap) and a webmap based on leaflet. The Mapbox tiles are shifted vertically. I think that the issue is due to a conflict between the two .css (bootstrap and leaflet) files. Here the link to my webpage. http://www.geo.uzh.ch/~fkaelin/Ex03.html. I...

Zoom in on maker group in leaflet mapbox?

leaflet,mapbox
I have a layerGroup in my map which has a lot of markers and another layerGroup which has a lot of circles. I need to zoom in on these layer groups but I cannot find the exact API method to do so. I have tried: var myLayerGroup = L.layerGroup().addTo(map); myLayerGroup.fitBounds();...

How to remove all layers and features from map?

jquery,leaflet,mapbox
I am working on a map and I would like to remove all features from the map on a certain event. The features are in multiple layers which are plotted dynamically. Some of the code is: $.getJSON('distributor-companies', function (data) { var layers = []; $.each(data, function (i, item) { if...

How to draw rectangle marker in leaflet given only 1 [lat,lon] pair

leaflet
I need to draw a rectangle around a point in leaflet map. the point is a [lat,lon] pair. How can I easily do that? I know its easy to draw a circle. But how can I draw a rectangle?

In leaflet, how to detect whether a LatLng in current display area?

leaflet,mapbox
As I know, map.project(latlng) can return a point. However, I've no idea about how to tell whether this point is in the current display area of the map.. Does anyone have ideas about this?...

How to plot a marker away from another marker by 100 metres in Mapbox Leaflet?

leaflet,mapbox
I am trying to plot a marker using Leaflet and then another marker away from the the first one by 100 metres. Plotting a marker is easy: var marker = L.marker([0, 0]).addTo(map); But now how do I plot another marker away from this one by a 100 metres? Is there...

Json file dosen't show up in google chrome

jquery,json,google-chrome,leaflet
I'm developing a page that shows a Json file via jQuery and Leaflet. The Flickr side is working fine, but when I try to $.getJSON o, I see an error in Chrome's console: XMLHttpRequest cannot load file:///C:/AppServ/www/PFEleaflet/test%20geojson/lot.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension,...

How to set scrollWheelZoom to false in a map using leaflet in Shiny?

r,leaflet,shiny
I am using Shiny to build an application using the leaflet library. I create the map at the ui.R using leafletOutput() and render it at server.R using renderLeaflet(). I can add markers, set zooming factor, etc. Everything works like a charm. The problem is that I cannot find a way...

Trouble with adding open MapQuest leaflet plugin to my webapp

leaflet,mapquest
i am trying to add the open MapQuest leaflet plugins to my webapp. When I run the app I get this error in the console: Uncaught ReferenceError: L is not defined It is in line 45 of the mapquest js files that I add. I have an open app key...

Gradient fill for circle in Leaflet

javascript,svg,leaflet
I am looking for a way to create a circle with a gradient fill in Leaflet. My approach so far is to define the fillColor of the circle as 'url(#gradient)' and add the Gradient definition manually via the following code: function createGradient (map) { // Get the SVG element from...

.bindpopup function is not working for displaying a large amount of points onto a map (Leaflet)

mongodb,popup,leaflet,openstreetmap
I am trying to make use of the bindpopup function to display more than 100 points on a map, but the function is not working as expected. The points are added without any error on the map but when it comes to adding the .bindpopup function, no map is being...

Leaflet Control.Layers wrong checked state

leaflet
I'm using LayerGroups and I want to be able to show/hide those groups with a layers control The several LayerGroups appear on the map but the associated checkbox for each one is unchecked by default, if I click once in the checkbox it behaves properly. Here's the project How can...

Is there a way to filter geojson by clicking polygon in Leaflet?

leaflet,mapbox
I have implemented a geojson filter using toggle buttons with a LayerGroup, but would like to know if anyone has been successful with same behavior using on-map mouseclicks. Example: map of world countries. click on Italy polygon results in only Italy being visible. Click outside Italy to show all countries...

setBounds to two different featureGroups at once mapbox leaflet?

leaflet,mapbox
I am working on a map where I have two feature layers. var myFeatureGroup1 = L.featureGroup().addTo(map); var myFeatureGroup2 = L.featureGroup().addTo(map); I am setting bounds like: map.fitBounds(myFeatureGroup1.getBounds()); map.fitBounds(myFeatureGroup2.getBounds()); But for obvious reasons, myFeatureGroup2 is set bounds on. Is ther a way by which I can fit bounds to multiple layerGroups? Like...

leaflet: don't fire click event function on doubleclick

javascript,leaflet
I have a question concerning clicks on a map in leaflet. If I click on the map I want to set a marker there, but if doubleclick on the map I just want to zoom in without setting a marker. So I have the follwing code: var map = L.map(attrs.id,...

Only return selected geojson elements in leaflet

leaflet,geojson,overpass-api
I have this code that get all OSM alley elements in a map and that has a button to print all elements retrieved with overpass api. Instead retrieving all elements, I would like to me able to : select multiple elements on my map by clicking on those I want...

How can i draw a rectangle in leaflet map given lat long position of two points

google-maps,leaflet
I have been given [lat, long] position of two points in a leaflet map. I have to draw a rectangle covering those two points in such a way that one point falls in the middle of 1st width edge and the second point falls in the middle of the second...

How to convert GTFS formatted data for plotting in R?

r,dictionary,gis,leaflet,gtfs
I would like to create an interactive map showing the public transport lines of a city. I am trying to do this using Leaflet in R (but I'm open to alternatives, suggestions?) Data: The data of the transport system is in GTFS format, organized in text files (.txt), which I...

Leaflet slider group by year

jquery-ui,dictionary,slider,gis,leaflet
I'm using leaflet slider - https://github.com/dwilhelm89/LeafletSlider - but I can't get the desired result, even if from the plugin description it seems it can do. I have a collection of features, geometry type is polygon, where I've inserted a property "time" as requested by the plugin. I've tried bot with...

Leaflet.js map has extra grey space on all sides and lets me drag infinitively

javascript,leaflet
I am using Leaflet.js to generate a map with some layover information. I turned on the noWrap option so that the world does not repeat. However, there is a lot of unlimited grey on all sides. I can drag the area infinitely. Unfortunately, I need to have the drag functionality...

Leaflet: check if object is Path or Marker

javascript,leaflet
I have the following code to add a GeoJSON layer to a map using Mapbox.js (which of course is built on Leaflet.js): var orgLayer = L.geoJson(boundaries, { onEachFeature: onEachFeature }); this.layerGroup.addLayer(orgLayer); function onEachFeature(feature, layer) { layer.on('click', zoomToFeature, _this); } function zoomToFeature(e) { this.map.fitBounds(e.target.getBounds()); } The problem I'm having is that...

Create interactive webmap with markers in R using Shiny, Leaflet and rCharts

r,maps,leaflet,shiny,rcharts
I am trying to create an interactive webmap in R to display storms using Shiny, Leaflet and rCharts (the structure is loosely based on the http://ramnathv.github.io/bikeshare app). The idea is that the user selects one storm name at a time (df$Name) and the markers for that storm (lat/long) are displayed...

In leaflet, how to calculate the Pixel Distance between two LatLng object?

gis,leaflet,mapbox
There is a latlng distanceTo method: http://leafletjs.com/reference.html#latlng distanceTo( <LatLng> otherLatlng ) Number Returns the distance (in meters) to the given LatLng calculated using the Haversine formula. See description on wikipedia It calculates the distance (in meters) between two LatLng. However, sometimes I needs to know how many pixels are there...

leaflet.js remove drawing layer

javascript,leaflet
With leaflet.js using leaflet.draw.js after using the draw tool to draw one of the shapes on a custom map. I have a form that pops up which says save or cancel. If the user presses cancel, then I want the drawing to be deleted. For example I was drawing a...

Display Data on Leaflet exclusively with Data from PostGIS

gis,leaflet,postgis
First of all let me say what this post is not all about. Am not asking about how to use PostGIS and Leaflet. I have that resolved in this post. What I am asking is a bit extension of the linked post. In the linked post when I show a...

How can I fix bootstrap leaflet map mobile display?

twitter-bootstrap,mobile,leaflet,mapbox,window-resize
I'm using bootstrap to set up a leaflet map. Works great on browsers so far, but does not display at all on a mobile. Tried the invalidateSize(); work around to no avail (Leaflet map not displayed properly inside tabbed panel) See code below. <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div...

Displaying PostGIS Data with Leafletjs

javascript,postgresql,yii2,leaflet,postgis
I'm learning GIS with PostGIS and I wanted to try something funny so I downloaded shape files from OSM, imported in PostGres with PostGIS extension and now I want to represent data from PostGIS visually. I have Pulled data with Query SELECT ST_AsGeoJSON(geom) FROM "dar-es-salaam_tanzania.land_coast; I got bunch of GeoJSON...

Leaflet map sources

leaflet,openstreetmap,angular-leaflet-directive
Is there a list for all potential map sources out there? On the sample page one can browse through four types of maps. What else is out there? http://tombatossals.github.io/angular-leaflet-directive/#!/

How to get all markers on Leaflet

leaflet
I have a listener that will detect changes of the location of objects on databases. It will pass all the information of the object that is being changed. I want to get all markers from the current map and find the marker that is affected. Once found, update the location....

Find if a geometric point is within one of several polygons

node.js,mongoose,leaflet
I'm trying to find if a geometric point is within one of several polygons, i'm working wiht mongoose and node js. I found in Mongoose documentation this code. var polyA = [[[ 10, 20 ], [ 10, 40 ], [ 30, 40 ], [ 30, 20 ]]] query.where('loc').within().geometry({ type: 'Polygon',...

Leaflet/Mapbox Markers Don't Repeat After Scrolling Around the Atlas

leaflet,mapbox
Screenshot from Mapbox docs: It seems as though Mapbox won't render given coordinates multiple times on the same map, even if the map is zoomed out far enough to view the same latitude and longitude pairing twice. Is there a way around this? ...

Multi continents shown when at max zoom in leaflet - data only shown on center continent

leaflet
New user to Leaflet here and I've developed a mapping application that pulls geoJSON from an Oracle db. This all works but if I zoom Leaflet all the way out where it shows multiple copies of the continent my data only shows if I zoom into the center continent. My...

Zoom to fit leaflet.js markers

leaflet,openstreetmap,fitbounds
I'm converting my site from google maps to leaflet/openstreetmap. On the site, search results show up as markers on a map. Results can have one marker, or 10, or 200. That's all fine and great. But when the results have multiple markers, I'm having trouble getting it to zoom/fit all...

Use scope as id to create map in Leaflet

javascript,angularjs,leaflet
In view i use ng-repeat which allow me to use $index for each item, i try to use this property to create one map for each item in ng-repeat View <div map-directive id="map{{$index}}" name="'map' + [$index]" class="mapContainers"> </div> SO now id is map0, map1 and so on. Directive var map...

ionic & LeafletJS set marker

javascript,ionic-framework,leaflet
I am trying to set markers to my $scope.map variable with L.marker([location.lat,location.lng]).addTo($scope.map); , but I keep getting this error: TypeError: t.addLayer is not a function at o.Marker.o.Class.extend.addTo (leaflet.js:7) at mapController.js:82 I don't know why, because I am basically doing the same as in http://leafletjs.com/examples/custom-icons.html and as it is specified in...

Where is Leaflet JS object that holds all “features” on US map?

javascript,leaflet
I am working with the Leaflet US map example and I have a situation where I need to have one state already highlighted when the map page loads. The highlight code is fairly straightforward (this is directly from the map example code and works fine): function highlightFeature(e) { var layer...

create a fake map with markers using leaflet in R

r,leaflet
I would like to create a fake map with leafleat. The idea is to have a circle with center in 0,0 and radius 2 and show some markers inside. This is how I generate the circle (comments on how to improve the code are very welcome!) library(sp) library(leaflet) circleFun <-...

How to print/display/draw a MultiPolygon GeoJSON on a Leaflet map

javascript,angularjs,leaflet,geojson
I'm trying to display a GeoJSON MultiPolygon object in a Leaflet map. I get it from a PostgreSQL database as a JSON and I trnasform it to a GeoJSON. I've validated de MultiPolygon object in GeoJSONLint and it's ok: But I'm not able to accomplish this in my app =(...

How to access map generated by leaflet in R

r,leaflet
Let's say I have a code like this # Install devtools if needed if(!require(devtools)) install.packages("devtools") # view rawif-devtools.R hosted with ❤ by GitHub # Install leaflet package if(!require(leaflet)) install_github("rstudio/leaflet") library("leaflet") mymap <- leaflet() mymap <- addTiles(mymap) mymap This opens it up in Chrome with a filepath like this: file:///var/folders/8x/v2tk5zy51x51jx9jbp0m29qr0000gn/T/RtmpQaeu1E/viewhtmlf74547061f7d/index.html. Let's...

Color transition effect in Leaflet.js?

leaflet,mapbox
See this example: https://www.mapbox.com/ten-years-openstreetmap/ Does anyone have any ideas about this? Is it done by CSS transition or Leaflet API?...

Leaflet map “center” option not working

javascript,leaflet
I have a map and I want to center it to concrete point. Following implementation is working correctly: var map = L.map('map', { crs: crs } ); map.setView([58.66, 25.05], 2); However, implementation below is not working correctly and does not center the map. Why it is happening? I get just...

Javascript getter - why does it get called at construction?

javascript,leaflet,ecmascript-5
I'm new to Javascript getters/setters, but thought to use them in my Leaflet- and browserify-based project. Got a surprise. The getter gets called at initialization, for some reason unknown to me, before the class's own initialize method (Leaflet construction callback) gets to run. This of course means members are undefined...

How to get ID of layer in feature group on click

leaflet
I have a feature group containing several markers. And I have this code to respond to a click on any of the markers: sampleFeatureGroup.on("click", function(){ alert(this.id); // something like this }); I want to be able to get the id of the marker which is clicked on from within the...

React.js and Mapbox: mapbox map not rendering properly when using react.js

javascript,leaflet,reactjs,mapbox
I'm learning to use both react and mapbox,but am struggling with why my mapbox map is not rendering properly when loaded through React. When I load it normally (without React.js), there is no problem, as this following code works and the map appears normally: <script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script> <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css"/> <div>...

Leaflet package in R not plotting all coordinates

r,mapping,leaflet
I'm trying to plot using leaflet with a somewhat sizable set of coordinates (~34K latitude/longitude pairs) however, using the code below it seems that leaflet is only plotting a small portion of these: data <- read.csv("Food_inspections.csv", header = TRUE) names(data) <- tolower(names(data)) data1 <- filter(data, risk == c("Risk 1 (High)","Risk...

proper implementation of invalidateSize() to display mapbox/leaflet on mobile device

mobile,maps,leaflet,mapbox,window-resize
I started a question about a bootstrap leaflet map not displaying on mobile devices How can I fix bootstrap leaflet map mobile display? Since then I have used a simple mapbox template for a map and with invalidateSize() as outlined here https://www.mapbox.com/help/why-map-cropped-hidden-shown/ But still no luck getting the map to...

Leaflet Choropleth Map and D3 Line Graph Interference

d3.js,leaflet
I am trying to create a choropleth map in Leaflet with a D3 line graph. I followed this tutorial to create a choropleth map and I followed this tutorial to create a D3 line graph. When I tried to put the two of them together, the Leaflet choropleth map takes...

In leaflet/mapbox, why can't I set the duration of `map.fitBounds`?

gis,leaflet,mapbox
I tried this: map.fitBounds(L.polyline([L.latLng(40,9), L.latLng(1,2)]).getBounds(), { padding: [50, 50], maxZoom: 17, animate: true, duration: 10 }); I expect the animation to take 10 seconds to complete, but it completes very fast.. Does anyone have ideas about how to make the duration longer for fitBounds?...

Plotting markers using leaflet and rCharts from a data frame with lat and lon values

r,gis,leaflet,rcharts
I am trying to learn the Leaflet functionality with rCharts and would like to plot multiple markers and popups garnered from a data.frame object in R df <- data.frame(location = c("White House", "Impound Lot", "Bush Garden", "Rayburn", "Robertson House", "Beers Elementary"), latitude = c(38.89710, 38.81289, 38.94178, 38.8867787, 38.9053894, 38.86466), longitude...

Set tooltip on custom leafletjs control.

javascript,tooltip,leaflet
I have made several custom buttons in Leafletjs - now I would like to add a hover-over tooltip to explain what the button does. I've tried putting a "title:" and "tooltip:" in the options but still do not see the text when I hover over the control. var load =...

how change type map mapbox-leaflet

leaflet,mapbox
I want type of map in a map that I create. I use leaflet and mapbob, but I dont know how change the type of map. var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-zr0njcqy/{z}/{x}/{y}.png', { attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>' }); How I change the content tileLayer by one create for me? Thank...

Leaflet: Toggle GeoJSON layers with Checkboxes in custom sidebar

toggle,leaflet,geojson
I have a custom sidebar sitting on top of my map. Within the sidebar are checkboxes: <label><input type="checkbox" name="points" value="addressPoints" /> COUNTY</label> I would like the map to load with none of the GeoJSON layers pre-loaded and the functionality to toggle a layer on by clicking the checkbox. Below is...

interactive map with leafletR variable point size

r,leaflet
I create an interactive map as follows: library(leafletR) data(quakes) # store data in GeoJSON file (just a subset here) q.dat <- toGeoJSON(data=quakes[1:99,], dest=tempdir(), name="quakes") # make style based on quake magnitude q.style <- styleGrad(prop="mag", breaks=seq(4, 6.5, by=0.5), style.val=rev(heat.colors(5)), leg="Richter Magnitude", fill.alpha=0.7, rad=8) # create map q.map <- leaflet(data=q.dat, dest=tempdir(), title="Fiji...

Deploying R shiny app using leaflet

r,shiny,leaflet
I would like to create a shiny map using leaflet which I can publish online do that others without R can view and interact with it. I can create a shiny app using leaflet, but when I use the 'publish' button in the popup window I get an error saying...

Why is my Leaflet popup closing unexpectedly?

javascript,jquery,popup,leaflet
I have a feature that allows the user to look up a marker and zoom to its location, at which point I want the popup to open. Everything is working fine, except that the popup closes after the function fires. I can't figure out what's making the popup close. Here's...

How to smoothly load 200MB data to browser for visualization?

javascript,d3.js,leaflet,data-visualization,kibana
The 200MB data is collected among 300 days, about 600kb daily. Currently I use d3.tsv to load one file containing all data, and then use setTimeout to loop through each day. But the question is to load 200MB data to client's browser, it can take a few minutes... How to...

Creating a button for Leaflet JS “panTo spot on map” outside of the map in Meteor

meteor,leaflet
I have created a map in Meteor using Leaflet JS. The problem is, I could only get map.panTo to work inside the Template.dynamicmap.rendered area. However, this makes it so anywhere you click on the map pans to the location. This is the complete rendered area with id and access token...

Leaflet map legend in R Shiny app has doesn't show colors

r,shiny,leaflet
When I try to add a legend to a leaflet map for a leaflet map (using the Leaflet for R package) incorporated into a Shiny app, the legend does not show the colors of the color palette. Instead it only shows the colors specified for the NA values, in this...

Handling `'createWebDependency' is not an exported object from 'namespace:shiny'` error in Leaflet Shiny

leaflet,shiny
When I try using leaflet with shiny I get the error Error : 'createWebDependency' is not an exported object from 'namespace:shiny' A search online for this error doesn't give me any hits....

Adding geoJSON feature attribues to mapbox popup

javascript,gis,leaflet,mapbox,geojson
I am looking to add a popup with geoJSON attributes to each book store marker on my map. I have used "layer.feature.properties.name" within the marker.bindpopup method, but am getting a return of "undefined". L.mapbox.accessToken = 'jk.eyJ1IjsdkjfhskjdfhksdskdjflWNCJ9.Ov2O5PtskdljfsdR0lq3Q'; var map = L.mapbox.map('map', 'example.kks3kec4') .setView([38.633, -90.319],12); //add cafe, books store, and university geoJSON...

How to move marker in Leaflet along a circle?

javascript,algorithm,leaflet,mapbox
I am working on an application where I have a marker and a circle around it. Now I am creating another marker on the circumference of the circle which is draggable. But I only want it to be draggable on the circumference itself. var coords = [parseFloat(response.lat), parseFloat(response.long)]; terrainAnalysisMap.setView(coords, 18);...

Leaflet Map error on jquery mobile

jquery,jquery-mobile,leaflet
I'm adding a simple map on jqm. The issue I am getting in console is: GET http://a.tile.openstreetmap.org/NaN/0/0.png 404 (Not Found) JS: var map = L.map('map'); $(document).on("pageinit", function () { L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18}).addTo(map); }) On a click function adding a Marker with: L.marker([39, -6.85]).bindPopup("test").addTo(map); map.panTo(L.latLng[39, -6.85]); Using leaflet 0.8. It seems...

When do I need mapbox.js?

leaflet,mapbox
I am trying to figure out whether I really need to use mapbox.js, or whether leaflet is sufficient for a mapping project. We will probably be hosting data and tiles ourselves (not basemaps). Where can I find a list of features provided by mapbox.js? I know, for example, that mapbox.js...

Leaflet, clicking zoom control removes pagging-top

twitter-bootstrap,leaflet
I am trying to put a bootstrap nav bar on top of my leaflet map. When I click on the zoom control buttons my nav bar disappears and I have no idea why. Is this a leaflet bug? <body> <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner"> <div class="container"> <div class="navbar-header"> <a...

Leaflet fixed pop-up position

javascript,html,google-maps,leaflet,geojson
I have create my map with Leaflet exactly how I want it (with my markers and externals links). I would like to have the popup always fixes in the top right hand corner (for an example). Is there any way to fix the popup's location ? This is how it...

Markers not plotting on map using Mapbox and leaflet?

jquery,leaflet,mapbox
I am trying to plot markers from the data I receive for the server. The data is coming in and I can dump via console.log and similarly the marker is also being created as I can dump it also via console.log but the only problem is that I cannot see...

How do I resize SVG images on a map as the zoom level changes?

javascript,css,d3.js,leaflet
I'm using leaflet to allow uses to draw custom SVG paths (polygons) on a map. The problem is that when the user zooms out, the polygon becomes too large and obscures the rest of the map. I've looked online for examples, and the resources I've come across uses the geo...

Custom Mapbox Geocoder Control

leaflet,geocoding,mapbox
I felt like this would be a simple task to do a Google / StackOverflow search for, but I can't seem to find anything on the topic... Anyways, all I want to do is create my own Geocoder Search bar that works OUTSIDE of my mapbox map. For instance, take...

Cant access member of object

javascript,object,numbers,leaflet,member
I have an issue to access a member in the object DOM, because the object name is a number! I am working with leaflet.js and I created a layer with a path. Now I want to access the polylines latLngs. In this case I wanna access the layer "100". The...

how can I reduce the digits after the decimal point to only 5 digit latitude longitude in string?

javascript,jquery,leaflet
I have this string generated with terraformer-wkt using leaflet: POLYGON((-66.85271859169006 10.488056634656399,-66.85351252555847 10.486178802289459,-66.85342669487 10.485250431517958,-66.84864163398743)) I want reduce the decimal digits only 5 digit after the point . POLYGON((-66.85271 10.48805,-66.85351 10.48617,-66.85342 10.48525,-66.84864)) I saw in javascrips how reduce Convert a number into a string, keeping only 5 decimals but I dont know...

Leaflet Routing Machine API - route with waypoint as start and end point

api,routing,leaflet
When adding a waypoint twice (as a starting point and as an end point of a route, the route is not displayed. How to change the code so that it works? L.Routing.control({ waypoints: [ L.latLng(lat1, long1), L.latLng(lat2, long2), L.latLng(lat1, long1, ], serviceUrl: 'http://router.project-osrm.org/viaroute', routeWhileDragging: false, addWaypoints: false, lineOptions: { styles:...

Mapbox JS markers not being removed using .removeLayer()

javascript,leaflet,mapbox
I have a function that successfully adds markers to a map using the mapbox javascript library. However, I want the function to clear all markers from the map before adding two new ones, so that only two markers are showing at a time. I have looked at other questions/answers here,...

Several different leaflet maps on same page

leaflet,mapbox,gpx
I like to draw several different small segments (gpx-files), each on a separate leaflet map With this code I tried to write around the problem, that leaflet needs a new layer for map I used the "layers"-array to store all map references... <script> var layers = []; var i =...

Leaflet-draw : Create editable layers

angularjs,draw,leaflet,geojson,angular-leaflet-directive
My objective is to have a map to which I can add markers/polygons/... These elements will be saved into an Object for saving. The drawn elements can later be edited/deleted or added to. I have successfully managed to create/edit/delete them, but when I init my map with the saved objects...

Serve private mapping from S3 tiles by proxying data or signing urls through heroku?

heroku,amazon-s3,mapping,leaflet,cesium
I want to store mapping tiles in a private S3 bucket. Each tile has its own URL and each set of tiles could potentially have GBs of tiles. I then want to visualise these tiles through a front end mapping client (e.g leaflet). This client pulls tiles as it needs...

In Mapbox.js, how to smooth a polyline?

javascript,geometry,leaflet,mapbox
The code can be viewed at http://jsfiddle.net/qsr5bs6v/ Following are the lines to add a polyline L.polyline([[31.233, 121.465], [31.233499, 121.500634], [31.190172, 121.588107]], { color: '#000', smoothFactor: 10.0 }).addTo(map) As can be seen, there is an angle in the joint point of every two lines belonging to the polyline, like this, which...

Angular-Leaflet-Directive: Set opacity of a layer

angularjs,leaflet,angular-leaflet-directive
I am using the angular-leaflet-directive. Is there an option to change the opacity of a layer? With 'regular' leaflet I can use layer.setOpacity(0.5). But there seems to be no option in the angular-leaflet-directive. Edit: here is my leaflet configuration: angular.module('epic-taxi') .controller('MainController', ['$scope', function($scope) { $scope.initMap = function() { angular.extend($scope, {...

How to get the leaflet-control-layers-toggle icon to show with angular-leaflet-directive

angularjs,leaflet,angular-leaflet-directive
Following instructions as per Layers Simple example on tut: http://tombatossals.github.io/angular-leaflet-directive/#!/examples/layers-simple Inclusion of below successfully loads on page, yet icon in top right to toggle different layers is not produced. No direction provided on repo as to ensure that it is produced. $scope.layers = { baselayers: { osm: { name: 'OpenStreetMap',...

Leaflet - Event on tiles loading

javascript,leaflet,mapbox
I am currently developing a map-based application and need a way to get notified when Leaflet is pulling tiles from the TileProvider (which, in my case, is MapBox). I read the Leaflet documentation, especially the part with the TileLayer. Currently, I am using the following code to attach a tileload...

How to set custom icon for Leaflet Realtime plugin with Leaflet?

javascript,leaflet,geojson,markers
I'm new to Leaflet JS. I'm trying to figure out a way to change the default style for a L.Geojson marker used in Leaflet Realtime plugin. I don't know what property to change so that I can change the style of the markers. Here is my code so far: var...

How to display custom markers in Map

leaflet,geojson
Hi I need to display custom markers in map but its unable to display on my map,please help me how to display custom markers. This is my json Object: { "features": [ { "geometry": { "coordinates": [ [-89.39982622861862, 43.06710857435938 ], [-89.39982622861862, 43.06710857435938 ] ], "type": "Point" }, "id": "ci7gsmklj004ahym0qpgca8j7", "properties":...

Labelled satellite base map layer (not using Google Maps)

leaflet
I am having trouble recreating in Leaflet something that I found possible using the Google Maps API, which is having the base layer of my web map being geographically labeled satellite imagery. I can find "Street View" base imagery and I can find satellite imagery, but not with them combined...

Change polyline options leaflet

javascript,leaflet
I want to change the options assigned to a Leaflet polyline (and then render it) after building it: // Add polyline var polyline = L.polyline([], {weight:weight, opacity:1, color:'gray'}).addTo(map); // Attempts to change color polyline.options.color = 'blue' // doesn't render polyline.options.color('blue') // throws error polyline({color:'blue'}) // throws error polyline._updateStyle(polyline) // throws...

D3 bar chart from geojson

javascript,jquery,d3.js,leaflet
Has anyone worked on programmatic D3 bar charts inside div objects? I'm developing a series of layers in a web map (leaflet) for a project and I'm struggling with this part. I understand the process of how to send a D3 object to a div which in turn is sent...

Load GeoJSON into layer from a URL?

javascript,leaflet,mapbox
I'm using Mapbox 2.1 and I'm trying to build a chloropleth map from a GeoJSON source, working from this example: https://www.mapbox.com/mapbox.js/example/v1.0.0/choropleth/ However, I've fallen at the first hurdle, because my GeoJSON source is a pure GeoJSON file, not a JS file like their example. So this line doesn't work for...

Leaflet popup close button

javascript,html,google-maps,leaflet
I'm making a leaflet map for my own website, I'm not good at javascript html and css, so that's why I going to ask this question here.. Is there anybody who know how to add a X (Close button) to the right corner? The code I am using can be...

Ionic / Leaflet - Can't get Tiles 404 Not Found (from cache)

http-status-code-404,ionic-framework,leaflet,ionic,angular-leaflet-directive
I'm locked with an issue that is very odd. I'm using leaflet with angular-leaflet-directive. On the previous app, everything worked. Now on a new app, I'd like to implement a new leaflet map. I have therefore copied my previous code. My Issue is that, the leaflet map opens, my markers...

Leaflet-Omnivore make external file.geojson available to javascript variable

leaflet,mapbox,turfjs
I'm using the Omnivore extension to load my GeoJSON files into a Mapbox/ Leaflet map. Later, I'm using Turf.js on this data. I'm loading the external GeoJSON file to the map as a customLayer, but having trouble making the GeoJSON data available in the variable pts for use later. var...

Open leaflet marker using url parameter not working now that markercluster is used

javascript,leaflet,mapbox,markerclusterer
I have a leaflet application at http://atlantaartmap.com. The javascript it uses is http://atlantaartmap.com/lazy_art.js. At line 16, I grab a url parameter that can be used to open the map on a specific piece. While creating the markers, there is a piece of code at line 71 that checks to see...

leafleft/mapbox markers stack on top of each other

leaflet,mapbox
This is how I create map and add markers to it: var map, cinemaLayer; map = L.mapbox.map('map-player', 'XXX', { zoom: 10, minZoom: 10, maxZoom: 14, }); cinemaLayer = L.mapbox.featureLayer(); marker = { lat: 48.8656, long: 2.3246, layer: {} }; marker.layer = L.marker(L.latLng(marker.lat, marker.long), { icon: L.divIcon({ className: 'marker-cinema-location', iconSize: [40,...