OK, whoever is struggling with that. The trick is to set the zoom BEFORE you set the center coordinate.. ..for whatever reason....
After debugging by the elimination method, I finally found the source of the problem. It was in the css, in an external theme. The culprit was this line: img { max-width: 100% !important; } I removed it and the markers came back :)...
javascript,geometry,leaflet,mapbox
You can use turf-bezier to create an interpolated bezier line out of any LineString geometry.
map.getBounds().contains(point); Returns true if point (LatLng object) is in the map view. See the docs: http://leafletjs.com/reference.html#map-getbounds...
Switch from using layerGroup to featureGroup, theb you can use getBounds() on a feature group to retrieve its bounds, then use map.fitBounds(result) to zoom to that view.
We can send cross domain AJAX requests using JSONP. Below is the simple JSONP Request: $.ajax({ url : url, dataType:"jsonp", }); Source Working like a charm. :)...
I assume you are talking about the background tile layer. It is png tiles served from a server, so unless they have a set without those borders, no, there is no way to remove them. However, you can custom roll your own tiles using a variety of methods. Mapbox methods:...
Are you sure that your image has alpha transparency around the circle? Also, you can just use RMAnnotation and the RMMapViewDelegate method to provide a layer (RMMarker or otherwise) for it rather than having RMPointAnnotation try to provide it for you.
javascript,svg,d3.js,leaflet,mapbox
You need to listen for the "zoomanim" event and get the new center of your circle by doing the following: var coord = map._latLngToNewLayerPoint(new L.LatLng(51.5, -0.087), e.zoom, e.center); The animation of the marker is performed by CSS, specifically the class selected ".leaflet-zoom-anim .leaflet-zoom-animated" (look in leaflet.css). You need to do...
javascript,css,d3.js,leaflet,mapbox
Line 155 in your styles.css: div.popup img { padding-bottom: 5px; padding-top: 5px; } Tiles are images too so that rule affects the images in your tilelayer...
The 'removeLayer' method just removes the layer from your map instance and keeps it intact so you can re-add it later. You'll need to call the clearLayers() of L.mapbox.FeatureLayer which will remove all the added features from the layer: featureLayer.clearLayers(); Also you're overwriting the reference featureLayer which holds your layer...
javascript,jquery,mapbox,geojson
I'm getting a 401 error when using your token: Failed to load resource: the server responded with a status of 401 (Unauthorized) When i use your code with Mapbox's example token and map (note, you should be using your own token and map) it's perfectly fine: L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ'; var...
Old markers are getting redrawn because you're not emptying the marker array after you clear the layers on the map. After your first if statement you need to empty markers variable by setting markers = []. This way, when marker.push gets called in your forEach loop, their getting added to...
Basically you have to register a listener for select event: geocoder_control.on('select', function(object){ var coord = object.feature.geometry.coordinates; //create and add your marker }); I've made an example for you: http://plnkr.co/edit/joOXJ6?p=preview...
Hm, okay - a few tweaks are necessary or recommended here: drawLocations(layer._geojson) Anything starting with a underscore in leaflet or Mapbox should be considered off-limits. Use the .getGeoJSON method instead. drawLocations(layer.getGeoJSON()); It doesn't look like you're actually adding layers to the assetLayerGroup. If you wanted to do that, you would...
You're using the wrong parameters for L.mapbox.map, the first element is correct, that's for the ID of a HTML element or a reference to an HTML element. The second however, isn't for the options object. The second is for your mapbox mapid (or url, or tilejson), which you get when...
That's happening because L.GeoJSON doesn't automaticly know that you want to set the marker options, so if it encounters a Point feature, it simply adds a default marker. If you want to do something special with point features, you can use the pointToLayer function of L.GeoJSON, check the following example:...
The short answer is you can't do this: Mapbox's API is ESPG:900913-only. The long answer is that if you really want to, you can use GDAL to represent your ESPG:4326 image as a non-geographic 900913 image. This is, to be clear, the long route and means that you'll need to...
mapping,gis,mapbox,mapbox-gl-js
Take a look at this fiddle. You can use a function like: function jumpTo(index){ map.setView(positions[index], 4, { pan: { animate: true, duration: 2 }, zoom: { animate: true } }); } And control it on moveend event....
javascript,leaflet,reactjs,mapbox
You're missing the related CSS? You always need to set the height of the element: html, body, #map { height: 100%; } I am unable to test because of React but it sounds like the map is unable to get the correct dimensions from the element. That usually happens if...
Like this: // Provide your access token L.mapbox.accessToken = 'pk.yyyyyyyyyyyyyyyy'; // Create a map in the div #map L.mapbox.map('map', 'jonataswalker.kieo57jb'); //put yours here ...
There currently is a bit of disconnect between instantiating the UserLocationOverlay directly versus using the infrastructure bundled into the MapView. Give the following a try instead: // Setup UserLocation monitoring MapView mv = (MapView) view.findViewById(R.id.locateMeMapView); mv.setUserLocationEnabled(true); mv.setUserLocationTrackingMode(UserLocationOverlay.TrackingMode.FOLLOW); mv.setUserLocationRequiredZoom(10); // Retrieve UserLocation mv.getUserLocation(); ...
You can convert your coordinates to screen points using: http://leafletjs.com/reference.html#map-latlngtolayerpoint And then measure the distance between the two points with: http://leafletjs.com/reference.html#point-distanceto...
javascript,leaflet,mapbox,geojson
What you are doing is handling events of the featureLayer, not of the individual layers that are contained within the featureLayer. FeatureLayer is a group of layers, a layer for each feature within the collection you pass to it on initialization. Take this collection for instance, renders three markers in...
The usage looks right. One thing you might want to look at if you are not expecting to toggle the visibility of either layer is RMCompositeSource, which will fetch in parallel and client-side composite the layers, caching the result, and is a more efficient way to show layers that are...
ios,uiimageview,uibutton,mapbox
One problem is that ship is a local variable that you create in the first block of code. When that code block goes out of scope, ship will be nil, so when you try to set it's center in the button method, it won't work. You need to create a...
You can assign to variable like: var url1 = 'https://{s}.tiles.mapbox.com/v4/mysaqygi.m8jo7i0g/{z}/{x}/{y}.png'; var tileLayer = L.tileLayer(url1,{}); and then tileLayer.setUrl(url2); http://leafletjs.com/reference.html#tilelayer-seturl You can see here a demo of leaflet basemaps....
Why not use the default control layer and create a custom L.Control? Doing that, the positioning is all taken care of for you: JS: var MyCustomControl = L.Control.extend({ options: { // Default control position position: 'bottomleft' }, onAdd: function (map) { // Create a container with classname and return it...
You have to provide the marker a customized Icon. You can use the same image, but you have to tweak the popupAnchor property to do that. See for reference http://leafletjs.com/reference.html#icon and http://leafletjs.com/examples/custom-icons.html In your case you'll have to do (considering the default icon is 25 x 41 px, iconAnchor could...
Using Leaflet, you simply have to define a function to set the style of the polygon on mouseover event. For example: polygonLayer.on('mouseover', function (this) { this.setStyle({ fillOpacity: 0, color: 'black' }); }); ...
feature is a JavaScript object. Jinja doesn't have access to those; it runs on the server, whereas your JavaScript runs in the client. feature doesn't exist when your template is rendered. You will need to handle the concatenation with JavaScript. var commoncontent = '<div><img src="{{ url_for("static", filename="images/eol/thumbs/big/") }}' + feature.properties.category.localimageurl.jpg...
javascript,algorithm,leaflet,mapbox
The parametric equations that give you the points along a circle's circumference are given by: x = Xc + R * cos(theta) y = Yc + R * sin(theta) Where, x,y is a point on the circumference, Xc, Yc is the centre of the circle, R is its radius and...
Mapbox.js provides a convenient way to consume Mapbox services — tiles, geocoding, markers, etc — and helps developers comply with licensing/attribution terms automatically. It also looks like it adds some design scaffolding. Anything prefixed with L.mapbox in the API documentation is custom, but all features of Leaflet are still available....
I simply forgot to add the stylesheets.
You need to add your token to the request otherwise you'll get 404: {"message":"Not Authorized - No Token"} Correct code: L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', subdomains: ['a','b','c','d'], mapId: 'myMapId', token:...
Instead of using omnivore to grab the pts layer... Why not declare a pts variable, use jQuery.getJSON to grab pts.geojson and assign that response to the pts variable, then call L.geoJson(pts).addTo(map). Then you have the layer added, and you have the original geojson structure available for use in other places,...
javascript,html5,cordova,mapbox
I don't know who told you or where you read that it's possible while using mapbox-js (some kind of reference would be nice) but it isn't and that's why you can't find it. However, it is possible using the iOS or Android SDK's: https://www.mapbox.com/help/ios-offline/ https://www.mapbox.com/help/android-offline/...
When you apply a filter, the filtered features get re-added to the layer, since you only apply the style on the ready event when you at first load the features and they get added, you'll lose the style when you use the filter because of the re-adding. You should apply...
Two problems: coordinate order and north/south east/west This coordinate: "coordinates": [ -40.729423, 73.981437 ] Is in latitude, longitude order. Mapbox, and the GeoJSON standard format that this data is in, specifies a longitude, latitude order (similarly, KML, Shapefiles, and most other geospatial data formats specify longitude, latitude rather than the...
You can use ajax to snag the data from your own site Here is a jquery way of doing it. $.ajax({ dataType: "json", //you shouldn't need to declare geojson url: "data/district.geojson", success: function(data) { //whatever you want to do with the data, alternatively you could use a closer around the...
Leaflet does not spread markers by default. You are using a custom CSS class for your markers. Check your CSS paddings, margins and borders. They sometimes add up....
angularjs,angularjs-directive,angularjs-scope,mapbox,angularjs-compile
You need to return the compile angular element instead of returning html of that element. Only returning the html will never carry the angular two way binding. By using compiled object you can keep your binding working. Code this.createPopup = function(marker) { var popup = "<mapbox-marker-popup" + "title = '"...
you can just use: map.setMapType(GoogleMap.MAP_TYPE_NONE); Refs: https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap#setMapType(int) https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap#MAP_TYPE_NONE...
Location manager is running asynchronously (expected behavior), which means that it returns immediately and finishes creating the map as soon as the create map box method is called. However, it doesn't mean that the map has gotten a location yet. I'm thinking that the best way to implement this would...
Short answer: nope. It's not implemented and trying to override default latLng behavior would break some parts of Leaflet code....
Too be short, there isn't. You could however, hook into the onload event of the script tag: <script type="text/javascript" onload="console.log(L)" src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> ...
Use the worldCopyJump option of L.mapbox.map (L.map): With this option enabled, the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible. Working example on Plunker: http://plnkr.co/edit/cbDNH6Rs5SbBKGY7LQGe?p=preview Reference: http://leafletjs.com/reference.html#map-worldcopyjump...
You can only completely remove the attribution on maps that do not contain Mapbox (Streets, Terrain, Satellite) or OpenStreetMap layers. This is because the OpenStreetMap and DigitalGlobe data contained in these layers legally require attribution. If your map doesn’t include these layers, you can remove the default attribution by setting...
MapBox seems to only accept Latitude and Longitude coordinates (from what I can tell at least). The coordinates you have in your file come from ESRI 102100 (3857) projection system - the clue is near the beginning of your file: "spatialReference":{"wkid":102100,"latestWkid":3857}..." Normally, you'd have to convert this yourself, a good...
javascript,leaflet,layer,mapbox,pane
Put explicit zIndexes on your mbstyle and mblabels layers: var mbstyle = L.mapbox.tileLayer('statecodemog.aa380654', { 'zIndex': 1 }); var mblabels = L.mapbox.tileLayer('statecodemog.798453f5', { 'clickable': 'false', 'zIndex': 1000 }); Then tell your L.control.layers not to mess around with the zIndexes: L.control.layers(baseLayers, groupedOverlays, { 'autoZIndex': false }).addTo(map); A working fork of your Fiddle:...
Use leaflet with an offline caching option, something like: https://github.com/tbicr/OfflineMap/tree/master/leaflet_idb_sql_site You can find more options here...
javascript,node.js,leaflet,mapbox
You can remove layers from the map using the removeLayer function of L.Map. A marker is also seen as a layer in Leaflet. So in your onclick handler, first remove the current marker, then create a new marker and add to the map. Something like this will do the trick:...
android,geolocation,maps,google-maps-android-api-2,mapbox
I use Nutiteq His is fully featured library that has many unique features...
You can take advantage of the minZoom and maxZoom options when you create your map. This way the user can only zoom in so far but can still zoom out. L.mapbox.accessToken = 'accessToken'; L.mapbox.map('map', 'mapId', {zoomControl: false, attributionControl: false, minZoom: 5}); ...
map.fitBounds(myFeatureGroup1.getBounds().extend(myFeatureGroup2.getBounds())); See the LatLngBounds documentation, this is the first documented method....
You could try something like this, it depends on two functions inherited from L.LayerGroup called removeLayer & addLayer: // Create featurelayer and add it to the map var featureLayer1 = L.mapbox.featureLayer(mapid).addTo(map); // Create another featurelayer, don't add it to the map var featureLayer2 = L.mapbox.featureLayer(mapid); // Wait until ready featureLayer2.on('ready',...
twitter-bootstrap,mobile,leaflet,mapbox,window-resize
the maps now work. the issue was http/https. two things had to be changed. 1) the method of calling the tiles and associated php script initially, i used tileserver.php to call 'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson' now i'm using mbtiles-server.php to call 'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png") note: php script had to be in...
You need to reset the style once the zoom changes. Simply add the below line in your map.on('zoomend') function timeline.setStyle(damsStyle) so, your function would be like this map.on('zoomend', function(e) { var currentZoom = map.getZoom(); console.log("Current Zoom" + " " + currentZoom); if (currentZoom <= 6) { damsRadius = 2; }...
javascript,leaflet,openstreetmap,mapbox
Assuming you are using the javascript api of Mapbox with a tilelayer, you could set the unloadInvisibleTiles option of that tilelayer. If true, all the tiles that are not visible after panning are removed (for better performance). true by default on mobile WebKit, otherwise false. Setting the option when instanciating...
The authoritative way to do this is to pass includeMetadata:NO and you won't get this starting info: https://www.mapbox.com/mbxmapkit/api/Classes/MBXRasterTileOverlay.html#//api/name/initWithMapID:includeMetadata:includeMarkers:...
The new way to do this is via Map#addSource: map.addSource('foo-bar.ci58c127', { type: 'vector', url: 'mapbox://foo-bar.ci58c127' }); The first argument is the source ID, which you can use when adding layers: map.addLayer({ "id": "markers", "type": "symbol", "source": "foo-bar.ci58c127", "layout": { ... }, "paint": { ... } }); Whenever there are breaking...
android,mapbox,marker,clicklistener
I got the solution for marker click event in mapbox using a functionality provided by mapbox sdk called ItemizedIconOverlay. I have done like following : public void placeGTMarker() { alMarkerGT = new ArrayList<Marker>(); marker = new Marker("my Marker", "", latLng); marker.setMarker(activity.getResources() .getDrawable(R.drawable.map_pin)); mv.addMarker(marker); alMarkerGT.add(marker); itemizedIconOverlayGT = new ItemizedIconOverlay(activity, alMarkerGT, new...
It's just a matter of hooking on to the click event of the layer, clearing the group and add that single layer. Also hook on to the map click, remove the single layer and restore the rest. Here's a quick-n-dirty example: // vars to store stuff var geojson, source, selected;...
At the moment you're using their example ID and maps. You're not supposed to do that. If you would have read at the bottom of the page you posted it says: Use this example by copying its source into your own HTML page and replacing the Map ID with one...
I spend almost one day to find it. If somebody have same problem you can find the listener here: myMapBoxView.setMapViewListener(new MapViewListener() { @Override public void onShowMarker(MapView mapView, Marker marker) { } @Override public void onHideMarker(MapView mapView, Marker marker) { } @Override public void onTapMarker(MapView mapView, Marker marker) { } @Override...
I ended up coming up with this function based on what mapbox returned. The root node gives the town/city, and then gives the context around it. It was a matter of checking which context was the postal code and excluding that, while rebuilding the string. //builds proper format of location...
javascript,node.js,ubuntu,npm,mapbox
If you just want to use the package, $ npm install -g carto should be enough to get you started. Note that you might need to use sudo for that command. Node.js is centered around a package manager called "npm". Every npm project has a package.json at its root directory...
javascript,gis,leaflet,mapbox,geojson
You're using the layer variable: marker.bindPopup("<p>" + layer.feature.properties.name + "</p>"); The layer variable does not contain the feature object. You are looping over the contained layers assigning them to the marker variable, those have the feature object, so you should that: marker.bindPopup("<p>" + marker.feature.properties.name + "</p>"); ...
javascript,d3.js,data-visualization,mapbox
You need to load the tileLayer seperately so you can create a reference to it which you can then in turn use to create a layercontrol which can easily enable/disable layers: L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ'; // Create the tileLayer. var tileLayer = L.mapbox.tileLayer('examples.map-i86nkdio'); var map = L.mapbox.map('mapbox', null, { // Do...
As I was able to override the Mapbox function, I could add extra querystring parameters. A quick look at the ArcGis Export Map api (http://resources.esri.com/help/9.3/arcgisserver/apis/rest/export.html), I saw that bboxSR could do the trick. From the api help page: bboxSR: The well-known ID of the spatial reference of the bbox. If...
By using Chrome Web inspector, you can watch how this effect is managed with TileLayers stacked on top of each other, and the CSS opacity attribute changing as time passes on.So it sounds like there would be some custom JS timing setup you would need to duplicate this, probably with...
Wouldn't the solution be to just add the below directly after myLayer.setGeoJSON(geoJson).addTo(map);? myLayer.setFilter(function(f) { return f.properties['development'] === true; }); ...
Currently it's not available in the Leaflet API. Luckily if Leaflet is using SVG, all objects are DOM elements and we can simply change their order. Here's a sample code: L.Path.prototype.setZIndex = function (index) { var obj = $(this._container || this._path); if (!obj.length) return; // not supported on canvas var...
mobile,maps,leaflet,mapbox,window-resize
the maps now work. the issue was http/https. two things had to be changed. 1) the method of calling the tiles and associated php script initially, i used tileserver.php to call 'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson' now i'm using mbtiles-server.php to call 'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png") note: php script had to be in...
Mapbox has it's own geocoding API in public beta: Geocoding requests are queries composed of location text or lat/lon coordinates that can be used to find corresponding place data. A geocoding request includes a geocoding {index} in requests which specifies the dataset to use to find place data. https://www.mapbox.com/developers/api/geocoding/...
angularjs,angular-ui-bootstrap,mapbox
The map gets initialized when the mapcontainer is not visible, that's why it fails. You're on the right path with calling invalidateSize but you need to do that when the tab becomes visible. I see you've already setup an event which you could hook into in your directive link function:...
javascript,jquery,popup,mapbox
Solved. This part: map.featureLayer.on('ready', function(e) { document.getElementById('open-popup').onclick = clickButton; }); never fires because you already have another event: myLayer.on('layeradd', function(e) { The onready event is for asynchronous calls. Reference here. L.mapbox.accessToken = 'pk.eyJ1Ijoic21vcnJpczMiLCJhIjoiU1RtclNJMCJ9.AWDKQ9l9dY32tB5J8srivg'; var map = L.mapbox.map('mapbox', 'smorris3.78f0898a', { attributionControl: false, zoomControl: false, legendControl: { position: 'bottomleft' } }) .setView([32.888065,...
There is an in-progress feature for determining total files before actually kicking off the download: https://github.com/mapbox/mbxmapkit/pull/137 But otherwise, yes, that sounds decent. As far as calculating the space, tile sizes will vary, but you could run some sample use cases of your app and get some average tile sizes as...
javascript,jquery,placeholder,mapbox
It wasn't working in your example because jQuery wasn't included. If you don't want to use jQuery, you could use the following: Updated Example document.querySelector('.leaflet-control-mapbox-geocoder-form input').placeholder = "Search for Location"; You can also add an event listener for the ready event and then change the placeholder attribute within the callback....
Loop over all the layers added to the map using the eachLayer method of L.Map, then call the removeLayer method of L.Map on each of them: map.eachLayer(function (layer) { map.removeLayer(layer); }); References: eachLayer: http://leafletjs.com/reference.html#map-eachlayer removeLayer: http://leafletjs.com/reference.html#map-removelayer Please note that this wil remove ALL the layers from your map. That means...
javascript,jquery,highcharts,mapbox
I try with this solution, may it will help you, JSFiddle HTML: <head lang="en"> <title></title> </head> <body> <div id='map'></div> </body> CSS: body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .sparkline { height: 100px; width: 200px; } jQuery: L.mapbox.accessToken = 'pk.eyJ1IjoibmF1dGlseXRpY3MiLCJhIjoidG5tdktlMCJ9.Ktr2w0QzGrAN2UNtrJJziw';...
It should be set as: map.fitBounds(bounds, { padding: [50, 50], maxZoom: 18, animate: true, pan: { duration: 10 } }); ...
If you were to show Mapbox geocoder results not in conjunction with one of their maps, it would violate the Mapbox Terms of Service. This would explain why there are no independent libraries for doing so. But what you describe doesn't sound like it would necessarily run afoul of the...
You're not adding your L.mapbox.featureLayer (pivotslayer) to you mapinstance: var pivotsLayer = L.mapbox.featureLayer(); Assuming you have a reference to your map instance in a variable called map: var pivotsLayer = L.mapbox.featureLayer().addTo(map); // or map.addLayer(pivotsLayer); I've tried your data: http://plnkr.co/edit/VjijEh?p=preview and your circle is ending up somewhere in the atlantic above...
objective-c,mapbox,smcalloutview
You have to overwrite the SMCalloutView as I did here: https://github.com/Olinguito/YoIntervengoiOS/blob/master/Pods/SMCalloutView/SMCalloutView.m#L18 Hope it helps you....
javascript,navigation,mapbox,markers
Here it is. All you have to do is something like: var content = '<h2>New Content!<\/h2>' + '<p>' + marker.feature.properties.title + '<br \/>' + 'link: ' + marker.feature.properties.weburl + '<\/p>'; marker.bindPopup(content); ...
javascript,leaflet,mapbox,markerclusterer
My guess (am unable to test this) is that your map is still zooming while you call openPopup on the marker. At that time the marker isn't added to the map yet because of your cluster so the popup won't show. You could try to wait untill the setView method...
Yes, MapBox Studio places labels based on the order of the features in the data. So depending on how you store your data, you will have to do some pre-processing. If you can store your data in a PostGIS database, it's very easy to do things like this on the...
javascript,maps,mapbox,mapbox-gl-js
Currently, no - simplestyle-spec isn't supported in Mapbox GL. Currently the GeoJSON support is still very primitive, given that the focus was initially on vector tiles. simplestyle-spec support is certainly in the plans.
You had an error with trying to call fitBounds on a undefined object.. This codeblock here resolves the issue. Notice how I pass the map reference(ref:ref) to GPX in its options hash so I can clearly retrieve it later as opposed to trying to grab it via index.The GPX retrieval...