How do I set view to see all markers on map in **Mapbox** or **Leaflet**? Like Google Maps API does with `bounds`?

E.g:

    var latlngbounds = new google.maps.LatLngBounds();
    for (var i = 0; i &lt; latlng.length; i++) {
      latlngbounds.extend(latlng[i]);
    }
    map.fitBounds(latlngbounds);

Zoom to fit all markers in Mapbox or Leaflet

I&#39;m looking for the right url to reference static assets, like images within Vue javascript.

For example, I&#39;m creating a leaflet marker using a custom icon image, and I&#39;ve tried several urls, but they all return a `404 (Not Found)`:

**Main.vue:**

    var icon = L.icon({
        iconUrl: &#39;./assets/img.png&#39;,
        iconSize:     [25, 25],
        iconAnchor:   [12, 12]
    });

I&#39;ve tried putting the images in the assets folder and the static folder with no luck.  Do I have to tell vue to load those images somehow?

How to reference static assets within vue javascript

The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function?

    function initialize() {
	map = L.map(&#39;map&#39;);
	L.tileLayer(&#39;http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png&#39;, {
		maxZoom: 18,
		attribution: &#39;Map data &amp;copy; &lt;a href=&quot;http://openstreetmap.org&quot;&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href=&quot;http://creativecommons.org/licenses/by-sa/2.0/&quot;&gt;CC-BY-SA&lt;/a&gt;, Imagery &#194;&#169; &lt;a href=&quot;http://cloudmade.com&quot;&gt;CloudMade&lt;/a&gt;&#39;
	}).addTo(map);

	map.locate({setView: true, maxZoom: 8});	
    } 

How to change the map center in Leaflet.js

I have started using leaflet as an open source map, http://leaflet.cloudmade.com/

The following jQuery code will enable the creation of markers on the map on map click:

     map.on(&#39;click&#39;, onMapClick);
	function onMapClick(e) {
			var marker = new L.Marker(e.latlng, {draggable:true});
			map.addLayer(marker);
			marker.bindPopup(&quot;&lt;b&gt;Hello world!&lt;/b&gt;&lt;br /&gt;I am a popup.&quot;).openPopup();
	};

But there is currently no way for me (in my code) to delete existing markers, or find all the markers i&#39;ve created on a map and put them into an array. Can anyone help me understand how to do this? Leaflet documentation is available here : http://leaflet.cloudmade.com/reference.html

Leaflet - How to find existing markers, and delete markers?

I have an offline web application using appcaching. I need to provide it about 10MB - 20MB of data that it will save (client-side) consisting mainly of PNG image files. The operation is as follows:

 1. Web application downloads and installs in appcache (uses manifest)
 2. Web app requests from server PNG data files (how? - see alternatives below)
 3. Occasionally web app resyncs with server, and does small partial updates/deletes/additions to PNG database
 4. FYI: Server is a JSON REST server, that can place files in wwwroot for pickup

Here is my current analysis of client-based &quot;databases&quot; that handle binary blob storage

SEE UPDATE at Bottom
====================

 - **AppCache** (via manifest add all the PNG and then update on demand)
     - CON: any change of a PNG database item will mean complete download of all items in manifest (Really bad news!)
 - **WebStorage**
    - CON: Designed for JSON storage
	- CON: can only store blobs via base64 encoding (probably fatal flaw due to cost of de-encoding)
	- CON: Hard limit of 5MB for webStorage http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html
 - **PhoneGap &amp; SQLLite**
    - CON: Sponsor will reject it as a native app requiring certification
 - **ZIP file**
    - Server creates a zip file, places it in wwwroot, and notifies client
    - user has to manually unzip (At least that is how I see it) and save to client file system
	- Web app uses FileSystem API to reference files
	- CON: ZIP might be too large (zip64?), long time to create
	- CON: Not sure if FileSystem API can always read out of the sandbox (I think so)
 - **USB or SD card** (back to the stone age....)
    - The user will be local to the server before going offline
    - So we could have him insert a SD card, let the server fill it with PNG files
    - Then the user will plug it into the laptop, tablet
    - Web app will use FileSystem API to read the files 
    - CON: Not sure if FileSystem API can always read out of the sandbox (I think so)
 - **WebSQL**
    - CON: w3c has abandoned it (pretty bad)
	- I might consider a Javascript wrapper that uses IndexedDB and WebSQL as a fall-back
 - **FileSystem API**
    - Chrome supports read/write of blobs 
	- CON: not clear about IE and FireFox (IE10, has non-standard msSave)
	- caniuse.com reports IOS and Android support (but again, is this just r/w of JSON, or does it include the full blob API for writing?
	- CON: FireFox folks dislike FileSystem API &amp; not clear if they are supporting saving blobs: https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/
	- PRO: *Much* faster than IndexedDB for blobs according to jsperf http://jsperf.com/indexeddb-vs-localstorage/15 (page 2)
 - **IndexedDB**
    - Good support in IE10, FireFox (save, read blobs)
	- Good speed and easier management than a file system (deletes, updates) 
	- PRO: see speed tests: http://jsperf.com/indexeddb-vs-localstorage/15
	- See this article on storing and display of images in IndexedDB: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
	- CON: I confirmed that Chrome does not yet support blob writing (current bug, but not clear when it will be fixed)
	- UPDATE: [A June 2014 blogpost](https://developers.google.com/web/updates/2014/07/Blob-support-for-IndexedDB-landed-on-Chrome-Dev) suggests Chrome now supports blobs in `IndexedDB`
    - UPDATE: [This caniuse/indexeddb](https://caniuse.com/#search=indexeddb) confirms: &quot;Chrome 36 and below did not support Blob objects as indexedDB values.&quot;; suggesting &gt;Chrome36 supports Blob objects.

 - **LawnChair** JavaScript wrapper http://brian.io/lawnchair/
    - PRO: very clean wrapper for IndexedDB, WebSQL or whatever database you have (think polyfill)
	- CON: cannot store binary blobs, only data:uri (base64 encoding) (probably fatal flaw due to cost of de-encoding)
 - **IndexedDB JQUERY** polyFill https://github.com/axemclion/jquery-indexeddb
    - Parashuram has writtent a nice JQUERY wrapper for the raw IndexedDB interface
	- PRO: greatly simplifies using IndexedDB, I was hoping to add a shim/polyfill for Chrome FileSystemAPI
	- CON: It should handle blobs, but I was unable to get it to work
 - **idb.filesystem.js** http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api
    - Eric Bidelman @ Google has written a well tested PolyFill the FileSystem API that uses Indexed DB as a fall back
	- PRO: FileSystem API is well suited for storing blobs
	- PRO: works great on FireFox and Chrome
        - PRO: great for synchronizing with cloud based CouchDB
	- CON: no clear why, but it is not working on IE10
 - **PouchDB** JavaScript Library http://pouchdb.com/
    - great for syncing a CouchDB with a local DB (uses either WebSQL or IndexedDB (not my problem though)
	- CON: NO CONS, PouchDB now supports binary blobs for all recent browsers (IE, Chrome, Firefox, Chrome on mobile, etc.) as well as many older browsers. That was not the case when I first did this post.

	
NOTE: to see a data:uri encoding of PNG I created an example at: http://jsbin.com/ivefak/1/edit
	
**Desired/Usefull/Uneeded Features**

 - No native (EXE, PhoneGap, ObjectiveC, etc) app on client (pure web application)
 - Only needs to run on latest Chrome, FireFox, IE10 for laptops
 - Strongly want same solution for Android Tablet (IOS would be nice too) but only need one browser to work (FF, Chrome, etc.)
 - Fast initial DB population
 - REQUIREMENT: Very fast retrieval of images by web application from storage (DB, file)
 - Not meant for consumers. We can restrict browsers, and ask user to do special setup &amp; tasks, but let&#39;s minimize that
 
**IndexedDB Implementations**

 - There is an excellent article on how IE,FF,and Chrome internally implement this at: http://www.aaron-powell.com/web/indexeddb-storage
 - In short:
    - IE uses the same database format as Exchange and Active Directory for IndexedDB
    - Firefox is using SQLite so are kind of implementing a NoSQL database in to SQL database
    - Chrome (and WebKit) are using a Key/ Value store which has heritage in BigTable
	
**My Current Results**

 - I chose to use an IndexedDB approach (and polyfill with FileSystemAPI for Chrome until they ship blob support)
 - For fetching the tiles, I had a dilemna since the JQUERY folks are kvetching about adding this to AJAX
 - I went with XHR2-Lib by Phil Parsons, which is very much like JQUERY .ajax() https://github.com/p-m-p/xhr2-lib
 - Performance for 100MB downloads (IE10 4s, Chrome 6s, FireFox 7s). 
 - I could not get any of the IndexedDB wrappers to work for blobs (lawnchair, PouchDB, jquery-indexeddb, etc.)
 - I rolled my own wrapper, and performance is (IE10 2s, Chrome 3s, FireFox 10s)
 - With FF, I assume we are seeing the performance issue of using a relational DB (sqllite) for a non-sql storage
 - NOTE, Chrome has outstanding debug tools (developer tab, resources) for inspecting the state of the IndexedDB.


**FINAL Results posted below as answer**

Update
========
 
PouchDB now supports binary blobs for all recent browsers (IE, Chrome, Firefox, Chrome on mobile, etc.) as well as many older browsers. That was not the case when I first did this post.

 

Storing Image Data for offline web application (client-side storage database)

Is there a way to randomly change marker-colors in native Leaflet? I&#39;m using svg elements which could be styled.
I know that it is possible with mapbox.js

EDIT:
To clarify what I intend to do: If you add markers to the map via a doubleclick or something it should have random colors. To achieve this I wanted to use svg icons for the markers to style them.

This is my code:
```javascript
    myIcon = L.icon({
      iconUrl: &quot;icon_33997.svg&quot;,
      iconAnchor: pinAnchor
    });

    newMarker = L.marker(lat, long], {
      icon: myIcon
    });
```

Leaflet changing Marker color

What are Leaflet and Mapbox, and what are the differences or usages of both? What are the main differences in their APIs?

What are Leaflet and Mapbox, and what are their differences?

    var map = L.map(&#39;map&#39;);
    var marker = L.marker([10.496093,-66.881935]).on(&#39;click&#39;, onClick);
    function onClick(e) {alert(e.latlng);}
    marker.addTo(map)

When I do click in the marker, the alert message is: undefined

But if I put it in the variable map, it works! (shows latitude and longitude)

    map.on(&#39;click&#39;, onClick); 

Does someone know why it doesn&#39;t work in the marker?

Marker in leaflet, click event

I&#39;m trying to remove the zoom controls (+/-) on a [LeafletJS][1] map. 

I&#39;m using the [MapBox.js version of Leaflet][2] but most of the operations are the same as Leaflet. I implement my map like this:
    
    var map = L.mapbox.map(&#39;map&#39;);
    
    var layer = L.mapbox.tileLayer(&#39;MAPBOX-ID&#39;, {
	    format: &#39;jpg70&#39;,
	    minZoom: 13,
	    maxZoom: 15,
	    reuseTiles: true, 
	    unloadInvisibleTiles: true
    });
    map.addLayer(layer);
    map.setView([40.73547,-73.987856]);

The [documentation][3] says there&#39;s a zoomControl option that will remove the zoom control from the map but I&#39;ve had no luck in getting it to work.

How can I remove the zoom control with this implementation? 

Thanks!


  [1]: http://leafletjs.com
  [2]: http://mapbox.com/mapbox.js/api/v1.0.2/
  [3]: http://leafletjs.com/reference.html#control-zoom

LeafletJS: How to remove the zoom control

I have a page where given a select to the user he can switch the leaflet map I show.

After a initial leaflet map load, my problem is when i want to refresh the map. 

I always get &quot;Map container is already initialized&quot;:

The problem line is:

    var map = L.map(&#39;mapa&#39;).setView([lat, lon], 15);

Initially it loads well, but when I select another parameter in the form and want to display the map another time it crashes.

btw, I&#39;ve tried to destroy and recreate `$(&#39;#mapa&#39;)` with jQuery before the second `setView()` but it shows the same error.

refresh leaflet map: map container is already initialized

I am trying to create a **react-typescript** app along with **leaflet**. I used the command,

 `npm install leaflet react-leaflet @types/react @types/leaflet --save` to install the dependencies.

But when I start the application it says,

        ./node_modules/@react-leaflet/core/esm/path.js 10:41
    Module parse failed: Unexpected token (10:41)
    File was processed with these loaders:
     * ./node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    |   useEffect(function updatePathOptions() {
    |     if (props.pathOptions !== optionsRef.current) {
    &gt;       const options = props.pathOptions ?? {};
    |       element.instance.setStyle(options);
    |       optionsRef.current = options;

Here&#39;s my package.json

    {
      &quot;name&quot;: &quot;aq-monitor&quot;,
      &quot;version&quot;: &quot;0.1.0&quot;,
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
        &quot;@testing-library/jest-dom&quot;: &quot;^5.12.0&quot;,
        &quot;@testing-library/react&quot;: &quot;^11.2.7&quot;,
        &quot;@testing-library/user-event&quot;: &quot;^12.8.3&quot;,
        &quot;@types/jest&quot;: &quot;^26.0.23&quot;,
        &quot;@types/leaflet&quot;: &quot;^1.7.0&quot;,
        &quot;@types/node&quot;: &quot;^12.20.13&quot;,
        &quot;@types/react&quot;: &quot;^17.0.5&quot;,
        &quot;@types/react-dom&quot;: &quot;^17.0.5&quot;,
        &quot;antd&quot;: &quot;^4.15.5&quot;,
        &quot;leaflet&quot;: &quot;^1.7.1&quot;,
        &quot;react&quot;: &quot;^17.0.2&quot;,
        &quot;react-dom&quot;: &quot;^17.0.2&quot;,
        &quot;react-leaflet&quot;: &quot;^3.2.0&quot;,
        &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
        &quot;react-scripts&quot;: &quot;4.0.3&quot;,
        &quot;typescript&quot;: &quot;^4.2.4&quot;,
        &quot;web-vitals&quot;: &quot;^1.1.2&quot;
      },
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;react-scripts start&quot;,
        &quot;build&quot;: &quot;react-scripts build&quot;,
        &quot;test&quot;: &quot;react-scripts test&quot;,
        &quot;eject&quot;: &quot;react-scripts eject&quot;
      },
      &quot;eslintConfig&quot;: {
        &quot;extends&quot;: [
          &quot;react-app&quot;,
          &quot;react-app/jest&quot;
        ]
      },
      &quot;browserslist&quot;: {
        &quot;production&quot;: [
          &quot;&gt;0.2%&quot;,
          &quot;not dead&quot;,
          &quot;not op_mini all&quot;
        ],
        &quot;development&quot;: [
          &quot;last 1 chrome version&quot;,
          &quot;last 1 firefox version&quot;,
          &quot;last 1 safari version&quot;
        ]
      },
      &quot;devDependencies&quot;: {
        &quot;@types/react-router-dom&quot;: &quot;^5.1.7&quot;
      }
    }

Here&#39;s map/index.tsx

    import React from &#39;react&#39;;
    import &#39;./styles.css&#39;;
    import L, { LatLngExpression } from &quot;leaflet&quot;;
    import &quot;leaflet/dist/leaflet.css&quot;;
    import {MapContainer, TileLayer, Marker, Popup} from &#39;react-leaflet&#39;;
    
    const position : LatLngExpression = [59.91174337077401, 10.750425582038146];
    
    export default function MapJar() {
        return (
            &lt;MapContainer center={position} zoom={13} scrollWheelZoom={false}&gt;
                &lt;TileLayer
                    attribution=&#39;&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors&#39;
                    url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;
                /&gt;
                &lt;Marker position={position}&gt;
                    &lt;Popup&gt;
                        A pretty CSS3 popup. &lt;br /&gt; Easily customizable.
                    &lt;/Popup&gt;
                &lt;/Marker&gt;
            &lt;/MapContainer&gt;
        );
    }; 

I tried re-installing dependencies several times but still didn&#39;t work.

I understand this is a simple issue and an error that I am making but however, I have not been able to resolve this error.

Any input is appreciated. Thanks in advance.

How to fix error &quot;Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)&quot;

I have a `&lt;div&gt;` containing a leaflet map. Upon certain events the height of the `&lt;div&gt;` will be altered. I&#39;d like for the map to resize to the new dimensions of its surrounding `&lt;div&gt;` so that the old center is centered in the resized smaller or larger map. I tried using the `invalidateSize()` function, but it doesn&#39;t seem to work at all. How can I resize and center the map after that `map-container-resize` event?

    $mapContainer.on(&#39;map-container-resize&#39;, function () {
       map.invalidateSize(); // doesn&#39;t seem to do anything
    });



*Edit to give more context:*

The map container is styled initially as

    #map-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        transition: height 0.5s ease-in-out;
    }

After a user clicks a certain button, another panel shows at the bottom of the page and the map-container&#39;s height will be reduced to something less than 100% (say 80%). 

Upon click on this button, the map-container-resize event is triggered so that I can make the map resize and center on its old (i.e. before the resizing happened) center. The map itself should then also be resized to 80% of its initial height. 

The APi doc for `invalidateSize` seemed to be what I wanted: 

&gt; &quot;Checks if the map container size changed and updates the map if so
&gt; [...]&quot;

 But having a look with the output of the `getSize` function before and after the call to invalidateSize, nothing is different, the map remains at its old size.

Resizing a leaflet map on container resize

I am in the process of creating a Shiny dashboard application, where the dashboard body is supposed to show some maps. So far no problem to get the map expand over the entire width of the body, but it&#39;s somehow not willing to adjust to the full height.
[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/jxEEI.png

The leaflet itself is already set to cover 100% of the height, but it doesn&#39;t do the trick. As soon as I use the height attribute for the leafletOutput the leaflet object will not show at all, and I am left with an empty box.

The code can be found below:

    library(shinydashboard)
    library(leaflet)
    
    ui &lt;- dashboardPage(
      dashboardHeader(title = &quot;Basic dashboard&quot;),
      dashboardSidebar(
        sidebarMenu(
          menuItem(
            &quot;Maps&quot;, 
            tabName = &quot;maps&quot;, 
            icon = icon(&quot;globe&quot;),
            menuSubItem(&quot;Watersheds&quot;, tabName = &quot;m_water&quot;, icon = icon(&quot;map&quot;)),
            menuSubItem(&quot;Population&quot;, tabName = &quot;m_pop&quot;, icon = icon(&quot;map&quot;))
          ),
          menuItem(
            &quot;Charts&quot;, 
            tabName = &quot;charts&quot;, 
            icon = icon(&quot;bar-chart&quot;),
            menuSubItem(&quot;Watersheds&quot;, tabName = &quot;c_water&quot;, icon = icon(&quot;area-chart&quot;)),
            menuSubItem(&quot;Population&quot;, tabName = &quot;c_pop&quot;, icon = icon(&quot;area-chart&quot;))
          )
        )
      ),
      dashboardBody(
        tabItems(
          tabItem(
            tabName = &quot;m_water&quot;,
            box(
              title = &quot;Baltic catchment areas&quot;,
              collapsible = TRUE,
              width = &quot;100%&quot;,
              height = &quot;100%&quot;,
              leafletOutput(&quot;l_watershed&quot;)
            )
          ),
          tabItem(
            tabName = &quot;m_pop&quot;,
            # Map in Dashboard
            leafletOutput(&quot;l_population&quot;)
          ),
          tabItem(
            tabName = &quot;charts&quot;,
            h2(&quot;Second tab content&quot;)
          )
        )
      )
    )
    
    server &lt;- function(input, output) {
      set.seed(122)
      histdata &lt;- rnorm(500)
    
      output$l_watershed &lt;- renderLeaflet({
        leaflet(height = &quot;100%&quot;) %&gt;% addTiles() %&gt;% setView(19.08, 60.25, zoom = 4) %&gt;%addWMSTiles(
          &quot;http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?&quot;,
          layers = &quot;11&quot;,
          options = WMSTileOptions(
            format = &quot;image/png&quot;,
            transparent = TRUE
          ),
          attribution = &quot;Catchment area provided by HELCOM&quot;
        )
      })
      
      output$l_population &lt;- renderLeaflet({
        leaflet(height = &quot;100%&quot;) %&gt;% addTiles() %&gt;% setView(19.08, 60.25, zoom = 4) %&gt;%addWMSTiles(
          &quot;http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?&quot;,
          layers = &quot;17&quot;,
          options = WMSTileOptions(
            format = &quot;image/png&quot;,
            transparent = TRUE
          ),
          attribution = &quot;Population data provided by HELCOM&quot;
        )
      })
    }
    
    shinyApp(ui, server)

How to get Leaflet for R use 100% of Shiny dashboard height

There are numerous online resources which provide JavaScript APIs to access their services. To be more clear, I will base my question on the example of [MapBox][1], but this applies well to many other services in various domains.

When someone wants to use such a service in a web application (like the map imagery from MapBox for example), they typically need to Register/Sign Up and obtain an **access token** to access the service. 

Now, if I would use the API from the server side - there is no issue: I know my token is stored securely somewhere on the server and is only exposed upon communication between my server and the service provider, which is OK as long it is HTTP**S**. However, in case of a JavaScript API (for example if I use [Leaflet][2] to render a map from MapBox), I am supposed to have **my access token** in a JavaScript which is exposed to the user&#39;s web browser - and so it makes it extremely easy to find someone&#39;s access token. My users, or in a case of a public service, literally anyone, would be able to find the token in the browser&#39;s &quot;Dev Tools&quot;. 

This token however, as for me, should be considered as a sensetive data - service usage is tracked based on the authentication this token provides. If you pay for the service based on its usage it becomes critical, but even if you don&#39;t (like, if you use a Free/Starter/Non Paid plan) - service usage is limited and I&#39;d like to be sure it is only me who uses it. 

Is my only option a proxy via my own web server?

Is there a way to secure the access token used by a JavaScript API to access an external service, provided that JavaScript is executed in a user&#39;s browser?


  [1]: http://www.mapbox.com
  [2]: http://leafletjs.com/

How to secure the JavaScript API Access Token?

I&#39;m trying to use `react-leaflet` to display a map. I use the code from [this fiddle](https://jsfiddle.net/paul_lecam/q2v7t59h/) which is working, but on my computer I have this output

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/rw2xG.jpg

Here is my code :

**DeviceMap.js**

    import React from &#39;react&#39;
    import { Map, Marker, Popup, TileLayer } from &#39;react-leaflet&#39;;
    
    export class DeviceMap extends React.Component {
      constructor() {
        super();
        this.state = {
          lat: 51.505,
          lng: -0.09,
          zoom: 13,
        };
      }
    
      render() {
        const position = [this.state.lat, this.state.lng];
        return (
          &lt;Map center={position} zoom={this.state.zoom} scrollWheelZoom={false}&gt;
            &lt;TileLayer
              attribution=&#39;&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors&#39;
              url=&#39;http://{s}.tile.osm.org/{z}/{x}/{y}.png&#39;
            /&gt;
            &lt;Marker position={position}&gt;
              &lt;Popup&gt;
                &lt;span&gt;A pretty CSS3 popup. &lt;br/&gt; Easily customizable.&lt;/span&gt;
              &lt;/Popup&gt;
            &lt;/Marker&gt;
          &lt;/Map&gt;
        );
      }
    }
    
    export default DeviceMap

**DeviceTabs.js**

    export class DeviceTabs extends React.Component {
      state = {
        index: 0
      };
    
      handleTabChange = (index) =&gt; {
        this.setState({ index })
      };
    
      render () {
        return (
          &lt;Tabs index={this.state.index} onChange={this.handleTabChange}&gt;
            &lt;Tab label=&#39;Values&#39;&gt;
              &lt;DeviceTable {...this.props} /&gt;
            &lt;/Tab&gt;
            &lt;Tab label=&#39;Map&#39;&gt;
              &lt;div className={style.leaflet}&gt;
                &lt;DeviceMap /&gt;
              &lt;/div&gt;
            &lt;/Tab&gt;
          &lt;/Tabs&gt;
        )
      }
    }

**style.scss**

    .leaflet {
      height: 300px;
      width: 100%;
    }

There is no error in the console, and I have no more idea where to search. Since the fiddle is working it is not a bug. Did I miss something ?

react-leaflet map not correctly displayed

I&#39;m using `Leaflet.js` and would like some way to centre the map on the markers I have so that all are within the user&#39;s view when the page launches. If all the markers are clustered in a small area, I would like the map to zoom down to a level that still displays all of them.

I know google maps has an auto-centre function but how would I go about this with Leaflet.js?

Leaflet.js center the map on a group of markers

I&#39;m working on an app using [Leaflet][1] (via [react-leaflet][2]). Leaflet directly manipulates the DOM. The react-leaflet library doesn&#39;t change that, it just gives you React components that you can use to control your Leaflet map in a React-friendly way.

In this app, I want to use custom map markers that are divs containing a few simple elements. The way to do that in Leaflet is to set your marker&#39;s `icon` property to a [DivIcon][3], in which you can set your custom HTML. You set that inner HTML by setting the DivIcon&#39;s `html` property to a string containing the HTML. In my case, I want that HTML to be rendered from a React component.

In order to do that, it seems like the correct approach is to use `ReactDOMServer.renderToString()` to render the Component that I want inside the map marker into a string, which I would then set as the `html` property of the DivIcon:

***MyMarker.js:***

    import React, { Component } from &#39;react&#39;
    import { renderToString } from &#39;react-dom/server&#39;
    import { Marker } from &#39;react-leaflet&#39;
    import { divIcon } from &#39;leaflet&#39;

    import MarkerContents from &#39;./MarkerContents&#39;
    
    export class MyMarker extends Component {
      render() {
        const markerContents = renderToString(&lt;MarkerContents data={this.props.data} /&gt;)
        const myDivIcon = divIcon({
          className: &#39;my-marker&#39;,
          html: markerContents
        })
        
        return (
          &lt;Marker
            position={this.props.position}
            icon={myDivIcon} /&gt;
        )
      }
    }

However, according to the [React docs][4]:

&gt; This [renderToString] should only be used on the server.

Is this a strict rule, or is it only meant to dissuade people from circumventing ReactDOM&#39;s efficient management of the DOM?

I can&#39;t think of another (better) way to accomplish what I&#39;m after. Any comments or ideas would be greatly appreciated.


  [1]: http://leafletjs.com/
  [2]: https://github.com/PaulLeCam/react-leaflet
  [3]: http://leafletjs.com/reference.html#divicon
  [4]: https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring

Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn&#39;t directly managing the DOM?

I&#39;m very interested in the [Leaflet Map API][1].

However, I need to be able to use the Google Satellite Layer. I have not been able to find an example on how to add a Google Satellite Layer to Leaflet. I understand that I will still need to load the Google Maps API to do this (OpenLayers has an example).

  [1]: http://leaflet.cloudmade.com/

Leaflet Map API with Google Satellite Layer

Do my tiles need to adhere to any particular specs?

I have a large image file which I&#39;d like to turn into a map with LeafletJS. I am going to be using the Python Imaging Library to cut it up into all the various tiles I need. 

However, I can&#39;t find any information about using custom maps in Leaflet. Do I provide Leaflet with the range of X,Y,Z info somehow? Do I give it the pixel size of each tile? Does it figure this out on its own?

To put my question into one concise question: What do I need to do in order to have image files that can double as map tiles with LeafletJS, and what, if anything, do I need to do in my front-end script? (beyond the obvious specifying of my custom URL)

Using custom map image tiles in LeafletJS?

I have the fallowing code:

    map: function (events) {
	    var arrayOfLatLngs = [];
		var _this = this;

		// setup a marker group
		var markers = L.markerClusterGroup();

		events.forEach(function (event) {
		    // setup the bounds
			arrayOfLatLngs.push(event.location);

			// create the marker
			var marker = L.marker([event.location.lat, event.location.lng]);

			marker.bindPopup(View(event));

			// add marker
			markers.addLayer(marker);
		});

		// add the group to the map
		// for more see https://github.com/Leaflet/Leaflet.markercluster
		this.map.addLayer(markers);

		var bounds = new L.LatLngBounds(arrayOfLatLngs);
		this.map.fitBounds(bounds);
		this.map.invalidateSize();
    }

I initially call this function and it will add all `events` to the map with markers and clusters.

at some lather point i pass in some other events, the map will zoom in to the new events but the old ones are still on the map.

I&#39;ve tried `this.map.removeLayer(markers);` and some other stuff, but I can&#39;t get the old markers to disappear

Any ideas?

How to clear leaflet map of all markers and layers before adding new ones?

I&#39;m trying to use Leaflet.js to display a map inside a tabbed panel from Twitter Bootstrap, but is behaving in a strange way: 

When I click on the tab containing the panel there is a gray layer on top of the map. If I drag and move the map I get to see other tiles, but not the initial ones.

Even more strange is that if I resize the browser, suddenly it works perfectly, until I reload again, so I would guess is a problem with the css, but I cannot find the problem.

Also, placing the map outside of the tabbed panel works great.

I tested in Firefox and Chrome, and both have the same issue.

I created a test in jsfiddle to see it &quot;live&quot;:  http://jsfiddle.net/jasalguero/C7Rp8/1/

Any help is really appreciated!

Leaflet map not displayed properly inside tabbed panel

Is it possible to add text to a custom icon marker? I want to avoid having to edit the icon in an image editor just to add the text. 

I&#39;ve created my custom icon marker like so:

    var airfieldIcon = L.icon({
            iconUrl: &#39;images/airfield.png&#39;,
            iconSize: [48,48]
    });

    var airfield = L.geoJson (airfield, {
        pointToLayer: function(feature,latlng){
            return L.marker(latlng, {
                icon: airfieldIcon
            })
        }
    }).addTo(map);

How would I add the text &quot;Banff Airfield&quot; as a label to this icon? Is the easiest and most efficient way through using an image editor? if so, I will do that method, but wondering if there was a better way. Thanks!



All Leaflet Solutions on Gang of Coders

Total of 22 Leaflet Solutions